Archived topic

Problem with Individual Page Header Images

2 replies · Started by Paul Archer on April 21, 2015

Viewing posts 1–3 of 3

April 21, 2015 at 6:24 am #100764

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

April 21, 2015 at 6:30 am #100765

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

April 21, 2015 at 9:47 am #100820

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 :)

This archived topic is closed to new replies.

Start building better websites today.