Homepage on mobile starts with grid then moves

[nicoleorriens]

Hi,

my homepage layout at my blog huisvlijt.com on desktop is grid mode. But when I go to my site on mobile,  when I get there at first it shows my posts in a grid layout and then it changes to a normal layout: the newest blogpost at the top, followed by the other blogposts beneath it.

On mobile I want the blogposts to show as a list immediately, so not first in grid mode.

Does anyone know what could cause my site to first show my blogposts in grid mode and after a few seconds turns them into a list and how to fix this?

I’ve already tried clearing the cache. That didn’t help.

Nicole Orriëns

[nicoleorriens]

P.S.

Here’s some more information about layout shift elements:

A late network request adjusted the page layout…smartmenus/jquery.smartmenus.min.js?ver=6.5.1(www.huisvlijt.com)

A late network request adjusted the page layout/e-202428.js(stats.wp.com)

A late network request adjusted the page layout…tardisrocinante/cash.js?cb=4(www.huisvlijt.com)

A late network request adjusted the page layout…js/frontend.min.js?ver=1719035027(www.huisvlijt.com)

A late network request adjusted the page layout…js/weaverxjslib-end.min.js?ver=6.5.1(www.huisvlijt.com)

A late network request adjusted the page layout…js/weaverxjslib.min.js?ver=6.5.1(www.huisvlijt.com)

A late network request adjusted the page layout…jquery/jquery.min.js?ver=3.7.1(www.huisvlijt.com)

[scrambler]

We need a link to the page, and what you mean by grid mode / what option you used to set it up

[User]

@Scrambler,  I think the issue is that the Desktop site has 4x columns, so that when the site is loaded on a phone in portrait view, it momentarily show x2 columns before loading the final desired 1x column.

I believe @nicoleorriens wants phones to immediately load the 1x column final version – and skip the display of the intermediate generating steps.

However, if the phone is in landscape view when the site is opened, the display loads directly to the 2x columns as designed.

 

@Nicoleorriens, FYI, I have tested this loading on a few phone browsers and all work the same, except for Firefox, where there is a large white space below the ≡ hamburger and above and below the header.   This is true in both Portrait and Landscape views.

The other browsers have no such issues.

See screen capture  below of Firefox in Portrait view.

@Nicoleorriens   Just curious.  In my sites, only 15% of visitors use on desktops.  Is that the same with your site?

Regards!

 

[scrambler]

Try adding the rule below to the theme Global CUstom CSS Rule box

@media and (max-width:568px) {
.content-2-col, .content-3-col {
width: 100%;
padding-right: 2%;
padding-left: 2%
}}

It may be faster to change the layout on phone than the one using the is-phone class

If it makes no difference, leave the rule in and post back so we can make sure the rule is working

[User]

@Nicoleorriens

As the screen capture below, it looks like there may by some conflicts on the site, as the responsive design does not seem to be working consistently.  Some is large – some small.

May I suggest you install the WP Plugin: Health Check & Troubleshooting : https://wordpress.org/plugins/health-check/

That will allow you to test the site and all the plugins and theme for conflicts without interfering with the operation of the live site. You will also need to install a vanilla theme, e.g. Twenty Twelve (for testing purposes only).

Regards!

[nicoleorriens]

Thank you, that seems to have done the trick!

[nicoleorriens]

Thank you for pointing this out! I’m going to look into this.

[User]

@Nicoleorriens

Looks good!  Looks like you’ve fixed it all.

Regards!

 

[nicoleorriens]

Hi,

unfortunately the problem of the grid mode showing and then jumping to one column on mobile is back. Even though I pasted this in the Global CUstom CSS Rule box:

@media and (max-width:568px) {
.content-2-col, .content-3-col {
width: 100%;
padding-right: 2%;
padding-left: 2%
}}

I indeed want phones to immediately load the 1x column final version – and skip the display of the intermediate generating steps.

I’m having the same problem with all my blogs: huisvlijt.com, renmamaren.com, bloggenenloggen.nl en hetmoederfront.com.

How can I fix this?

kind regards,

Nicole

[scrambler]

Change the rule to

@media screen and (max-width:568px) {
.content-2-col, .content-3-col {
width: 100% !important;
padding-right: 2% !important;
padding-left: 2% !important;
}}

As usual if it does not work, please leave the rule in place and post back, so we can inspect the page and see what is going on

[nicoleorriens]

Okay, thank you! Hopefull that will help.

[Author]

Posts