White area appears in header section at iPhone size

CMS & WordPress
1

I’m updating a very old site the client made years ago to be a wordpress one

gaalliance.org.uk/about-gaa/ and the pages linked in that menu
do NOT go to the home page or you see the original site, as I’ve not finished things yet.

I’m using the Customiser’s Additional CSS section to alter a few things, and the client is not going to update or replace the theme - twenty thirteen - for quite some time. (The old site has looked the same for many years, and they tend to leave things looking the same for a long time.)

The Problem

I am happy with the general appearance of the site on my Samsung phone, and two different resolution android tablets. An iPad simulator shows it’s okay as well and BUT when I switch to an iPhone simulator or just resize down my browser, the header area halves in size and a white bar appears below the header text General Aviation Alliance, with the text Partnership in Aviation not visible.

I don’t want the area above the menu to change size from that as shown at browser widths between max-width 643 and 360 (ie just before the iphone media queries kick in) but I just can’t get it right. Any advice on how to keep that area looking the same would be appreciated.

1 Like
3

Solved it, after a long struggle, and then a single search on google. It was the second link returned and the only one I clicked on!

Background-size for the header seems to be controlled in a javascript file, and in the first search result I looked at it said you can force it to whatever size you want by either editing the js core file (bad idea) or adding a bit of css to set the size

So based on the example I found i added

.site-header {
    background-size: 766px auto !important;
}

to the media query for max-width: 359px where iphone size kicks in and it works (it’s setting the width on my background image until it’s height matches the space available.

I missed this because it is not set in the css file for the theme, but in a js file - custom-header.php, in the inc folder.

Repeat every day ten times: google is your friend.

4

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.