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.
1

How can i move this code from theme.liquid to base.css functioning properly?

Ive moved all the added custom code on my theme.liquid to base.css with success, except for this code that’s not worked properly after moving every way I’ve tried. Its for making icons move away from the center to the margins. Help.

misteri.ca
2

Hi @MiguelMaya

This is Amelia from PageFly - Landing Page Builder App

You need to copy this code below and paste it at the end of the base.liquid file

@media only screen and (max-width: 990px) {

.header {

padding-left: 2rem;

padding-right: 1rem;

}

}

Note that you do not need to copy the tag

Hope that my solution works for you.

Best regards,

Amelia | PageFly

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