Blog looks different incognito

[nicoleorriens]

Hi,

my blog bloggenenloggen.nl looks fine when I’m logged into my WordPress dashboard:

• Grid mode
• Header looks good

• 

But when I look at my blog in an incognito window the header is blurry and there’s no grid.

I’m using subtheme Ahead.

How can I fix these 2 problems:

The blurry header

The fact the homepage is not showing in grid mode

kind regards,
Nicole

[User]

@nicoleorriens

I can only access on my phone at the moment, but it seems the blurry images are a settings issues related to your feautured images, which are being delivered too small for the screen size they need to fill.

I have no experience with subthemes, but reading about them, and those that sopport WOO, it seems they have very little ability to customize…….

Regards!

[nicoleorriens]

Thank you. The featured images are fine I thought. It’s the image in the header that’s blurry when I go incognito. It looks fine when I visit my blog while logged in. What could cause this difference you think? And how do I fix it?

regards,

NIcole

[scrambler]

The image

bloggen-en-loggen-header.jpg (2343×422) (bloggenenloggen.nl)

is 2343px wide, but the version loaded by the URL below

https://www.bloggenenloggen.nl/wp-content/uploads/2024/07/bloggen-en-loggen-header.jpg?ezimgfmt=rs%3Adevice%2Frscb25-1

and it is only 1024pixel wide.

Wordpress uses srcset to load various resolutions of an image depending on the size it occupies.

So something wrongt may be happening with that.

Once thing I would try is to delete the image from the Image library, and reload the full size version, in hopes it will generates proper sub resolutions.

@weaver may know more about srcset configuration in WP if that is the issue.

 

[scrambler]

For the grid, The page has HTML for 2 columns, but I don’t see the CSS for it. So you may have a problem with the theme CSS loading improperly.

I see a lot of error in the browser developer tools console, not sur if any can explain what is going on @weaver might know more.

First thing to check is if you have a plugin that optimizes js and CSS. If you do, deactivate that and see if it solves the issue. the theme js and CSS are already optimized, and reoptimizing often breaks the theme.

Another thing I would try, is deactivate ALL non weaver plugins, and see if the issue disappears, if it does, reactivate plugins one by one.

[User]

I think there is more to it than just the header image.

On my phone, all images are very low res. quality and not what they should be.

But on the desktop, they (featured images) are fine.

Also, on the desktop, I also am missing the 2x columns in the content are and have 1x as shown in the third image.

However, on the phone, the screen temporarily shows 2x colmns, which means the code is there and working, but is overwritten by later code in the desktop, to show only 1x.

@nicoleorriens

Can you please test for conflicts between XTREME and your subtheme and plugins and try turning them all off and see if that resolves the image resolution problem and the loss of the grid?

Regards.

[nicoleorriens]

I was using Leap from Ezoic and disabled that. I think that has fixed the blurry header image and the problem of grid not showing.

Is the problem you mention gone now too?

‘On my phone, all images are very low res. quality and not what they should be.

But on the desktop, they (featured images) are fine.

Also, on the desktop, I also am missing the 2x columns in the content are and have 1x as shown in the third image.

However, on the phone, the screen temporarily shows 2x colmns, which means the code is there and working, but is overwritten by later code in the desktop, to show only 1x.’

regards,

Nicole

 

 

[User]

@nicoleorriens

YES, except for  the header image — all is working 100% now.

The featured images are clean and sharp and there are 2x columns on the front page.

The is true for both my desktop and my phone.

However, your round header image is still soft and is not correct when compared with the lower post featured images.

The same is on the desktop and phone, so there must be something wrong in the header image…. or quality…

So, on image quality, looking at your header image (1536×277), the font looks fine, but the 263 dia. round image does not look good.

The round image looks like it is up-sized from a smaller original to fit, rather than down-sized to fit.  So it is fuzzy and soft.

I suggest you remake the bloggen-en-loggen-header-1536x277.jpg and see if you can insert a sharper 263 dia. round image.

Regards!

[nicoleorriens]

Thank you very much for confirming it looks better! I’ve created a new bigger header image but then it looks too big. How do I make it smaller? I would like to insert head this image to the left side of the header, and then have the blog title next to it. Here’s an image of my (new) problem:

 

[User]

@nicoleorriens

Let’s keep it simple 🙂

Your previous header image worked – only the round image is low resolution image and so does not work well.

I suggest you remake bloggen-en-loggen-header-1536x277.jpg as you did the first time, only this time, use your new sharp round image.

Then all will work correctly — and you will need to do nothing more than replace the old bloggen-en-loggen-header-1536x277.jpg image.

Regards!

 

 

 

[nicoleorriens]

Thank you, but how do I do this? The first time I just uploaded an image with the round image ánd the blog title, but that didn’t work out. Should I create a new image in Canva with sixe 1536*277 and upload it?

I would rather just upload the round image, make it smaller and insert it to the left of the header.

regards

Nicole

[User]

@nicoleorriens

Okay…  the bad news is,  that that does not work.

The round image quality I get with a new 1536×277 file is exactly same as you have.

It looks like you need to make the round image a larger size to get the quality you need.

Regards.

 

[nicoleorriens]

Thanks I did that and used the sizes 1536*277 but it’s still blurry.

[scrambler]

If the text can be done with the site title and tagline, and with and image on the side, that will be the best method.

To do that you need to define and not hide the site title and tagline for the text and set positions.

For the image, In the customizer, select the round image as the Site Logo image in site identity, then in Header > Header layout > Site Logo, make sure it is not hidden, and give it a size.

Adjust the site title and tagline position with the Theme setting for these, and then post back with any layout tweaks you need

 

[Author]

Posts