[Resolved] Problem with Individual Page Header Images

[Paul Archer]

Hi Tom,

Each of my pages has a different header image positioned above the content area. When viewed on a mobile device the image is just cropped from the right and doesn’t look very good. i.e. it does not seem to be responsive. Also the text centred on each image does not seem to be responsive either. Is the are CSS i can add to make these elements better responsive?

Thanks,

Paul

[Paul Archer]

Sorry, forgot to include a link so you can see the page header images. http://www.pregnancyandparenting.org

[Tom]

Hi Paul,

Background images are a pain when it comes to responsive websites – it all comes down to the aspect ratio of the image.

What you can do is set a different background image for mobile using CSS. This way you can optimize the image for a more narrow screen.

You can also reduce the font size on mobile.

@media (max-width: 768px) {
      .home .inside-content-header {
            background-image: url( URL TO YOUR MOBILE IMAGE );
      }
      .inside-content-header h3 {
            font-size: 20px;
      }
}

I used “.home” to target your homepage page header. For other pages, use the page ID like this: .page-id-xx – xx being the unique ID of that page.

Let me know if this helps or not 🙂

[Author]

Posts