How to add left and right padding in custom liquid

Store Design
,

Topic summary

Goal: Set different left/right padding for desktop vs. mobile in a custom Liquid section (Dawn theme).

Core approach:

  • Add a custom class to the element (e.g., the

    tag) so styles can target it specifically.

  • Use CSS media queries (@media) to apply different padding based on screen width.
    • Mobile example: @media only screen and (max-width: 600px) { .your-class { padding: …; } }
    • Desktop example: @media only screen and (min-width: 600px) { .your-class { padding: …; } }
  • Place the CSS in theme code (e.g., Online Store → Edit code → theme.liquid before , or an appropriate stylesheet). This ensures the styles apply site-wide.

Notes:

  • @media lets CSS change styles at specific viewport widths, enabling responsive padding.
  • Code snippets are central to understanding the solution; shared images/screenshots are not essential to apply it.

Status/outcome:

  • The original poster acknowledged the guidance and expressed thanks. No further issues were raised, suggesting the solution worked and the thread is effectively resolved.
Summarized with AI on February 4. AI used: gpt-5.
6

Hello @helloeveryone thanks for the support.

1 Like