How can I make my Horizon desktop view be more narrow but not affect mobile? I found some code that made the desktop version perfect but it squeezed my mobile, which didn’t need editing. Thanks in advance!
1 Like
Hello @Will408,
Thank you for submitting your query to the Shopify community. I’d be happy to assist you. Could you please provide the store URL and password (if it’s password-protected) so I can review and get back to you with an update?
Sorry, I’m a novice and not quite sure what you mean. My store isn’t published and I’m sure it’s not password protected.
1 Like
This is the code that makes the desktop version look great, but it squeezes the mobile view:
html {
width: 50% !important;
margin: 0 auto !important;
}
Hi @Will408
To make the Horizon theme desktop layout narrower without affecting mobile, you need to apply CSS using desktop-only breakpoints.
Add this CSS (Theme > Edit code > base.css or custom.css)
/* Desktop only */
@media screen and (min-width: 992px) {
.page-width,
.container,
.section,
.content-container {
max-width: 1100px; /* adjust this number to your liking */
margin-left: auto;
margin-right: auto;
}
}
Why this works
@media screen (min-width: 992px)ensures the styling ONLY applies to desktop.- Mobile widths (below 992px) remain untouched.
max-widthcontrols how narrow you want the desktop layout.
If you want even tighter control:
You can target Horizon-specific wrappers:
@media screen and (min-width: 992px) {
.horizon-page-wrapper,
.horizon-main-content,
.shopify-section {
max-width: 1100px;
margin: 0 auto;
}
}
1 Like
That worked perfect, thank you so much!
2 Likes
Hi @Will408
Thank you for your response. It’s good to know that it’s worked for you. Kindly feel free to get back to me if you need any further assistance. If helpful, please like all posts. 
Best regards,
Devcoder 
You can make the desktop view narrower without touching mobile by wrapping your CSS in a desktop-only media query. For example:
@media screen and (min-width: 1024px) {
/* Desktop-only styles */
.YOUR-SECTION-CLASS {
max-width: 900px;
margin: 0 auto;
}
}
Anything inside that block applies only to screens wider than 1024px, so your mobile layout stays the same. Just replace the class with the section/container you’re adjusting.
Just out of curiosity – have you tried changing this setting:
These settings limit your site content to 1440px, 1920px and 2400px.
If 1440 is still too much, rather then adding the rules suggested (which may back-fire), reset the relevant CSS variables like this:
body {
--narrow-page-width: 56.25rem; /* 900px */
--normal-page-width: 90rem; /* 1440px */
--wide-page-width: 120rem; /* 1920px */
}
The code can go into “Theme settings”(cog icon) => “Custom CSS”.
Setting max-width manually may break other layout-related styles, which are calculated based on those variables I’ve mentioned.
There is also benefit of not editing theme code which is good for future theme version updates.
Yeah, actually I do have a new question. 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.
1 Like
Hi there,
Thank you for your question — and you explained it perfectly.
To achieve the light gray margins on desktop (similar to what you see in mobile view), you’ll just need a small bit of custom CSS added to your theme. This will allow the background color to extend beyond the main content area while keeping the center section clean and readable.
Here’s what I can do for you:
Add a light gray background to the outer margins on desktop**
Ensure it only applies to larger screens**
Keep your mobile layout exactly the same**
Test across devices so everything displays smoothly**
If you’d like, I can apply this directly to your theme and adjust the color to match your brand perfectly.
Just let me know and I’ll get started.
Could I get the CSS to add myself?
Hi @Will408
No problem at all — I can help you with that!
To add a light gray color to the margins in desktop mode, we simply need to style the outer page container or set a background color on the body so the content stays centered and the sides show the gray color.
Just share two things with me:
- Your theme name
- The page or section where you want this effect
Once I have that, I’ll give you the exact CSS and instructions to make your desktop layout look exactly the way you want.
Don’t worry — since this is your first time with Shopify, I’ll guide you through everything step by step.
Best regards,
Devcoder