Equal margins throughout

Shopify Discussion
1

I just started creating this coffee brand as a personal project. the margins seem to be different. for all the sections which were already there when i started using the template the margins are there and are equal. though for the image banner that i added does not have margins. how to make sure all sections have the same margins (like image with text and featured collection do)

My Store (92ea8e-49.myshopify.com)

1 Like
2

Hi @aryanagarwaal

its password protected.

1 Like
3

sorry about that. its removed now

4

Hi @aryanagarwaal ,
This is Theodore from PageFly - Shopify Page Builder App.

Two ways to ensure consistent margins for all sections in your Shopify theme:

  1. Theme Editor:
  • Find the section file for your image banner.
  • Copy the CSS rule defining margins from sections with desired margins.
  • Paste the rule into your image banner section file.
  1. CSS Overrides:
  • Edit the theme.scss.liquid file.
  • Add code snippet targeting all sections or specific sections with your desired margin value.

Best regards,
Theodore | PageFly

5

Thanks for the info, do you mean the sides right?

Like this.

Made4uoRibe_0-1716827502309.png
Made4uoRibe_0-1716827502309.png1908Ă—908 214 KB

If it is check this one.

From your Shopify admin dashboard, click on “Online Store” and then “Themes”.

Find the theme that you want to edit and click on “Actions” and then “Edit code”.

In the “Assets” folder, click on “base.css, style.css or theme.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:

@media screen and (min-width: 750px) {
    .section+.section {
        max-width: 140rem;
        margin: auto;
        padding: 0 5rem;
    }
}

And Save.

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!

1 Like
6

this seems to be a chatgpt answer ive already tried that mate not working

7

such a legend! thanks mate

8

hey mate i just checked even though its working great on the desktop website the mobile website still doesnt have equal margins. i want it to be dynamic like the demo store.

Preview Default Theme - Taste Ecommerce Website Template (shopify.com)

9

Oh, my bad because I limit the code for mobile.

Add this code on the very last closing bracket }

@media screen and (max-width: 749px){
.section+.section {
    max-width: var(--page-width);
    margin: 0 auto;
    padding: 0 1.5rem;
}
}

And Save.

Result:

Made4uoRibe_0-1716828981903.png
Made4uoRibe_0-1716828981903.png611Ă—781 347 KB

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!