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.

[Marcus-T]

To reduce the left and right padding on mobile while keeping the desktop version unchanged, you can add a media query in your theme's CSS. Here's a quick sample:

@media only screen and (max-width: 767px) {
.your-collection-class {
padding-left: 10px;
padding-right: 10px;

Just replace .your-collection-class with the actual class used for your collection list container. This will apply the padding adjustment only on mobile devices.