Columns on new rows on mobile devices

Hi @gromitswe,

This seems like there is some glitch in the Gutenberg column block. Please use this code for a while to fix your issue. We are also looking into this and would release the fix if this is only happening with Astra.

Here is the code for the fix:-

@media all and (max-width: 500px) {
.wp-block-columns {

flex-direction: column;}
}

Experiencing same issue here as of today. (And I am using Astra on three different web sites.)

Until I updated the Astra theme (this afternoon), columns were working and displaying fine. On a monitor, they ran horizontally (as columns are supposed to) and on a mobile device, they ran vertically.

Once I made the mistake of editing something in one of my existing, working columns (after updating my theme), suddenly all columns were broken. Now they display vertically on all devices.

Are you positive this is not an issue with the new Astra update? I love, love, love your theme, but this issue seems to coincide with today’s update.

Thanks.

P.S. I can’t figure out the code “fix” posted above. Is that supposed to go into CSS? Is it complete and correct? It appears to be missing something…

• This reply was modified 6 years, 2 months ago by azwp.

In case this helps anyone else, here’s what got my columns displaying properly again (tested on pc and mobile):

/* FIX COLUMNS */
@media (max-width: 764px) {
.wp-block-columns.has-4-columns {
display: block;
}
}

.wp-block-columns {
display: flex;
}

.wp-block-column {
flex: 1;
}

__________________

(Obviously: customize as needed.) Add that to your “Additional CSS” inside the customizer.

~V

• This reply was modified 6 years, 2 months ago by azwp.

Hi @azwp & @gromitswe,

We have fixed the issue in our theme yesterday itself and released the update. Please remove the custom code and update the theme to see the changes.

What version is fixed? I have 1.6.4 installed and that’s what started the issue for me. Columns were working fine before that.

Thanks.

Just double-checked and my columns no longer work without the custom code.

Again, I have version 1.6.4 of Astra installed and did not notice this issue until after having updated to it.

Please advise on the number of the current update so we know we’re talking about the same version.

Thanks.

Hi

I installed the update that was released yesterday and my problem is now solved without any custom CSS. I didn’t have time to enter the custom CSS but now everything is working. My version is Astra 1.6.4.

Thanks for your update!

• This reply was modified 6 years, 2 months ago by gromitswe.

Hi @azwp,

It’s really strange that you aren’t able to fix your issue even after updating the theme. If the issue still persist then please open up a ticket in our support center we would surely debug that issue. But make sure you have removed your custom code.

Hi @gromitswe ,

Glad that the latest version has fixed the issue.