A Shopify store owner seeks to add padding to collection page edges on mobile view only, without affecting desktop layout. The product text is currently being cut off on mobile devices.
Three solutions were provided:
CSS in theme.css file - Add media query targeting screens max-width 768px with padding: 0px 12px to .collection-section
CSS in main.css/base.css - Similar approach using media query (max-width: 749px) with 10px padding on .collection element
Code in theme.liquid file - Insert CSS code before the closing tag
All solutions use CSS media queries to target mobile devices specifically, ensuring desktop view remains unchanged. Multiple respondents provided working code snippets with visual examples showing the padding applied to mobile collection pages.
Check this one.
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){
.collection {
padding: 10px;
}
}
And Save.
Result:
Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!
