Shopify themes, liquid, logos, and UX
We're moving the community! Starting July 7, the current community will be read-only for approx. 2 weeks. You can browse content, but posting will be temporarily unavailable. Learn more
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?
Solved! Go to the solution
This is an 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.
#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;
}
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
Please let me know if it works by giving it a Like or marking it as a solution!
➜ Optimize your Shopify store with PageFly Page Builder (Free plan available)
All features are available from Free plan. Live Chat Support is available 24/7.
This is an 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.
#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;
}
Thank you so much, this fixed it!
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!
@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.
#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;
}