Woodpig

Hi Steve,

The tracking/analytics I refer to is the service that forms part of WordPress itself, not Google analytics or anything else. So I was asking what data WordPress collects via that core service.

Thanks,

Gareth.

That’s great – thank you so much for your prompt reply!

Now that I’ve added the code to the main CSS editor, I can see how it looks. Basically, I just want to reduce the text size slightly (on desktop and mobile versions). So, I have

   .simple-banner .simple-banner-text {
       font-size: 0.8em;
       padding: 10px !important;
       line-height: 15px;
   }

That works fine for desktop, but I still need to alter it so that the banner text all appears on one line for mobile. But I can’t see where to add ‘@media (max-width: 600px)’ – when I do it, it makes the whole code only work for mobile.

(sorry, I’m not very technical!).

Thanks again,

Gareth.

• This reply was modified 8 years ago by Woodpig.

Brilliant! That worked perfectly. Thank you so much!

I’m still not sure why it happened though – seemed to be working perfectly a few days ago.d

Thanks, Sacredpath. It turns out that the problem is to do with using CSS greyscale filters. If I replace this with an opacity change (for the mouseover effect), then the crashing/glitching problem seems to go away.

This seems to be a problem with Safari, and will hopefully be fixed soon – my site was working fine until the last update, I think.

Thanks again.

G.

OK, I think I’ve discovered the answer.

If you want a centred square image narrower than the recommended header, and that displays for retina, then simply upload an image 500 x 500. Then, customise the CSS (appearance – header – additional CSS), and paste in the following:

img.header-image{
	max-width: 250px;
}

And Bob’s your uncle. Probably.

• This reply was modified 8 years, 9 months ago by Woodpig.
• This reply was modified 8 years, 9 months ago by Woodpig.

OK, I think I’ve worked out part of the problem. My header is set to 1100 x 250. If I upload a header exactly twice that (2200 x 500), then it displays fine. However, my current header image does not fit those exact dimensions – it’s actually just 500 x 500, which centres in the header (which is how I want it, because when it’s displayed in portrait – on a phone or tablet – then the header image fits on the screen nicely).

So, is there a workaround that would allow me to keep the 500 x 500 image without it going blurry on retina displays?

Thank you.