(Lifestyle Pro) Flickering and Padding issue

[rawfoodsgirl]

on skincarebybetty.com and lovebugoils.com

both when you pull up on phone the padding is really big around header.

also when you pull up skincarebybetty.com seems like there is a flicker of the padding on header when pulling up on laptop computer.

appreciate help I am sure it is a simple edit in css file

http://skincarebybetty.com

[askdesign]

There's a 36px padding around the entire container. If you want, you can adjust that:

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

You might also want to change the header image background color to white:

.lifestyle-pro-blue .button, .lifestyle-pro-blue .entry-content .button, .lifestyle-pro-blue .site-footer, .lifestyle-pro-blue .site-header, .lifestyle-pro-blue button, .lifestyle-pro-blue input[type="button"], .lifestyle-pro-blue input[type="reset"], .lifestyle-pro-blue input[type="submit"], .lifestyle-pro-blue.lifestyle-pro-home .content .widget-title {
    background-color: #fff;
}

Hope this helps!

---

Anne S. Katzeff
Designer | Artist | Teacher

[rawfoodsgirl]

I adjusted the 36 px but it will then show a blue bar on each side of the header.

It doesn't fix the issue.

Is there something besides the 36px I should be changing?

I haven't changed the background yet

[askdesign]

Yes, change the background color, too (to white):

.lifestyle-pro-blue .button, .lifestyle-pro-blue .entry-content .button, .lifestyle-pro-blue .site-footer, .lifestyle-pro-blue .site-header, .lifestyle-pro-blue button, .lifestyle-pro-blue input[type="button"], .lifestyle-pro-blue input[type="reset"], .lifestyle-pro-blue input[type="submit"], .lifestyle-pro-blue.lifestyle-pro-home .content .widget-title {
    background-color: #fff;
}

You also might need to resize the header image to fit the wider space.

---

Anne S. Katzeff
Designer | Artist | Teacher

[rawfoodsgirl]

First I tried changing the color but it stayed blue:

FROM:
.site-header {
background-color: #76d2c5;
padding: 0px;
padding: 0rem;
overflow: hidden;
}
TO:
.site-header {
background-color: #ffffff;
padding: 0px;
overflow: hidden;
}
Also tried this information from the site: http://wpsites.net/web-design/remove-padding-from-lifestyle-pro-site-header/

Remove Padding From Site Inner
.site-inner {
clear: both;
padding-top: 0px;
padding-top: 0rem;
}
This will remove the space under your header image.

Tried that and nothing changed.

You suggested: The mobile issue seems to be from a min-height of 417px set for the logo.

I reduced the 417 px and all it did was crop the logo, leaving the big blue background. ???

There was something else I tried – removing the header and coding in the header as a background-image with no repat. That didn't work either. The source code is changing, but something is overriding the .site-header and .site-inner code

[rawfoodsgirl]

Savvy Jackie or anyone any other suggestions?

Please help I hate to give up on this theme looks great on laptop but on phone it looks really bad?

skincarebybetty.com

[Gandt]

rawfoodsgirl:

in the lovebugoils site, the issue is this:

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

and

@media only screen and (max-width: 767px)
.header-image .site-title a {
  background-size: contain !important;

you are defining that 310px height while at the same time asking the image to keep its proportions.

What you need is to set that min-height to:

min-height: 125px;

and a background-size rule as:

background-size:100% auto !important;

Take a look at this screenshot I took after making the changes, assuming I understood you correctly on what the intended final result was:

Hope this helps
G

[Author]

Posts