Lifestyle Pro – Top header showing extra bottom padding

[joy777Participant]

Hi,

Here's my site: http://www.hypothyroidismnaturaltreatments.com

Formerly this site was using the old Lifestyle theme. And now I'm using the Lifestyle Pro.

I was trying to make my header responsive and I tried to follow the instruction here: http://keypresswp.com/full-width-responsive-header-image-lifestyle-pro/

How do I delete the extra green color that's showing on the bottom of my top header banner?

I already tried different heights for the image but still the extra padding is showing up.

If I only use the text there's no extra padding showing. It only shows up when I put in the header image.

I created a new site a few weeks ago but it never showed an extra padding. I was following the same instruction from that same site that I mentioned above.

Here's the site without a bottom padding in the header showing: http://www.gardeninggrandeur.com

Here's my custom CSS:

body {
background-color: #efefe9;
color: #333333;
font-family: 'Droid Sans', sans-serif;
font-size: 16px;
font-weight: 300;
line-height: 1.625;
}

.site-description {
display: none;
}

.site-header {
padding: 0;
}

.title-area {
width: 100%;
}

.site-title a, .site-title a:hover {
background: transparent;
}

.site-title img {
vertical-align: top;
}

h1.site-title {
margin-bottom: 0;
}

.featured-content .entry {
margin-bottom: 32px;
text-align: left;
}

.featuredpost.widget li {
text-align: left;
}

.sidebar .widget {
border: 1px solid #eeeee8;
margin-bottom: 15px; /* margin-bottom: 32px; */
padding: 10px 32px 10px 32px; /* padding: 32px; */
text-align: left;
}

.sidebar h4, .sidebar-alt h4 {
background: #6b961e; /* background: #0088B3; */
color: #FFFFFF;
padding: 2px 5px 1px 8px;
}

/* Lifestyle Pro Green
--------------------------------------------- */
.lifestyle-pro-green .archive-pagination li a:hover,
.lifestyle-pro-green .archive-pagination li.active a,
.lifestyle-pro-green .entry-title a:hover,
.lifestyle-pro-green a {
color: #228dfa; /* color: #84cc78; */
}

.lifestyle-pro-green .archive-pagination li a,
.lifestyle-pro-green .genesis-nav-menu .current-menu-item > a,
.lifestyle-pro-green .genesis-nav-menu .sub-menu a,
.lifestyle-pro-green .nav-primary a {
color: #228dfa; /* color: #a5a5a3; */
}

.lifestyle-pro-green .nav-secondary {
background-color: #83558b; /* background-color: #a2d49a; */
}

Hope someone can help me.

Thanks,
~joy777

http://www.hypothyroidismnaturaltreatments.com

[ChristophParticipant]

Hi,

The difference between the two websites is that hypothyroidismnaturaltreatments.com has a .title-area of
1068x191 while the image has the size 1068x175.

gardeninggrandeur.com has both at 1068x175.

You can fix this by setting the margin around line 982 in the style.css of hypothyroidismnaturaltreatments.com
to margin: 0;

This is what the css looks like right now:

.site-title {
    font-family: "Roboto Slab",sans-serif;
    font-size: 50px;
    line-height: 1;
    margin: 0px 0px 16px;
}

---

https://www.christophherr.com | Genesis Customizations | Buy me a coffee

[joy777Participant]

Hi Christop,

Thank you so much. It works and you save my time...

Blessings,
~joy777

[Author]

Posts