A Shopify store owner is struggling with the mobile layout of their custom content section. On desktop, they have an alternating text-image pattern (text left/image right, then image left/text right). However, on mobile, this creates an undesirable sequence where images and text blocks group together instead of alternating.
Desired mobile layout:
Current problem: Images and text blocks appear consecutively rather than alternating.
A community member provided CSS code using media queries and grid-template-columns to create a two-column zigzag layout on mobile. While this improved the situation, the original poster finds the columns too narrow and wants a single-column layout that maintains the alternating text/image order.
The user found a potentially relevant script in another thread but needs help adapting it to their theme’s class names. They’ve expressed willingness to pay for a working solution. The discussion remains open as the proposed CSS solution doesn’t fully meet their requirements.
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
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
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
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-for-my-image/m-p/2464303 Could you help me to correct the script?
Have you tried to adđ my code in your store yet ?
It will help create the zigzag layout that you want to have correctly
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.
