Text Colums with Images - 4 per row

[Carpinus]

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!

[PageFly-Richard]

Hi @Carpinus

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

[Carpinus]

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

[PageFly-Richard]

sorry I am wrong, theme.css

[Carpinus]

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

[PageFly-Richard]

Do you mean it 

[Carpinus]

like this

we use the same section in about us page and somehow everything is displayed with two columns in a row in mobile

About Us – Nectar Flowers Ottawa

[PageFly-Richard]

you can add 

@media(max-width:767px){

.grid__item{width:50% !important}

}

[Carpinus]

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...

[PageFly-Richard · Accepted solution]

you can try 

@media(max-width:767px){

div#shopify-section-template--14436073898068__166377572422301990 .grid__item{width:50% !important}

}

[Carpinus]

thank you so much! it worked!

could you please explain to me what is this number for: 14436073898068

I understood where 166377572422301990 as the template number came from, but i do not know where 14436073898068 came from 🙂

[PageFly-Richard]

It can sectionId or templateId 

[Carpinus]

thank you so so much!

everything worked and it was a great learning experience!

[PageFly-Richard]

You are welcome, I am glad when can help you 😍

[Carpinus]

thank you again!

[blakelyhi]

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!

url: https://afca7f-2.myshopify.com/