How does one color the margins for desktop mode? The way mobile looks would be perfect (even though you won’t see the margins on a phone). I’d like the desktop view to be flanked by a light gray color that extends where the page content ends. I hope I explained that well enough. This is my first rodeo in terms of Shopify.
Topic summary
Main issue: change the desktop “margins” (page sides outside the content) color in the Horizon theme so the content stays white and centered with light-gray sides.
Proposed solutions:
- Add a class to the in theme.liquid and CSS in base.css to set a gray page background and keep .page-width white.
- Use Theme settings → Custom CSS (or base.css) with a desktop-only media query to set body background (#f2f2f2) and keep .main-content/.page-width/.t4s-container white.
- One user shared multiple screenshots with step-by-step guidance (images central to their instructions).
Context/technical notes:
- OP already constrained content width via CSS (header, footer, #MainContent set to 1000px at ≥990px), creating margins but not controlling their color.
- Another participant argued the site background color can be changed via the theme’s color scheme settings.
- Terms: CSS = styling rules; media query = styles applied at certain screen widths; theme.liquid/base.css = theme template and main stylesheet.
Outcome/status:
- OP says prior advice solved only part of the issue; additional custom code from another helper completed it (details not posted). No theme-specific (Horizon) selectors were finalized in-thread. Discussion devolved briefly; no clear, posted resolution.
1 Like
You explained it perfectly. To color the margins on desktop, you just need to change the theme’s background color — not the page section itself.
Go to:
Online Store → Themes → Customize → Theme Settings → Colors → Background
Set the background to your light gray, then keep your main content sections white. This will create the flanked gray margins on desktop while mobile stays clean.
If you want, I can check your theme and guide you step-by-step so it matches the exact look you want.
Unfortunately, the only options in Colors is Schemes. Maybe that’s a Horizon quirk.
Hi @Will408
You need to go for some code editing. Don’t worry, it’s not too hard. I am going to explain step by step to make it easy for you.
Go to Online Store → Themes → Edit code
-
Open theme.liquid
-
Find the
<body>tag -
Add this class:
<body class="custom-bg">
- Now add this in
base.css:
.custom-bg {
background: #f2f2f2 !important;
}
.page-width {
background: #ffffff;
}
If it doesn’t work, please tell me your theme name (Dawn, Refresh, Craft, Sense, Impulse, etc.), and I’ll give you theme-specific code so it looks exactly like Shopify’s native styling.
It didn't work. I found the <body> tag but I wasn't sure where to place it. There was already class information. I'm using the Horizon theme, BTW.
I still don’t understand exactly where to place it
@Will408 please add this css to the very end of your base.css file and check
shopify admin->online store->themes->edit theme code->assets->base.css
1 Like
That did nothing except tweak out my Hero section
@Will408 can you please share your page link?
Again, I’m a novice and don’t understand. My page isn’t published.
1 Like
And? If you don’t want a section to be full width, change the width settings for that section. Has absolutely nothing to do with background color.
Please for the love of all that you hold dear, stop this nonsense. Just stop. You’re making it wayyyy harder than it needs to be.
you can share the preview link, you can DM if you do not want to make it public
Don’t know what that is
@Will408 ok, you can go to your website admin, you have online store>themes> click on … and check if you have a preview option, you can click on it and share its link to here or directly message me from message box or email on my profile
I’m a novice, bro. I appreciate the help but some of us are starting from scratch. And the only width options for the Header in Horizon is Page and Full. Neither fixes the issue.
1 Like