How to reduce padding around collections list on mobile?

Store Design
,

Topic summary

A user seeks to reduce padding around text in collection list cards on mobile devices only.

Problem: Excessive padding appears around collection card text on mobile view (screenshot provided).

Solutions Offered:

Multiple developers provided CSS-based solutions with similar approaches:

  • Method 1: Add custom CSS to theme.liquid file before the </head> or </body> tag
  • Method 2: Insert code into base.css, theme.css, or main.css files at the bottom

Common CSS approach:

  • Target mobile screens using media queries (max-width: 767px or 749px)
  • Apply margin: 0 !important or padding adjustments to slider/card elements
  • Specifically target .slider, .card__information, or .collection-list-item classes

Key technical details:

  • All solutions use @media screen queries for mobile-only targeting
  • Multiple CSS selectors provided depending on theme structure
  • Changes require editing theme files via Shopify Admin → Online Store → Themes → Edit code

Status: Multiple working solutions provided; awaiting user confirmation of which approach resolved the issue.

Summarized with AI on November 6. AI used: claude-sonnet-4-5-20250929.
1

Hi all, how can I reduce the padding around the text in the collection list cards? On Mobile only. URL is boops.co.uk

Screenshot 2024-08-23 141112.png
Screenshot 2024-08-23 141112.png483×456 77.1 KB

Thanks, Kristian

3 Likes
2

Hi @Boops_1 ,

Step 1: Go to Shopify Admin → Online Store ->Theme → Edit code

Step 2: Search file theme.liquid

Step 3: Insert this code above tag:

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you :heart_eyes:

3

Hello @Boops_1

You can add code by following these steps

  1. Go to Online Store → Theme → Edit code.

  2. Open your theme.liquid file

  3. Paste the below code before on theme.liquid

@media screen and (max-width: 767px){ .slider.slider--tablet { margin-bottom: 0 !important; } .grid--peek.slider .grid__item:first-of-type { margin-left: 0 !important; } }

niraj_patel_0-1724419483741.png
niraj_patel_0-1724419483741.png318×468 70.1 KB

Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution.

4
  • Here is the solution for you @Boops_1
  • Please follow these steps:

z5686811214059_e66de1953f1db631f9134af5cdb796ad.jpg
z5686811214059_e66de1953f1db631f9134af5cdb796ad.jpg1865×854 94.6 KB

  • Then find the base.css or theme.css file.
  • Then add the following code at the end of the file and press ‘Save’ to save it.
@media screen and (max-width: 989px) {
    .slider.slider--tablet.contains-card--standard .slider__slide:not(.collection-list__item--no-media) {
        margin-left: 0 !important;
    }
}
  • Here is the result you will achieve:

BSSTekLabs_0-1724419760390.png
BSSTekLabs_0-1724419760390.png373×810 106 KB

  • Please press ‘Like’ and mark it as ‘Solution’ if you find it helpful. Thank you.
5

Hi @Boops_1

Check thiso ne.

From you Admin page, go to Online Store > Themes

Select the theme you want to edit

Under the Asset folder, open the main.css(base.css, style.css or theme.css)

Then place the code below at the very bottom of the file.

@media only screen and (max-width: 749px){
.section-collection-list .page-width .card__information {
    padding: .5rem;
}
.card .card__inner .card__media {
        margin: 0;
    }
}

And Save.

result:

Made4uoRibe_0-1724419935152.png
Made4uoRibe_0-1724419935152.png676×458 273 KB

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!