Hi @vytaulla51, could you please share screenshots of what you’re describing? I couldn’t fully understand it.
You can use media queries to control how the grid behaves at different screen widths, but I would need more details to understand what exactly you need.
Hi:
Thanks for replying!
See https://www.rdbike.com/news/
I selected the grid option for the post block. I could choose many columns if I wanted to – I’d like to choose four but opted for three because, as they page narrows for smaller screens and tablets the columns narrow too, ultimately switching to one column at around 600px, but right before the switch the three columns are too narrow, breaking up words, etc.
What I would like is for the columns to reduce from on wide screen, to two at around 900 pixels, to one at 600 px. That option is not available in the post block. It doesn’t give me the option to switch to one column at, say 800 px instead of 600 px either, which would be “better” than the current setting.
Make sense?
Mistake above – should read:
“What I would like is for the columns to reduce from three or four on wide screen, to two at around 900 pixels, to one at 600 px.”
Hi @vytaulla51,
I see your point. I understand you would like to change the number of columns showing depending on the screen size.
It gets too narrow and breaking up words here:
Full Size: https://d.pr/i/oKP8Qk
I’m checking some options and I’ll get back to you.
Hi @vytaulla51. You can add the following custom css code to your site, and this will make all 3 column post grid blocks break to 2 columns between 600 and 900px viewports.
@media(max-width:900px) and (min-width:600px) {
.is-layout-grid.columns-3 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
Hi:
Thanks but it didn’t do anything – ?
@vytaulla51 Can you confirm that you’ve added this to the ‘Additional CSS’ section under Appearance > Editor > Styles? Please also try to modify the css like this and let me know if it still doesn’t work.
@media(max-width:900px) and (min-width:600px) {
.is-layout-grid.columns-3 {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
}
It’s working!
It looks good.
I had to place it in the right place in the stylesheet as I had other media queries already in it. Found the place, cleared caches – doing just what I wanted.
Thank you very much!
