Equal margins throughout

Solved

Equal margins throughout

aryanagarwaal
Tourist
6 0 2

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)

Accepted Solution (1)
Made4uo-Ribe
Shopify Partner
8403 2008 2466

This is an accepted solution.

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

Like this. 

Made4uoRibe_0-1716827502309.png

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!

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free.
Need THEME UPDATES but has custom codes? No worries, contact us for affordable price.

View solution in original post

Replies 8 (8)

Made4uo-Ribe
Shopify Partner
8403 2008 2466

Hi @aryanagarwaal 

its password protected. 

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free.
Need THEME UPDATES but has custom codes? No worries, contact us for affordable price.
aryanagarwaal
Tourist
6 0 2

sorry about that. its removed now

Made4uo-Ribe
Shopify Partner
8403 2008 2466

This is an accepted solution.

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

Like this. 

Made4uoRibe_0-1716827502309.png

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!

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free.
Need THEME UPDATES but has custom codes? No worries, contact us for affordable price.
aryanagarwaal
Tourist
6 0 2

such a legend! thanks mate

aryanagarwaal
Tourist
6 0 2

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)

Made4uo-Ribe
Shopify Partner
8403 2008 2466

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

 

 

 

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

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free.
Need THEME UPDATES but has custom codes? No worries, contact us for affordable price.

PageFly-Theodor
Shopify Partner
691 86 101

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

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.

aryanagarwaal
Tourist
6 0 2

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