Move code from theme.liquid to base.css

Store Design
, , , ,

Topic summary

A user is attempting to migrate custom CSS code from their theme.liquid file to base.css but encountering issues with one specific snippet that controls icon positioning and margins.

The Problem:

  • Code works in theme.liquid but fails when moved to base.css
  • The snippet uses a media query targeting screens under 990px width
  • It adjusts header padding (2rem left, 1rem right) to move icons from center toward margins

Proposed Solutions:

  • Copy the CSS code and paste it at the end of base.liquid (not base.css as originally intended)
  • Include the media query and padding rules without wrapping in <style> tags
  • Add !important flags to the padding declarations to ensure they override existing styles

Status: The discussion remains open with two responders offering similar solutions, but no confirmation yet on whether the fix resolved the issue.

Summarized with AI on November 8. AI used: claude-sonnet-4-5-20250929.
3

Hi @MiguelMaya ,

You need copy that

@media only screen and (max-width: 990px) {
    .header {
        padding-left: 2rem !important;
        padding-right: 1rem !important;
    }
}
1 Like