Collection List - Mobile Fix

[ellacoker]

Hello,

I have coded my collection list so that they are rectangles, however I would like to reduce the padding to the left and right on mobile version. I am happy with desktop version !

URL: https://www.livwithin.com.au/

[Guleria]

Hello @ellacoker ,

Follow these steps:

1. Go to Online Store → Theme → Edit code

2. Open your Assets > base.css file and paste the following code at the bottom:

@media screen and (max-width: 749px) {
    .collection-list-wrapper.page-width {
        padding: 0 0px !important;
    }
}

Regards
Naveen

[Bundler-Manuel]

Hey there @ellacoker I suggest that you follow these steps to solve your padding issues

Go to Online Store->Theme->Edit code
Step 2: Asset->/section-collection-list.css->paste below code at the bottom of the file:

.collection-list .collection-list__item {
    width: 50% !important;
    max-width: 50% !important;
}

Let me know if this helps you!

[Dotsquares]

Hi @ellacoker

To reduce the left and right padding on mobile for your collection list section while keeping the desktop layout unchanged, you can add a responsive CSS rule that specifically targets smaller screens.

Add the Following CSS:

@media screen and (max-width: 749px) {
.collection-list-wrapper {
padding-left: 10px !important;
padding-right: 10px !important;
}
}

You can adjust the pixel value. Let me know if this works for you.

[EFOLI-Syn]

Hello @ellacoker,

If you want to reduce the left and right padding of your collection list only on mobile, you can use a media query to target smaller screen sizes. Since you’ve already identified the specific section IDs, you can apply the following CSS:
Where to Add This:
If your theme allows custom CSS through the Theme Customizer, add it there under Theme settings > Custom CSS.

Or, go to Online Store > Themes > Edit Code, open your main CSS file (like base.css or theme.css), and paste the code at the bottom.

@media screen and (max-width: 767px){
.collection-list-wrapper{
padding-left: 0px;
padding-right: 0px;
}
}