@petebm I see that there is a custom font that is being applied via CSS to the site branding: http://cld.wthms.co/UufjIA . The font will not be applied unless it is available on the viewer’s computer, which means it has to be included via CSS as well. More about this can be found here: https://www.w3schools.com/css/css3_fonts.asp
Presently, there is a background image for the header, which is causing an overlay of text. This should be able to be corrected by removing the header background image in the customizer.
I am not sure how the site looked before, so it’s hard to determine what needs to be “fixed”.
Thread Starter
petebm
(@petebm)
@jessepearson – thanks for the suggestions; I hoped the lack of font would be the answer, as I’ve recently reset W10 & so lost that particular one. However, the header looked the same on another computer that did have the font, and still the same after I installed it on this one.
I’m afraid you must have misunderstood my initial post, with the regard to the background image – the smaller of the two images at https://imgur.com/a/IdFUUZY shows what the header looked like before it all went horribly wrong, with the background image fitting perfectly, the site title on two lines, etc. Losing the font I can live with, especially if as you point out anyone without that font installed won’t see it anyway, but the layout seems to have changed for no reason.
Any more suggestions welcomed!
Thanks
Thread Starter
petebm
(@petebm)
Just as a follow-up – as you can see, the header image I’m using does not seem to fit any more; I wondered if Storefront had changed its size requirement, but no, it’s still 1950 x 500.
I tried re-importing the relevant image file, which comes up as 1950 x 500 in the media library, and has the crop lines precisely around the edges during import . . . and if anything it fits even more badly, with more of the image being cut off when the page is previewed!
Something is having a very funny effect on the header & I’m at a loss to see what; I haven’t made any design changes to the site or added plugins for weeks, probably months, just carried out updates.
@petebm I see you have removed the image from your site, would you be able to either put it back, or create a staging copy with WP Staging, then add the image there and provide the link? I think the container with the background image may have changed size causing it to stretch the image differently. CSS may be able to correct it for you.
Thread Starter
petebm
(@petebm)
Sorry @jessepearson, I was experimenting with re-activating Storefront rather than my child theme; I tried re-applying the header image in Storefront and again it was cropped on the site when it wasn’t as I applied it, so I didn’t save the change – then had to rush out & forgot to switch back to the child theme. Still, it showed that the image problem has not been caused by the (v few) tweaks in my child theme – and again, I haven’t made any changes to that for months.
Anyway, the child theme is back, along with the cropped header. Any idea what might have caused the container to change size?
Thanks
-
This reply was modified 8 years ago by
petebm.
Thread Starter
petebm
(@petebm)
Back again!
@jessepearson, your mention of creating a staging site reminded me that I did just that some time ago, before carrying out a major version update to a plugin (Utlimate Member) that had been causing some other users problems (nothing like this, though). So, I checked that site, https://test.therileyrmcentre.co.uk/, and as you can see, it looks fine.
I’ll look through the various updates that have been done since then (there haven’t been any other changes) to see if I can track down where it all went horribly wrong, but in the meantime if you have any more ideas, I’d still be very glad to hear them.
As for the site title font, I’ll check what it looks like on a computer without that font, & if necessary incorporate it as part of the header image itself.
Thanks for your help – it’s much appreciated
Pete
Thread Starter
petebm
(@petebm)
Hi again @jessepearson
Next – I’ve pinned the problem down to the latest Storefront update; https://test.therileyrmcentre.co.uk shows the site before the update, https://therileyrmcentre.co.uk shows it after. I must misunderstand how child themes work; I have made a very few changes via style.css & functions.php, none of which (I think) should affect the header, and the rest are all confined to a Woocommerce folder within my child theme. All other changes I’ve made to the header etc have been via the customiser, & I assumed changes made there would carry on through theme updates – yet if I re-activate Storefront rather than my child theme, my header image disappears completely.
Does this help show where the problem lies? Obviously I could just choose not to update Storefront, but I don’t like that as a solution.
-
This reply was modified 8 years ago by petebm.
Thread Starter
petebm
(@petebm)
Hi again
Any ideas on this, please? I can get around the issue by just not updating Storefront, but that’s not a course of action I’m happy with. Can anyone suggest what in the latest Storefront update might be causing a problem with my header?
Thanks
Pete
@petebm Try adding this css:
@media (min-width: 768px) {
.site-branding {
width: 230px;
}
}
This should make the header appear as it does in your test site.
The containers in the header may have changed to accommodate other items to be added. Storefront has additional plugins that add more content to the header, or allow the header to be rearranged.
Just a side note on how you have your layout done, it typically is not best practice to try to layout text over background images as you are doing. The reason for this is that users may have differing configurations, such as larger fonts, and the layout may not turn out well on their machines.
Thread Starter
petebm
(@petebm)
Thank you, @jessepearson, but I’m afraid that css has not affected the header.
Something else that may help – if you compare the headers from the two sites at https://imgur.com/a/fAbuiDH, you can see that the in the updated Storefront version the header – as shown by the background colour – the header seems much narrower (top to bottom). Yet the header image suggestion is still 1950 x 500 (& when I upload mine the crop lines fit around it perfectly), and I can’t imagine that would change otherwise everyone’s header images would be affected.
I take your point about overlaying text, and once this is sorted (fingers crossed!) I will incorporate the text as part of the image.
Thanks again for you assistance
It appears that the background image and the site title have been removed from the live site, which is causing the current layout. This is what I see on the test site: http://cld.wthms.co/olAue2
In reference to including the text in the image, this is also bad practice, as search engines are not able to view and index text in images.
Thread Starter
petebm
(@petebm)
Sorry, @jessepearson, I was trying to be helpful! I took the header image off to try to show clearly that the header area – as presumably shown by the background colour – is not as tall after the theme update. I’ve now put the 1950 x 500 header back (as well as the title text) and it is if anything even more cropped than before. This seems to be at the root of it – the header area is a different size now.
Further point about the site title also noted – I’ve got a lot to learn . . .
Thread Starter
petebm
(@petebm)
As another pointer, my header image looks like this: https://imgur.com/a/ANY4thm.
As I said, its size is 1950 x 500, and when I import it, it doesn’t seem to need cropping, as shown in the lower of the two images there, yet when set as the header image, it obviously does get cropped, even in the test site.
@petebm You stated the CSS provided did not affect the header, can you let me know which site it was applied to so I can see if other changes can be made to affect the change?
Thread Starter
petebm
(@petebm)
