Remove Paddings from Collection Views on Mobile

[ludac]

Hello,

I would like to remove the paddings in the screenshots below from the collections in mobile view (the green and purple ones).

I’ve already figured out how to do this on desktop, but I’ve tried literally everything to remove it from mobile view and can’t get anywhere.

This is the code in the base.css file that removes the paddings on desktop view:

/*Show products in collections at full width in desktop view (Collections like All items)*/
@media screen and (min-width: 0px) {
    .collection.page-width {
        padding: 0 0rem !important;
        max-width: none !important;
    }
}

/*Show products in featured collection at full width in desktop view (Frontpage)*/
@media screen and (min-width: 0px) {
    .slider-mobile-gutter.page-width {
        padding: 0 0rem !important;
        max-width: none !important;
    }
}

Link to the starting page: https://ludac.de/

Link to the collections page (All items): https://ludac.de/collections/frontpage

I would be very grateful for any help with this.

[DaisyVo]

Hi @ludac

To complete your requests, please follow these steps:

1. Go to Shopify Admin > Online Store > Theme > Customize > Theme Settings > Custom CSS https://prnt.sc/i8ljAMlHJUKl
2. Paste the code provided into the Custom CSS section.

@media screen and (max-width: 749px){
.grid--2-col-tablet-down .grid__item {
    width: 49% !important;
    max-width: 50% !important;
}
.collection.page-width {
    padding: 0 !important;
}
}

Here is the result: https://prnt.sc/RNvO9HXpaKC2

I hope this helps

Best,

Daisy

[Made4uo-Ribe]

Hi @ludac

Try this one.

1. From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
2. Find the theme that you want to edit and click on “Actions” and then “Edit code”.
3. In the “Assets” folder, click on “base.css, style.css or theme.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:

@media only screen and (max-width: 749px){
.collection.page-width {
    padding: 0;
}
.collection .grid__item {
    max-width: 50%;
}
}

• And Save.

• Result:

  

Your Feedback Matters! Please mark the solution and give likes to posts that helped you. Your appreciation fuels our motivation to assist you better!

[ludac]

Thanks for your answer but unfortunately it doesn’t work. I added the code to the end of the Base.css, but the paddings are still there.

[DaisyVo]

Hi @ludac

Could you please kindly try the one I sent you above?

[Made4uo-Ribe]

Please, Replace on this one.

@media only screen and (max-width: 749px){
.collection.page-width {
    padding: 0 !important;
}
.collection .grid__item {
    max-width: 50% !important;
}
}

And Save.

Your Feedback Matters! Please mark the solution and give likes to posts that helped you. Your appreciation fuels our motivation to assist you better!

[ludac]

Hi, like I already said I added the code at the bottom of the base.css files and unfortunately it doenst work. Please correct me if I did something wrong, but the code is at the end of the base.css file (see red frame in the screenshot) and the paddings are still there.

[DaisyVo]

@ludac

Please give the code I provided a try and follow the guide above.

[namphan]

Hi @ludac ,

Please go to Actions > Edit code > Assets > base.css file and paste this at the bottom of the file:

@media screen and (max-width: 749px) {
.collection.page-width {
    padding: 0 !important;
}
.collection.page-width .grid--2-col-tablet-down .grid__item {
        max-width: none;
    }
}

result