[Resolved] Problem with Individual Page Header Images

Home Forums Support Problem with Individual Page Header Images

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #100764
    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

    #100765
    Paul Archer

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

    #100820
    Tom
    Lead Developer
    Lead Developer

    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 🙂

Viewing 3 posts - 1 through 3 (of 3 total)
  • You must be logged in to reply to this topic.