change the order for custom content section on mobile view

[tbold]

https://1dmyad-vt.myshopify.com

I use custom content section on home. First text left — picture right and after that vice verse picture left — text right and so on. But on mobile view this sort does not work because here I have:

text

picture

picture

text

text

…

instead of:

text

picture

text

picture

How can I set the column break on mobile different? Would be very happy to get help. Thanky you!

best,

Till

[DaisyVo]

Hi @tbold 

To complete your requests, please follow these steps:

Go to Shopify Admin > Online Store > Theme > Customize > Theme Settings > Custom CSS https://prnt.sc/i8ljAMlHJUKl
Paste the code provided into the Custom CSS section.

@media screen and (max-width: 768px){
.brick__section.brick--2 {
    grid-template-columns: 1fr 1fr !important;
}
}

Here is the result: 

I hope this helps

Best,

Daisy

[Tillbold]

Hi Daisy, thank you so much. This solution is better than it is now but what would be perfect is to prevent that in mobile view

picture
picture 

Text

Text

Could you deliver a script that sort the section in mobile view this way?:

Text
Picture
Text

Picture

Thank you, Till

[DaisyVo]

@Tillbold 

Have you tried to adđ my code in your store yet ?

It will help create the zigzag layout that you want to have correctly

[tbold]

Yes, I have tried it, but the columns are too narrow. I would like the grid to wrap so that there are not two image blocks or two text blocks. it should always wrap nicely text / image / text / image. I would also pay something for this. The code I found has to be adapted to men theme.

[Tillbold]

I have found this script – but the naming fits not to my theme: https://community.shopify.com/c/shopify-design/how-can-i-maintain-desktop-view-alignment-on-mobile-f... Could you help me to correct the script?