Header Spacing Mobile – Min-height

[marketme]

Hello,

Looking for a bit of spacing assistance. I am using the Pretty Creative theme and swapped out the smaller logo for a larger full width logo. Looks fine on the desktop and tablet views but the mobile view has a large gap and I know it has to do with the min-height set to 175px. However if I don't set the min-height to 175px it doesn't show correctly in the full desktop version. The site is http://buyavalonandstoneharbor.com/

Any advice or suggestions??

I have the following code:

.header-image .site-title a {
margin: 0 auto;
min-height: 175px;
width: 100%;
}
.header-image .site-title > a {
background-size: contain !important;
display: block;
height: 100px;
margin: 10px auto;
text-indent: -9999px;
max-width: 1200px;
}

http://buyavalonandstoneharbor.com/

[darrenbrettking]

You could try accessing the relevant style in your media queries and adding some negative margin-bottom. Generally, if you're making changes to the main style, you often need to make an edit in the media queries as well, since one is dependent on the other.

[marketme]

Thanks Darren! That seems to do the trick 🙂

Dana

[Author]

Posts