how to add white margins on my homepage for the left and right side

Store Design
, , ,

Topic summary

A user wants to add white margins on the left and right sides of their Shopify homepage for desktop only, similar to another store’s design where the main content is centered with white space on the sides.

Solutions Provided:

  • CSS approach: Multiple users suggested adding custom CSS with @media(min-width:768px) or @media(min-width:1024px) targeting main#MainContent with max-width: 1200px and margin: 0 auto to center content and create white margins

  • Implementation locations:

    • Add CSS in theme’s custom CSS settings
    • Insert in theme.liquid file before the </body> tag using <style> tags
    • Add to theme.css or style.css in the Assets folder

  • Template-specific option: One solution includes wrapping the CSS in {% if template.name == 'index' %} to apply only to the homepage

  • Alternative tool: EasyEdits app was suggested as a no-code visual solution for adjusting margins

Key technical details: The CSS centers content using auto margins, sets maximum width, and applies only to desktop screens via media queries. Users can adjust the max-width value and add optional padding/box-shadow for refinement.

Summarized with AI on November 3. AI used: claude-sonnet-4-5-20250929.
1

my store is h0t8tk-4d.myshopify.com and I want to add white margins like this store https://www.shopjustice.com/ where the left and right side are white only for desktop and the other sections are fit to size based on those margins.

1 Like
2

you can add this css

@media(min-width:768px){

main#MainContent {
    max-width: 1100px;
    margin: 0 auto;
}

}
1 Like
3

where do i add it?

4

2024-12-12 23_34_02-Window.png
2024-12-12 23_34_02-Window.png358Ă—901 23.9 KB

you can add in theme customize > settings > custom css

or

in layout > theme.liquid

at bottom enclosed in style tags like
1 Like
5

Hi @ali219

Try this one.

  1. From your Shopify admin dashboard, click on “Online Store” and then “Themes”
  2. Find the theme that you want to edit and click on “Actions” and then “Edit code”.
  3. In the “theme. Liquid” file. Find the tag and paste the code below before the tag.
{% if template.name == 'index' %}

{% endif %}

Your Feedback Matters! Please mark the solution and give likes to posts that helped you. Your appreciation fuels our motivation to assist you better!

6

Hey there! Adding white margins to the left and right sides of your homepage for desktop only is achievable with a bit of CSS. Let’s break it down:

Steps to Add White Margins1. Log in to Shopify Admin:

  • Go to Online Store > Themes > Edit Code.

  1. Find the CSS File:

    • Open theme.css or style.css in the Assets folder.

  2. Add the Custom CSS: Add this code at the bottom of the file:

@media (min-width: 1024px) { /* Applies only to desktop */
    main#MainContent{ /* Replace with your main wrapper class */
        max-width: 1200px; /* Adjust width as desired */
        margin: 0 auto; /* Centers the content */
        background-color: white; /* Sets the white margins */
        padding-left: 20px; /* Optional: Adjust padding inside the margins */
        padding-right: 20px; /* Optional: Adjust padding inside the margins */
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* Optional: Subtle shadow for contrast */
    }
}

Explanation:1. Wrapper Class: Replace .main-content-wrapper with your homepage’s main wrapper class. Use your browser’s Inspect Tool to identify the correct class.

  1. Responsive Design: The @media rule ensures the changes apply only to desktop screens (adjust the 1024px breakpoint as needed).
  2. Centered Content: The max-width and margin: 0 auto keep the content centered while creating margins on both sides.

Easier Option with EasyEdits

If tweaking code feels tricky, EasyEdits can let you visually set and adjust margins without any CSS. Plus, you can use it during the free trial and keep your edits forever.

Let me know if you need help identifying the wrapper class or testing the changes! (P.S. I’m the developer of EasyEdits, so feel free to ask me anything :blush: ).