How to create a 3 column section for mobile view on a Debut theme?

[CW5]

For our store (third party Debut theme), we would like to add a section with 3 columns containing icon+text which should be visible on mobile (and desktop) as 3 columns rather than stacked view. See example in the screenshot below from a random website. 

How can this be done? Thanks in advance for all your help.

Cheers! 

[Jasoliya · Accepted solution]

Hi @CW5 

Follow this

Change image to small icon image and add this css in Asset->theme.scss file at bottom

@media only screen and (max-width: 767px) {
     .index-section .grid--flush-bottom {display: flex;}
}

Best regard 

[KetanKumar · Accepted solution]

@CW5 

if look ok can you try this code

1. Go to Online Store->Theme->Edit code
2. Asset->/theme.scss.liquid->paste below code at the bottom of the file.

#shopify-section-14f2aecf-dd59-47a7-beaa-e619a397462e .grid__item {
    flex: 1;
}

[CW5]

Does no response to my query mean there is no solution or is it because it’s difficult to explain here. Please let me know. Thank you. 

[CW5]

cc:

@Jasoliya

@KetanKumar 

@Myatphyothu

@Myatphyothu 

I tried a few solutions by the above experts given in previous posts but those did not work. Hence, I am copying them on this post in case they can suggest other solutions, Thanks in advance for your help.

[Jasoliya]

Hi @CW5 

send me your store url. so we can check

Or may be you can check theme editor, where you have already same kind of section? 

[Jasoliya · Accepted solution]

Hi @CW5 

Follow this

Change image to small icon image and add this css in Asset->theme.scss file at bottom

@media only screen and (max-width: 767px) {
     .index-section .grid--flush-bottom {display: flex;}
}

Best regard 

[CW5]

Thanks very much @Jasoliya . Yea it worked. Appreciate your help. 👍

[CW5]

@Jasoliya @KetanKumar 

I had implemented @Jasoliya 's solution and it worked fine when I used icons in the section. I added another copy of the same section, this time with photos, and the columns are showing of unequal width. The first column is the widest and the second and third get progressively narrower. The photos get smaller in the second and third columns too. Looks odd. I am attaching the desktop and mobile view of this section.

Please note all the 3 pix are of the same size: 360x270 px

What do i need to do to fix this problem?  

[KetanKumar]

@CW5 

oh sorry for that issue can you please send store url so i will check and let you know 

[KetanKumar]

@CW5 

yes, please confirm this look

[KetanKumar · Accepted solution]

@CW5 

if look ok can you try this code

1. Go to Online Store->Theme->Edit code
2. Asset->/theme.scss.liquid->paste below code at the bottom of the file.

#shopify-section-14f2aecf-dd59-47a7-beaa-e619a397462e .grid__item {
    flex: 1;
}

[CW5 · Accepted solution]

Thanks @KetanKumar . We tried this on the backup theme and it worked. Will load it on the live theme later. 

Many thanks for your help.

[KetanKumar]

@CW5 

its my pleasure to help us 

[KetanKumar]

@CW5 

oh sorry for that issue can you please share store url so i will check and let you now