Help with grid element

[Kobber]

Hi,

I have 18 SVG images that I want to show on my website. From 1200px and up I want 3 images side by side, for 1199px and down I want 2 side by side, and for 767px I want just 1.

However… as you can see in my attached file, some has a white bg and some has a colored bg. It works fine if with 3 side by side, but with 2 side by side it will put the ones with white bg under each other, and those with colored bg under each other, and that doesn’t look good in my opinion. I want white, color, white, color… etc.

Is that possible with the grid element or maybe with columns somehow. I can’t figure it out?

[tristup]

Hi Kobber,

Thanks for reaching out.
I would suggest you create two different Grid one with 3 Column as shown in the screenshot and only visible with the specific breakpoint, and another one with the 2 Column as you are expecting which is only visible in the specific breakpoint.
You can use the Hide During Breakpoints option under the Customize tab to make that ** Grid** visible and hidden in specific breakpoints. Please find the screenshot describing the options.

Hope it helps.
Thanks

[Kobber]

Thanks @tristup - but how about SEO? Won’t the hidden items still be visible in the code and generate duplicate stuff?

[tristup]

Hi Kobber,

Yes, that is correct. But there is no other way to acheive what you are trying.

Thanks