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

Store Design
1

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!

2

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.

3

cc:

@Jasoliya

@KetanKumar

[email removed]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.

4

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?

5

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

6

@CW5

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

7

Thanks very much @Jasoliya . Yea it worked. Appreciate your help. :+1:

8

@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?

9

@CW5

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

10

@CW5

yes, please confirm this look

KetanKumar_0-1682489026399.png
KetanKumar_0-1682489026399.png375×667 55 KB

11

@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;
}
12

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.

13

@CW5

its my pleasure to help us