A user working with Shopify’s Sense theme wants to narrow their website width and ensure banners align properly across the page edges rather than extending full-width.
Three solutions were proposed:
PageFly-Victor suggests modifying the base.css file by locating the .page-width class and changing the max-width value from 140rem to 100rem (or desired width).
BSS-Commerce recommends adding CSS to the section-image-banner.css file with specific properties: max-width: 1100px and margin: auto for the .banner class.
GemPages provides an alternative approach by inserting custom CSS code into the theme.liquid file, placed before the closing </body> tag.
All responses include step-by-step instructions for accessing Shopify’s code editor. The discussion remains open with no confirmation from the original poster about which solution worked.
I am using the theme Sense – my website is www.lifewithlyndsey.com to see what it looks like. I would like it to be narrow and I would like my banners to line up similar to the website https://shinealightdesigns.com/
I dont want the banners going to the edge of the page I’d like them to all line up.
Hi @Zakariatheguy,
This is Victor from PageFly - Shopify Page Builder App.
Please find this line of code in your base.css file and change that
Step 1: Online Stores > More action > edit code > base.css
Step 2: Find
.page-width {
max-width: var(--page-width);
Now you can change the max-width value, in the desired page you want to look alike have the 100rem instead of your ( 140rem).
Hope this can help you solve the issue.
Best regards,
Victor | PageFly
Please follow these steps:
.banner {
max-width: 1100px;
margin: auto;
}
I hope that it works for you.
Hello @lyndseycupit
You can follow these steps:
I hope the above is useful to you.
Kind & Best regards,
GemPages Support Team
