How to make the header responsive?

  • Resolved SantaFeMichael

    (@santafemichael)


    8 years, 2 months ago

    Hi,

    The header image is specified to be 1000 x 250 px. But no matter what I do it stretches the image to full width, but it is also not responsive when using a smart phone. Is there some css I need to change in a child theme to make the header the correct size specified, and to make it responsive. The site is https://www.cuyamungueinstitute.com/ – thanks!

    Santa Fe Michael

Viewing 4 replies - 1 through 4 (of 4 total)

  • Hello @santafemichael

    To make the header image responsive while using a smart phone at first you need to add the Custom CSS though the plugin.

    You can find many plugin to add custom CSS. Below link is the reference for one of the plugin.

    Custom SS

    After installing the plugin you will find the custom CSS in Admin Panel / Appearance / Custom CSS.

    Here copy and paste below CSS.

    .header-area {
    background-size: contain;
}

    Hope this will resolve your issue.

    Regards!!

    Thread Starter SantaFeMichael

    (@santafemichael)

    Thanks for the quick reply. It had no effect. The header is still stretched all out of shape, it fills the entire page, and it is supposed to be 1000 x 250. That’s the size I made it as per the customizer recommendation.

    Santa Fe Michael

    Thread Starter SantaFeMichael

    (@santafemichael)

    I made sure the style.css file that came with the theme is pristine and untouched, I added !important to the ‘contain’ snippet you provided and now the 1000 x 250 image is smaller than the width of the content.

    What do I need to do to get it to work as advertised with a 1000 x 250 header image that matches the size of the content and be responsive to smart phones? I’ve never had this much trouble with a css issue but it must be my day.

    Santa Fe Michael

    Hi Santa Fe Michael, did you resole this issue?
    I am having the same problem,
    Many Thanks

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘How to make the header responsive?’ is closed to new replies.