Goal: Display four text/image columns per row on desktop and two per row on mobile in a Shopify store, despite limited theme customization.
Approach implemented:
Issue and resolution:
Notes:
Status:
Good day experts!
How can I make may text columns to be 4 in a row and the images smaller? (instead of having 2 in a row)
Birthday Flowers, Zodiac Flower Delivery in Ottawa | Nectar Flowers Ottawa
I would like to be 4 in a row for desktop and two in a row for mobile, but cannot seem to figure out how to do it. There is no customization available through my theme.
Thank you so much!
I’m Richard Nguyen from PageFly- Free Landing Page Builder
-Go to Online Store->Theme->Edit code
-Asset-> base.css paste the below code at the bottom of the file.
@media(min-width:768px){
.grid.grid–uniform.grid–flush-bottom{display:flex !important}
.grid.grid–uniform.grid–flush-bottom .grid__item.medium-up–one-half.text-leftsmall–one-half{width:25% !important}
}
Hope my solution works perfectly for you!
Best Regards;
Richard | PageFly
Thank you so much!
I do not have base.css under assets, so I tried putting it in the theme.css and it worked perfectly!
Is there a way to display two colums in mobile? Before adding a new column, when we had only three, on mobile it was displayed as 2 per row, but somehow now everything is one
sorry I am wrong, theme.css
Thank you so much, I did it and it worked!
Is there any way to display two columns per row on mobile?
Before adding a new column, when we had only three, on mobile it was displayed as 2 per row, but somehow now everything is one
like this
we use the same section in about us page and somehow everything is displayed with two columns in a row in mobile
unfortunately it worked but it messed up seriously all the product pages so we can’t use it.
Is there a way to add a code specifically to this section on this page? Without messing up the rest…
you can try
@media(max-width:767px){
div#shopify-section-template–14436073898068__166377572422301990 .grid__item{width:50% !important}
}
thank you so much! it worked!
could you please explain to me what is this number for: 14436073898068
I understood where166377572422301990 as the template number came from, but i do not know where 14436073898068 came from 
It can sectionId or templateId
thank you so so much!
everything worked and it was a great learning experience!
You are welcome, I am glad when can help you 
thank you again!
Hi, I am trying to achieve this same thing with 4 grid items in a row on my Stiletto theme and 2 in a row on mobile. Have tried the codes you provided with the proper Shopify template ID targeted but nothing is changing. Any advice or can you help? I am only wanting to target the very bottom grid on the homepage (just above the footer). Thank you!
