Text Column With Image Debut Mobile View Issue

[usnpups]

I have the desktop view (photo 1) the way I want it (medium-up--one-quarter) but the mobile view (photo 2) is only showing one column and I would like for it to show two.  Not sure how to accomplish this.  Thank you in advance for any guidance.

[Jasoliya · Accepted solution]

Hi @usnpups 

Follow this:

Section->feature-columns.liquid->find bellow line and add small--one-half

<div class="grid__item {{ column_width }} text-{{ section.settings.align_text }}" {{ block.shopify_attributes }}>

So it look like:

<div class="grid__item {{ column_width }} text-{{ section.settings.align_text }} small--one-half" {{ block.shopify_attributes }}>

[usnpups]

Thank you so much!!!  Worked perfectly!

[henz123]

Hi Jasoliya

How do i do this for three icons on the same line for mobile?

Thanks!

---

@Jasoliya wrote:

Hi @usnpups 

Follow this:

Section->feature-columns.liquid->find bellow line and add small--one-half

<div class="grid__item {{ column_width }} text-{{ section.settings.align_text }}" {{ block.shopify_attributes }}>

So it look like:

<div class="grid__item {{ column_width }} text-{{ section.settings.align_text }} small--one-half" {{ block.shopify_attributes }}>

---

[Jasoliya]

Send me your store url. 

[henz123]

www.jadons.co.uk



I only would like to make these changes to the first set of text columns (delivery, support etc)



Thank you :)

[Jasoliya]

Add this css in asset->theme.scss file at bottom:

#shopify-section-1581344988774 .grid__item {width:33.33% !important;}

[henz123]

Perfect! Thanks so much

[TEAMHW]

Hi,

I would like to do the same. I have three columns on my web site and when I go on mobile I have 1 image with the other one next a the bottom. I would like at least 2 columns on mobile pretty the same as collections.

When I use your code small--one-half  and put it at the good place, nothing happen on my mobile.

Can you help ?

thanks

[Jasoliya]

Send your store url