How can I fix CSS insertion errors in Refresh Theme footer?

Hello,

Using refresh theme version 2.0.2

I have not created CSS yet and am struggling to make it work. The layout of the footer is correct, but I am getting two error messages which is leading me to not being able to save the footer layout.

I have attached photos of our current layout that cannot be saved, as well as the error messages. The current CSS I have on the footer is:

.footer-block–newsletter {
display: block !important;
}
.footer-block–newsletter {
margin-top:0 !important;
}

@media (max-width:991px){ <----- this is the line with errors
.footer__content-top.page-width {
flex-wrap:wrap !important;
}
}

Desired footer layout:

Error message:

Many thanks in advance. Your help will be greatly appreciated!

Hello @JJsPopShoppe

It’s GemPages support team and glad to support you today.

Due to Theme setting does not support CSS At-rule https://help.shopify.com/en/manual/online-store/themes/theme-structure/extend/add-css

Read more about CSS At-rule: https://developer.mozilla.org/en-US/docs/Web/CSS/At-rule

Please add your custom code to inside block code on file theme.liquid (Go to Online Store → Theme → Edit code)


Like this

I hope the above is useful to you.

Kind & Best regards,
GemPages Support Team

Hi @GemPages ,

I tried adding my custom code inside block code on file theme.liquid, but that doesn’t seem to be changing anything. I saved the custom code and then previewed the website and the footer layout didn’t work at all.

This is the footer with no code applied AND with the custom code applied:

This is what I see at the bottom of the theme.liquid file without any custom code:

Any other ideas? Thank you!