[pomegranate22]

My header image (1000px x 200px) shows up as expected on Firefox and IE on my computer, but on my iPhone, there is a small amount of white space between it and the menu bar.

I have tried various things in the custom CSS under appearance > theme options, but nothing has worked.

My URL is http://www.dontforgetsnacks.com

The help provided on this forum is great! Really appreciated by newbies like me.

[Sakin]

@pomegranate22: I see that you have changed the css and that is why it is showing issue. Please remove the following css from “Appearance => Theme Options => Custom CSS” box.

#page {
	margin: 0 auto 0em;
	max-width: 1000px;
}
#site-logo a {
    display: inline-block;
}

Then add in the following css in “Appearance => Theme Options => Custom CSS” box.

.logo-wrap {
    float: left;
}
#site-logo a {
    display: block;
}

[pomegranate22]

Hi Sakin

Thank you for your help. I have changed the code as you said, however on the phone it still has a small white space underneath the header.

It is only a few millimetres, so it isn’t such a problem if it can’t be fixed, but I don’t know if it could come out looking different again on another device.

[pomegranate22]

Hi Sakin

Just letting you know – I uploaded a few more versions of my header, all with the same dimensions (I was fiddling with colours and file size). I had various results – sometimes it left a white space to the left and sometimes the entire image went very small.

But I tried cropping the entire image (instead of selecting ‘Do not crop’), and now it is presenting exactly as expected 🙂

[Sakin]

@pomegranate22: Thanks it got fixed.

[Author]

Posts