Solved

Dawn theme - Changing multi column width on moblie.

jecbon
Explorer
60 0 23

Currently, if you view a multi-column on mobile you get 1 column per row, how do I make it so the width of each column is smaller so you can view two columns per row on mobile ?

 

Thanks. 

Accepted Solution (1)
Zworthkey
Shopify Partner
5581 642 1565

This is an accepted solution.

@jecbon 
Paste this code on top of the base.css file.

@media only screen and (max-width: 768px) {
li.multicolumn-list__item.grid__item {
    max-width: 50% !important;
}
}

 

View solution in original post

Replies 10 (10)

Zworthkey
Shopify Partner
5581 642 1565

Hii, @jecbon 
Kindly share your store URL so,
I can solve it perfectly.
Thank You.

jecbon
Explorer
60 0 23

it is just the dawn theme shouldnt the solution be the same for all ? just a change the CSS file 

 

Zworthkey
Shopify Partner
5581 642 1565

@jecbon 
Can you give me a screenshot what you want so,
I can solve it.
Thank You.

Zworthkey
Shopify Partner
5581 642 1565

@jecbon 
Paste this code on top of the base.css file.

.grid--1-col .grid__item {
    max-width: 50% !important;
    width: 50% !important;
}



jecbon
Explorer
60 0 23

is there a way to make that only occur on mobile?

Zworthkey
Shopify Partner
5581 642 1565

@jecbon 
This code is only more mobile-view.

jecbon
Explorer
60 0 23

I want the  coulmns to be 2 per row only on mobile view. ..... the current solution makes the columns to 2 per row on desktop.....

Zworthkey
Shopify Partner
5581 642 1565

@jecbon 
Paste this code on top of the basee.css file.

@media only screen and (max-width: 768px) {
.grid--1-col .grid__item {
    max-width: 50% !important;
    width: 50% !important;
}
}



jecbon
Explorer
60 0 23

that makes my product image and image with text columns also go to two row wide... is it possible to only edit the multi column section ?

 

Zworthkey
Shopify Partner
5581 642 1565

This is an accepted solution.

@jecbon 
Paste this code on top of the base.css file.

@media only screen and (max-width: 768px) {
li.multicolumn-list__item.grid__item {
    max-width: 50% !important;
}
}