Non-Responsive Header Images

Viewing 3 replies - 1 through 3 (of 3 total)
  • Plugin Author Nick Diego

    (@ndiego)

    Hi Angela,

    In the body tag of each page is a CSS selector for the page type. So on single blog pages there is the selector single-post. One single pages the selector is page. You can use your browser’s inspector to look at all the selectors available.

    If you want to add CSS just for single pages, you would do something like .page .gch-header img {... It might take some trial and error to get exactly what you want, but this is the way to go.

    Nick

    Thread Starter angeladesign

    (@angeladesign)

    Thanks!

    If you review this page in firefox: https://buildings.techmatemn.com/capabilities the header image is not responsive… this is what I would like to have in all browsers and mobile devices. Thoughts!?

    Thanks. Angela

    Plugin Author Nick Diego

    (@ndiego)

    Hi Angela,

    You have some issues going on with min-height and max-width. Currently you have min-height set to 400px and max-width set to 100%. This is causing the image to be “squished” when the browser width changes. You are going to have to play around with these to get them where you want them, but I would start with removing max-width: 100%.

    Nick

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Non-Responsive Header Images’ is closed to new replies.