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 a…

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

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.

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.

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?

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

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

@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 progressivel…

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

@CW5 yes, please confirm this look [KetanKumar_0-1682489026399.png]

@CW5 if look ok can you try this code Go to Online Store->Theme->Edit code Asset->/theme.scss.liquid->paste below code at the bottom of the file. #shopify-section-14f2aecf-dd59-47a7-beaa-e619a397462e .grid__item { flex: 1; }

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

Store Design

CW5 April 26, 2023, 7:44am 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.

Topic		Replies	Views
Debut theme - is it possible to adjust the mobile feed to have three/two image across? Store Design	4	43	October 4, 2021
Dawn theme 2.0 - Multicolmn 3 in a row for mobile view Store Design design , customizations , css , shopify-themes	3	256	December 8, 2022
Section index-column displaying 2 column on mobile \| Broadcast theme Store Design	2	35	July 29, 2021
How can I display three columns on one mobile screen? Store Design design , customizations , collection-page , css	4	72	June 15, 2023
How can I adjust mobile view to display multiple columns? Store Design	9	94	August 17, 2021

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

Related topics