[Resolved] Odd responsive issue

[Matthew]

Hi

Really odd issue on a tablet screen. I have 6 columns on the page, on a mobile device they go 2 a row. On a tablet they do for the first 2 and last 2 but really strangely the middle 2 don’t (but only on tablet screens).

Please see the screenshot here – https://prnt.sc/m5j2o1

Any ideas why this would be? I thought maybe I had given someone of them a class and not others but that isn’t the case.

[Leo]

Hi there,

Have you tried removing the CSS you’ve added?

I used browser inspect to remove this one and looks like the problem was solved:

@media (min-width: 600px) {
    .wp-block-column:not(:last-child) {
        margin-right: 32px;
    }
}

[Matthew]

Hey Leo,

This has some unwanted side effects:
– Makes all the icons smaller on desktop
– On tablet sized view they are not all the same size, they are two a row but the last row the last icon seems to be a different size.

It is really strange this issue as it doesn’t happen if I resize the window in WordPress customise only on the actual live site.

Regarding remove the CSS the only part of the CSS I have that really effects this area is:

@media (max-width: 768px) {
    .homeicons .wp-block-column {
        -ms-flex-preferred-size: 50%;
        flex-basis: 40%;
			margin-left: 5px;
			margin-bottom: 15px;
    }
}

And I can’t remove this as this is what causes them to go on two a row on mobile/tablet instead of one per row.

If ever row is the same size how can the middle row possibly not have two icons the same on it?

[Leo]

Can you disable all caching plugins including Autopimize so I can see the source of the code?

If it’s a Gutenberg columns issue then you might have to report to WordPress.

[Matthew]

Hey Leo

Of course, I have disabled Autoptimize so you can look 🙂

Cheers.

[Leo]

Hmm looks like it’s working?

I no longer see the issues using browser resizing.

It’s 6 columns on desktop and drop 2 columns at 768px.

[Matthew]

You are right didn’t even think about the fact it could be an Autoptimize issue.

Is this an issue with Autoptimize and Gutenberg then or a GP / Autoptimize compatibility issue?

[Leo]

It’s Gutenberg columns so GP doesn’t have any control over it currently.

Can you make sure you are using the suggested settings here?
https://generatepress.com/fastest-wordpress-theme/

If so, the problem comes back as soon as you turn it back on?

[Matthew]

Hey

Ah ok yeah I am using those settings. I have figured out which setting it is anyway its “Also aggregate inline CSS”.

No worries thanks for your help will leave this off for now and hopefully a fix will come out for this in the future from either Gutenberg or Autoptimize.

[Leo]

So everything works if you check “Also aggregate inline CSS”?

Don’t think there will be a fix for that then.

Glad I could help!

[Author]

Posts