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 cream color that extends where the page content ends so header doesn’t appear to float. I hope I explained that well enough. This is my first rodeo in terms of Shopify.
Understanding what you’re looking at is paramount to being successful.
A shopify store is set up like small paper cut outs set on top of a master background. This master background covers the entire website. Every page. Edge to edge. Then you have pages that can have their own master background if so desired. Then sections on top of that. Each section has it’s own background. Then you have blocks, with their own background. Margins occur when a section or block is smaller than the background behind it. The background peeks through and shows the background color or image.
So there is no margin color. There is only background color. Each theme has its color settings, and theme background color is usually in those settings. Generally you will click the cog wheel in the theme editor, and scroll to the theme’s color settings.
1 Like
@Will408 can you please share the website link and elaborate more? as @Maximus3 mentioned, there is no margin color, but do you want color for particular section or anything like that?
You can give your desktop page flanked cream margins by setting the page background to light cream and keeping the content centered.
If your theme supports it:
Go to Customize → Colors/Layout → set page background to cream and content background to white.
If not: use CSS:
body { background-color: #fff8e7; } /* cream edges */
.main-content { max-width: 1200px; margin: 0 auto; background: #fff; }
This centers your content and makes the desktop edges match your desired look, like on mobile.
Neither of those worked, unfortunately. Maybe it’s a Horizon quirk.
I’m aiming to have the desktop version to have a backdrop like the mobile edit screen. That cream color or a light gray.
It’s something I can assist you with. Kindly let me know if you would like me help you out
Yeah, if you have a code to make the background of the desktop version a cream or light gray color, I’d be stoked.
@Will408 can you please share website link?