Basically, the margins (for the pages) look like this:
However, I want the margins to look like this:
How can I make this happen?
Shopify theme: Ride
URL: wigmadcosplay.com (password: yellow)
Topic summary
A user wants to adjust page margins in their Shopify store using the Ride theme. They provided screenshots showing current wide margins and their desired narrower layout.
Two solutions were offered:
-
CSS modification approach (HDL-Shin):
- Navigate to Shopify Admin → Online Store → Theme → Edit code
- Locate base.css or theme.css file
- Add media query code at the bottom to set max-width to 110.6rem for the
.page-width--narrowclass - Includes before/after screenshots demonstrating the result
-
Alternative method (AnneLuo):
- Access Online Store → Theme → Edit Code
- Find theme.liquid file
- Insert code above the
</head>tag
Both solutions involve editing theme files directly through Shopify’s code editor. The discussion remains open with no confirmation from the original poster about which solution worked.
Hi @laserbeampq ,
You can try this code by following these steps:
Step 1: Go to Shopify Admin → Online Store ->Theme → Edit code
Step 2: Search file base.css or theme.css
Step 3: Insert the below code at the bottom of the file → Save
@media only screen and (min-width: 990px) {
.page-width--narrow {
max-width: 110.6rem !important;
}
}
Final Result:
Hope it helps you
Kind regards,
HDL-Shin
1 Like
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 above the tag
Hopefully it will help you. If yes then Please don’t forget hit Like and Mark it as solution!