How can I adjust the Dawn theme collection list layout for mobile?

Store Design
1

hi i have this code in base.css

to change the rows of collection lists i can change how many on desktop but how do i change it on mobile as well to 3 a row CHEERS!!

.grid–1-col .grid__item {
width: calc(100% / 7)!important;
max-width: calc(100% / 7) !important;
}
@media screen and (max-width: 749px) {
.grid–1-col .grid__item {
width: 50%!important;
max-width: 50% !important;
}
}

1 Like
2

@sweetbuddie
Welcome to the Shopify community!
Thanks for your good question.

Please share your store URL. and screenshot
So that I will check and let you know the exact solution here.

3

Hi @sweetbuddie ,

I am Anni From https://www.task4store.com/ - Shopify Small & Custom Tasks Experts ( By MS Web Designer - Top Rated Shopify Certified Experts and eCommerce Consultant from Singapore )

I will love to help you with your concern.

-Kindly Provide your Store URL,

Note: If your store is protected with ‘store Font password’ please Send it here or DM me.

If you have any concerns feel free to ask me!

Regards,
Anni

4

Hi @sweetbuddie ,

You can follow the instruction below:

  1. Go to Online Store->Theme->Edit code
  2. Asset->/base.css->paste below code at the bottom of the file:
@media screen and (max-width: 992px) {
  .grid--1-col .grid__item {
    width: 33.3333% !important;
    max-width: 33.3333% !important;
  }
}

If you feel like my answer is helpful, please mark it as a SOLUTION. Let me know if you have any further questions.

Best regards.

5 
@media screen and (min-width: 750px){
.collection-list.grid--3-col-tablet .grid__item {
    max-width: 33.33% !important;
   width: 33.33% !important;
}
}

@sweetbuddie
try this code.

6

@sweetbuddie Please send me your store url.

7

https://sweets-retreat.myshopify.com/

1 Like
8

@sweetbuddie

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

Add this code in the base.css file

1 Like
9

Hi didnt work it changed my desktop aswell to 2

1 Like
10

CHEERS !! i replaced this code with yours

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

1 Like
11

@sweetbuddie
if helpful kindly like and accept our Solution ,

1 Like
12

Can the same be done with

Mobile products 3 a row

Desktop 6 a row

1 Like
13

ok i will check it.

14

CHEERS!!

15

Hi, I have a similar question. On my dawn theme in my mobile, I want to

  • display 3 collections instead of 2 so that the 3rd is not cut off like shown in the images

  • in my setting you can see for mobile I can have a maximum of 2 columns. can you please help me.

Thanks