Remove header padding in Lifestyle Pro Theme

[Daidri S.]

Hi,
RE: Lifestyle Pro Theme Header

I have added my own custom header image on my blog http://theegetawaygal.com which is using the Lifestyle Pro Theme and now need to remove the padding at the top and bottom of the image. I have already tried adding the below code to my Style Sheet just above the Media Queries but with no luck. Have I put the code in the correct place? Is the code written incorrectly? Any other suggestions I can try?

Thanks so much for the help and suggestions!

}

.site-header {
background-color: #76d2c5;
padding: 0px;
padding: 0rem;
overflow: hidden;
}

http://theegetawaygal.com

[eamonmoriarty]

At line 906 0f your style.css you have:

.header-image .site-title a {
    float: left;
    min-height: 400px;
    width: 100%;
}

Try changing to
min-height: 200px;

---

Eamon Moriarty
EM Dzine

[Daidri S.]

Hi Eamon,

Thanks for the suggestion however that doesn't work. It causes a larger border on the top and bottom of the image to stay the same and adds border to the sides which shifts all the content below the header to the right.

Still looking for the fix.

Daidri

[asterbird]

looks like the space on top, left, and right of your header image is coming from line 424 in your style.css. Try tweaking that.

.site-container {
    padding: 0;
}

[mindyjoy]

Hi, I am having the same issue. I've tried many things and cannot seem to reduce the padding on top and bottom of my header when showing on a small screen. My site is http://www.budgetfairytale.com

[asterbird]

Hi @mindyjoy, add the following to the bottom of your stylesheet. Then you can tweak from there, or add in with your other media queries if you want:

@media all and (max-width: 900px) and (min-width: 501px) {

.header-image .site-title a {
    min-height: 140px;
}
.title-area {
    height: 140px;
}

}

@media all and (max-width: 500px) {

.header-image .site-title a {
    min-height: 100px;
}
.title-area {
    height: 100px;
}

}

[mindyjoy]

@asterbird - Worked perfectly, thank you so much! I really appreciate your help.

[Janiceaday]

I had the same problem as the first person. I found this in the layout section of CSS. The padding (last line) was set to 36px. I changed it to 10, and it's perfect. I haven't checked how it looks on devices outside of the computer (phone, tablet).

.site-container {
background-color: #fff;
box-shadow: 0 0 5px #ddd;
margin: 32px auto;
max-width: 1140px;
overflow: hidden;
padding: 10px;

[DTHkelly]

I had this issue for Daily Dish Pro. Support recommended I change the CSS to the following (to remove padding from my custom Header)

.site-header {
    padding: 0;
    text-align: center;
}

The zero value will be applied to the top, right, bottom and left. You do not need to add the 'px'.

[Author]

Posts