Change paddings only in mobile

Store Design
, , ,

Topic summary

A user needs to modify side paddings to 4rem specifically for mobile devices on their FAQ page.

Solution provided:

  • Add CSS code to the end of the base.css file in Shopify theme editor
  • The code uses a media query targeting screens up to 749px width
  • Targets the .collapsible-content-wrapper-narrow class to apply 4rem padding on left and right sides

Implementation path:
Shopify Admin → Online Store → Theme → Edit code → base.css

The solution appears complete with specific code snippet and file location provided.

Summarized with AI on October 28. AI used: claude-sonnet-4-5-20250929.
1

How can I change the side paddings to 4rem on mobile only?

1 Like
2

@pimpaoclothing Can you please share this page link?

1 Like
3

Hi, yes, here it is: https://pimpaobabyclothing.pt/pages/perguntas-frequentes

4

@pimpaoclothing please add this css to the very end of your base.css file and check,
Shopify Admin → Online Store ->Theme → Edit code → base.css

@media screen and (max-width:749px){
.collapsible-content-wrapper-narrow{padding-right: 4rem; padding-left: 4rem;}
}
1 Like