Formatting header image for responsive environment

  • LanceGrigsby

    (@lancegrigsby)


    10 years, 9 months ago

    I’m trying to optimize the look of my header image in the responsive environment. Specifically, I’d like to learn how to control the amount of whitespace around the header image as it resizes for the mobile device. Any thoughts?

Viewing 4 replies - 1 through 4 (of 4 total)
  • webtegrity

    (@webtegrity)

    10 years, 9 months ago

    Hey Lance – use an inspect element tool to see what the author of your theme named the div class around your header image. You’ll need to address that same div class in your css file.

    If you’re trying to change up the mobile view – you’ll need to add a media query to the css.

    If this is greek to you – try to search on YouTube for some how to’s on using Firefox’s Firebug tool or using Chrome’s inspect element tool.

    webtegrity

    (@webtegrity)

    10 years, 9 months ago

    Looks like there’s a class called “title-container” around the header and a div id called “logo” for the logo image specifically. You can play around in your CSS by changing things like

    padding-top: 0px;
    margin-top: 0px;

    etc.

    Thread Starter LanceGrigsby

    (@lancegrigsby)

    10 years, 9 months ago

    Thanks for the reply! Not greek at all. I was just hoping to find some options in theme’s UI under the “Appearance” menu to avoid having to do a deep-dive into the CSS–but perhaps there’s no other way.

    webtegrity

    (@webtegrity)

    10 years, 9 months ago

    Glad to help!

Viewing 4 replies - 1 through 4 (of 4 total)

The topic ‘Formatting header image for responsive environment’ is closed to new replies.