Reply To: Problem with Individual Page Header Images

Home Forums Support Problem with Individual Page Header Images Reply To: Problem with Individual Page Header Images

Home Forums Support Problem with Individual Page Header Images Reply To: Problem with Individual Page Header Images

#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 🙂