Header size in mobile view

  • Resolved djuby

    (@djuby)


    5 years, 5 months ago

    Hi all,

    I need some help with my site. I am using Storefront theme and an image in the header. When I view the site in mobile view the header is not resizing – it is cut, where I need it to be resized so that the whole image is visible, just smaller. Is this possible?

    Best regards.

    The page I need help with: [log in to see the link]

Viewing 4 replies - 1 through 4 (of 4 total)
  • Senff – a11n

    (@senff)

    5 years, 5 months ago

    Hey @djuby

    Although the background image of a header is not directly meant to be an image (with a logo) like you have, but is more meant to be decorative (like a pattern), you can use some CSS to make it look a bit better.

    Go into your site’s admin Dashboard and select Appearance → Customize → Additional CSS. In the CSS textbox on the left, add the following code:

    @media screen and (max-width: 800px) {
  #masthead {
    background-size: 100% auto;
  }
}

    Select “Save Changes” from the top, and your changes will be applied to your site.

    Thread Starter djuby

    (@djuby)

    5 years, 5 months ago

    Great. It works perfect thank you so much.
    Is there a way to remove the white space between the header and the main picture?
    Thank you in advance.

    Best regards.

    Senff – a11n

    (@senff)

    5 years, 5 months ago

    Hey @djuby

    To remove that whitespace, try adding this:

    .home.blog .site-header, .home.page:not(.page-template-template-homepage) .site-header, .home.post-type-archive-product .site-header {
    margin-bottom: 0;
}
    Thread Starter djuby

    (@djuby)

    5 years, 5 months ago

    Thank you so much @senff

    You are great.

    Best regards and be safe.

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

The topic ‘Header size in mobile view’ is closed to new replies.