White space under header on mobile

[ChristineLeiser]

I'm using the Brunch Pro theme and I've run into an issue with the space under the header - only on mobile. I can't find a bottom margin setting in the CSS that corresponds to that area and I'm really stuck. It's fine on the desktop version... Thank you!

http://mbstikihut.com

[PyramidWeb]

Hi Christine,
The space under the header is not a margin - it is the height of the area itself.

In your "style.css", the height is set to a fixed value of 488px (see below). For the desktop version, this height looks fine; for the mobile version with a much smaller width, though, a height of 488px is too much, hence the white space under the header. (The smaller the width the heigher this area appears in contrast - just change the width of your browser window and see what happens.)

.header-image .site-title > a {
    background-size: contain;
    display: block;
    height: 488px;
    margin: 10px auto;
    max-width: 1500px;
    text-indent: -9999px;
}

A "quick-and-dirty" solution would be to decrease the height for smaller widths in your media queries.

Hope this helps.

[ChristineLeiser]

Thank you. I'm really struggling with exactly how and where to do that within the media queries. It's really only a problem on the mobile (phone screens), tablets are fine. So I assume that I'm working with "@media only screen and (max-width: 420px)" - I just don't see what I have to adjust within that code.

[ChristineLeiser]

I figured it out. Thank you! If someone is having this issue, I commented out the size in the .css file and then added this to every media query and adjusted accordingly:

}
.header-image .title-area, .header-image .site-title, .header-image .site-title a {
min-height: 200px; /* change this in every screen size*/
}

[Author]

Posts