Line up borders on several sections in Dawn theme

[jasminsharp97]

I'm working on this website: https://maison-rouge-ny.myshopify.com/pages/about

PW: thifis

I'm adding borders to several sections, and I want the borders to all be aligned so it looks like it's all the same section. But some of the borders stay boxed and some are full width, like in the picture below. How do I fix this?

[PageFly-Richard]

This is Richard from PageFly - Shopify Page Builder App

Hi  @jasminsharp97  Please add code here to fix it:

Step 1: Online Stores > Themes > Edit code

Step 2: Choose file theme.liquid
Step 3: Add code above the tag </body>

<style>
  #shopify-section-template--18647897604308__image_with_text_halves_Me8QpC .page-width{
   max-width: 100% !important;
    margin-left: 5%;
    padding-left: 0%;
    margin-right: 5%;
    padding-right: 0px;
}
#shopify-section-template--18647897604308__17319713741739bb5f .page-width{
    max-width: 100% !important;
    margin-left: 5%;
    padding-left: 0%;
    margin-right: 5%;
    padding-right: 0px;
}
</style>

Result:

 

Hope my solution will help you resolve the issue.

Best regards,

Richard | PageFly

[Vinsinfo · Accepted solution]

@jasminsharp97 Please follow the below steps to align the borders properly to display the sections as the same section. Let us know whether it is helpful for you.

1. From admin, go to "Online Store" -> "Themes".

2. Click the action button from the current theme and select "Edit code".

3. Search and locate the base.css file. Add the below CSS code in the base.css file at the bottom of the file, like in the below attached screenshot.

#shopify-section-template--18647897604308__image_banner_KXaWmJ, #shopify-section-template--18647897604308__rich_text_9HmjKP, #shopify-section-template--18647897604308__image_with_text_halves_Me8QpC, #shopify-section-template--18647897604308__17319713741739bb5f {
    width: 87% !important;
    margin: 0px auto;
}
#shopify-section-template--18647897604308__image_with_text_halves_Me8QpC .page-width, #shopify-section-template--18647897604308__17319713741739bb5f .page-width {
    padding: 0px;
}

4. Final results will be like,

Please provide your support by click "Like" and "Accepted" if our solution works for you. Thanks for your support.

[jasminsharp97]

Thank you so much, this fixed it!

[AnneLuo]

You can try this code by following these steps:
Step 1: Go to the online store ->Theme ->Edit Code.
Step 2: Find the theme.liquid file and add the following code before the </head> tag

<style>
  #shopify-section-template--18647897604308__image_with_text_halves_Me8QpC .page-width,
#shopify-section-template--18647897604308__17319713741739bb5f .page-width {
  padding-left: 0;
  padding-right: 0;
  max-width: 100% !important;
  margin: 0 5%;
}

</style>

After:

Hopefully it will help you. If yes then Please don't forget hit Like and Mark it as solution!

[Vinsinfo]

@jasminsharp97 Please follow the below steps to align the borders properly to display the sections as the same section. Let us know whether it is helpful for you.

1. From admin, go to "Online Store" -> "Themes".

2. Click the action button from the current theme and select "Edit code".

3. Search and locate the base.css file. Add the below CSS code in the base.css file at the bottom of the file, like in the below attached screenshot.

#shopify-section-template--18647897604308__image_banner_KXaWmJ, #shopify-section-template--18647897604308__rich_text_9HmjKP, #shopify-section-template--18647897604308__image_with_text_halves_Me8QpC, #shopify-section-template--18647897604308__17319713741739bb5f {
    width: 87% !important;
    margin: 0px auto;
}
#shopify-section-template--18647897604308__image_with_text_halves_Me8QpC .page-width, #shopify-section-template--18647897604308__17319713741739bb5f .page-width {
    padding: 0px;
}

4. Final results will be like,

Please provide your support by click "Like" and "Accepted" if our solution works for you. Thanks for your support.