Theme looks bad on phone.

[rawfoodsgirl]

Sorry I hate to start another topic but no one is answering the other string I have started.

website: skincarebybetty.com looks good on computer but on phone the header has too much blue padding on top and bottom of skin care by betty graphic. have tried many great ideas from several of you but nothing seems to work so far.

appreciate your help:

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

[Erik D. Slater]

Yep ... not your fault. It's an old classic.

Have a look at this thread ... which should hopefully solve your problem 🙂

---

Erik D. Slater: Digital Platform Consultant • LinkedIn

[Gandt]

rawfoodsgirl:

As of today, there is no blue there. It just looks oddly cropped. What was the last change you made to it?

What I would suggest, and imo, this is the most straightforward way around scaling images for mobile, is don't add the image as content.

Scaling <img>elements included in the html is difficult and unnecessary. Add background images via css using:

background:url(..path to the image goes here...) no-repeat scroll center center transparent;
background-size:auto 100%;

Give it a try and if you still feel stuck, I'll gladly walk you through the steps over skype.

Regards
G

[Author]

Posts