Minimize padding only for mobile version

Shopify Discussion

Topic summary

A user seeks to reduce padding in a specific section, but only on mobile devices.

Solution Provided:

  • Navigate to Shopify Admin → Online Store → Theme → Customize → Theme Settings → Custom CSS
  • Insert provided CSS code that uses a media query (@media screen and (max-width: 768px)) to target mobile screens
  • The code removes bottom padding and margins from multiple elements including slider buttons, collection list wrapper, and card components
  • Uses !important declarations to override existing styles

Status: The solution appears complete with CSS code and a visual result showing reduced spacing on mobile view.

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

Hello friends, how can I minimize the padding in this section only for mobile version?

Bildschirmfoto 2025-01-01 um 16.32.06.png
Bildschirmfoto 2025-01-01 um 16.32.06.png584×1142 315 KB

2

Hi @NikosBat

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: 768px){
.slider-buttons > button {
    height: 30px !important;
}
.collection-list-wrapper.page-width {
    padding-bottom: 0 !important;
}
ul.collection-list.contains-card {
    margin-bottom: 0 !important;
}
ul.collection-list.contains-card > li {
    padding-bottom: 0 !important;
}
ul.collection-list.contains-card > li > .card-wrapper.collection-card-wrapper .card.card--standard.card--media > .card__content .card__information {
    padding-bottom: 0 !important;
}
}

Here is the result:

image_480.png
image_480.png297×479 88.8 KB

I hope this helps

Best,

Daisy