Dawn theme - Changing multi column width on moblie

Store Design
1

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.

2

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

3

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

4

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

5

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

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

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

7

@jecbon
This code is only more mobile-view.

8

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…

9

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

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 ?

11

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