Hidden site title hides header image on mobile?

thank you immensely CrouchingBruin

pc/mac/linux
iphone 4
iphone 5
ipad
ipad mini
blackberry z10

all perfection!

iphone 6 plus continues to have the same problem. I have cleared the cache, rebooted, cleared cache a second time, and then loaded the site fresh. I think its a limitation of the iphone 6. It also has the latest updates from apple.
I am also getting a friend to test on a galaxy phone later tonight

I’m indebted to you expertise CrouchingBruin

thank you

I did not want to post again until I tested thoroughly and could offer some useful information, and also am grateful for the comments already given, as my sites look “much” better than they did before the previous comments. However the white space and the header still have some issues.

My Sites – both twentythirteen and both have the same issues
https://www.blindliberal.com
https://www.blindliberalism.com
Child-themes in place

I have tested against practically every device, computer and os and have isolated where I am getting anomalies regarding the white space that appears below the header but above the drop-down menu

Problem one – the white space (between header and drop menu) is infrequent with different devices, and also on computers/laptops – mac/windows/linux – ie/firefox/icedragon.

The problem arises when the twentythirteen layout responds to “ being viewed at a mid-sized point” in a browser window on computers/laptops, BUT the same problem occurs in the “full view” on devices on larger phones or smaller phones in landscape view.

For example when you shrink a floating browser window on a computer or laptop the side bar will snap to the bottom; it’s at that point where the white space will appear on a computer. However for phone devices the portrait view is perfect for the smaller and mid-sized iphone 4, iphone 5 and blackberry z10, yet in landscape view on these samee devices the white space will appear.

Also on an iphone 6 plus due to its size the portrait view and landscape view both show the white space. I don’t think this problem is a “device issue” but a “size response issue” of some kind. However I am not a programmer and someone here with the technical prowess may be able to better articulate the issue and know how to solve it.

ipads and tablets work great.

Problem two – Header gets cropped on left and right sides on mobile devices (want the whole header to scale down if possible)

any further help is highly appreciated

thx

I can launch problem two in a different thread if its in conflict of the first

thanks

Problem 1:
Not sure how this rule is being added, but there appears to be an inline stylesheet with an ID of twentythirteen-header-css, and it has this media query:

@media (max-width: 767px) {
   .site-header {
      background-size: 768px auto;
   }
}

Change the second parameter from auto to 210px so it looks like this instead:

@media (max-width: 767px) {
   .site-header {
      background-size: 768px 210px;
   }
}

Problem 2:
There is an inherent problem with trying to correctly scale an element which uses a background-image for the header instead of an actual image element. Since you’ve already created a child theme, you may want to look at this post to see how to make a truly responsive header image that will scale down smoothly without having to use media queries. In fact, this will also make Problem 1 superfluous.

Thanks to your header post advice link, that solved both my problems perfectly in all browsers and devices.

I cant thank you enough!

One question

Now that I have replaced the header.php file to make my header image repsonsive in my twentythirteen-child folder, will the header.php file be updated property, or will that matter?

While creating a child theme is the suggested method for making changes to a theme, there is always the possibility that you may miss a critical modification to a file which you’ve copied into your child theme when the parent theme gets updated. For example, there was a recent update to the TwentyTwelve theme that included a change to the header.php file. The update caused the mobile menu button not to work for sites which used its own copy of that file in their child theme. The work-around was to change the element in the child theme’s header.php file that displays the mobile menu button from an h3 element to a button element so the updated script which processes the mouse click would work. I’m not sure if there’s an easy way to find out which files were changed in a particular theme version.

Thank you CrouchingBruin

I will be vigilant when twentythirteen updates occur, especially regarding the header.php file