How can I adjust multicolumn design for mobile view only?

Store Design
, , , , , , ,
1

Good morning,

I would like the multicolumn to appear smaller on the phone only.
How to move on from that?

JADIS_0-1696323567981.png
JADIS_0-1696323567981.png532×798 308 KB

to that ?

JADIS_1-1696323583163.png
JADIS_1-1696323583163.png571×791 150 KB

Do you know how to do it please?

Theme: Dawn
Website: jadis-shop.com
password:rj

THANKS IN ADVANCE

2

Hi @JADIS ,
This is Theodore from PageFly - Shopify Page Builder App.

I see that you are using slideshow. Then select 1 multicolumn component
I’ll be so happy if my suggestion can help to solve your problem. If you have any further questions, please feel free to tell me.
Best regards,
Theodore | PageFly

3

**Hi @JADIS **

Follow these Steps:

Go to Online Store Edit Code Find theme.liquid file or base.css

Add the following code in the bottom of the file above tag

.media>*:not(.zoom):not(.deferred-media__poster-button), .media model-viewer {
    width: 70%;
}

li#Slide-template--19833655886153__83fdf201-e4ea-48a4-9684-51b22712ef38-1, 
#Slide-template--19833655886153__83fdf201-e4ea-48a4-9684-51b22712ef38-2, 
#Slide-template--19833655886153__83fdf201-e4ea-48a4-9684-51b22712ef38-3, 
#Slide-template--19833655886153__83fdf201-e4ea-48a4-9684-51b22712ef38-4, 
#Slide-template--19833655886153__83fdf201-e4ea-48a4-9684-51b22712ef38-5, 
#Slide-template--19833655886153__83fdf201-e4ea-48a4-9684-51b22712ef38-6, 
#Slide-template--19833655886153__83fdf201-e4ea-48a4-9684-51b22712ef38-7, 
#Slide-template--19833655886153__83fdf201-e4ea-48a4-9684-51b22712ef38-8, 
#Slide-template--19833655886153__83fdf201-e4ea-48a4-9684-51b22712ef38-9, 
#Slide-template--19833655886153__83fdf201-e4ea-48a4-9684-51b22712ef38-10, 
#Slide-template--19833655886153__83fdf201-e4ea-48a4-9684-51b22712ef38-11, 
#Slide-template--19833655886153__83fdf201-e4ea-48a4-9684-51b22712ef38-12 {
 width: 30%; 
}

RESULT:

syedsumaimaly_0-1696328515162.png
syedsumaimaly_0-1696328515162.png317×391 26.3 KB

If I managed to help you then, don’t forget to Like it and Mark it as Solutions.

4

Hi, @JADIS .

Follow These Steps.

Goto Online store > Assets > Edit code > find Base.css File and paste the code mentioned below.

section#shopify-section-template--19833655886153__83fdf201-e4ea-48a4-9684-51b22712ef38 .media>*:not(.zoom):not(.deferred-media__poster-button), .media model-viewer {
    width: 70%;
}

li#Slide-template--19833655886153__83fdf201-e4ea-48a4-9684-51b22712ef38-1, 
#Slide-template--19833655886153__83fdf201-e4ea-48a4-9684-51b22712ef38-2, 
#Slide-template--19833655886153__83fdf201-e4ea-48a4-9684-51b22712ef38-3, 
#Slide-template--19833655886153__83fdf201-e4ea-48a4-9684-51b22712ef38-4, 
#Slide-template--19833655886153__83fdf201-e4ea-48a4-9684-51b22712ef38-5, 
#Slide-template--19833655886153__83fdf201-e4ea-48a4-9684-51b22712ef38-6, 
#Slide-template--19833655886153__83fdf201-e4ea-48a4-9684-51b22712ef38-7, 
#Slide-template--19833655886153__83fdf201-e4ea-48a4-9684-51b22712ef38-8, 
#Slide-template--19833655886153__83fdf201-e4ea-48a4-9684-51b22712ef38-9, 
#Slide-template--19833655886153__83fdf201-e4ea-48a4-9684-51b22712ef38-10, 
#Slide-template--19833655886153__83fdf201-e4ea-48a4-9684-51b22712ef38-11, 
#Slide-template--19833655886153__83fdf201-e4ea-48a4-9684-51b22712ef38-12 {
 width: 20%; 
}

Result:

websensepro_0-1696331312271.png
websensepro_0-1696331312271.png400×530 74.3 KB

If I managed to help you then, don’t forget to Like it and Mark it as Solution!

5

hello bro, when i put it in the bottom of base.css it don’t work i don’t know why, could you help me please ?

6

Please add !important tag:

Add these code:

section#shopify-section-template--19833655886153__83fdf201-e4ea-48a4-9684-51b22712ef38 .media>*:not(.zoom):not(.deferred-media__poster-button), .media model-viewer {
    width: 70%;
}

li#Slide-template--19833655886153__83fdf201-e4ea-48a4-9684-51b22712ef38-1, 
#Slide-template--19833655886153__83fdf201-e4ea-48a4-9684-51b22712ef38-2, 
#Slide-template--19833655886153__83fdf201-e4ea-48a4-9684-51b22712ef38-3, 
#Slide-template--19833655886153__83fdf201-e4ea-48a4-9684-51b22712ef38-4, 
#Slide-template--19833655886153__83fdf201-e4ea-48a4-9684-51b22712ef38-5, 
#Slide-template--19833655886153__83fdf201-e4ea-48a4-9684-51b22712ef38-6, 
#Slide-template--19833655886153__83fdf201-e4ea-48a4-9684-51b22712ef38-7, 
#Slide-template--19833655886153__83fdf201-e4ea-48a4-9684-51b22712ef38-8, 
#Slide-template--19833655886153__83fdf201-e4ea-48a4-9684-51b22712ef38-9, 
#Slide-template--19833655886153__83fdf201-e4ea-48a4-9684-51b22712ef38-10, 
#Slide-template--19833655886153__83fdf201-e4ea-48a4-9684-51b22712ef38-11, 
#Slide-template--19833655886153__83fdf201-e4ea-48a4-9684-51b22712ef38-12 {
 width: 20% !important; 
}

And tel me it is working

7

when i put it in the bottom of base.css EVEN with !important it don’t work i don’t know why, could you help me please ?

8

Can me share your store access and i will check what problem your base.css file.

9

could you please help me brother ?

10

bro it’s doesn’t work unfortunately… do you have another solution please ?