How to adjust margins / widht of blog and pages sections?

Store Design
, ,

Topic summary

A user sought help adjusting the margins and width of their Shopify store’s page sections to match the appearance of their policy templates, while keeping text centered.

Initial Attempt:

Solution Provided:
A community member offered CSS code to be added to the theme’s stylesheet (base.css/style.css/theme.css):

  • Sets .page-width--narrow to 70% width using the --page-width variable
  • Applies text justification to content within the .rte class
  • Targets the specific Shopify section structure

Outcome:
The CSS solution worked perfectly, achieving the desired layout consistency with policy pages. The issue was resolved through theme code customization rather than built-in theme settings.

Summarized with AI on November 2. AI used: claude-sonnet-4-5-20250929.
1

IMG_6365.png
IMG_6365.png2266×1488 345 KB

Hi I’ve tried to adjust margins and widths of pages sections but didn’t find out.

here is my website https://mexajewelry.com/pages/acerca-de-nosotros

I manage to justify the text but would like to look more centered

thank you in advance

1 Like
2

Hi @MXJEWELRY ,

Go to Online Store, then Theme, and select Edit Code.
Search for base.css/theme.css/style.css file Add the provided code at the end of the file.

body.page-acerca-de-nosotros .rte div, 
body.page-acerca-de-nosotros .rte h2, 
body.page-acerca-de-nosotros .rte h3, 
body.page-acerca-de-nosotros .rte h4, 
body.page-acerca-de-nosotros .rte h5, 
body.page-acerca-de-nosotros .rte h6, 
body.page-acerca-de-nosotros .rte p, 
body.page-acerca-de-nosotros .rte a, 
body.page-acerca-de-nosotros .rte ul {
    text-align: center !important;
}
3

IMG_0220.png
IMG_0220.png960×2079 197 KB

Hi thank you for your answer I guess I didn’t explain myself good, I was trying the page section look the same size as the policies templates

hwre I add a picture

thank you in advance for your help

4

Hi @MXJEWELRY

Try this one.

  1. From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
  2. Find the theme that you want to edit and click on “Actions” and then “Edit code”.
  3. 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:
.shopify-section.section .page-width--narrow {
    max-width: var(--page-width);
    width: 70%;
}

.shopify-section.section .page-width--narrow .rte * {
     text-align: justify;
}

Your Feedback Matters! Please mark the solution and give likes to posts that helped you. Your appreciation fuels our motivation to assist you better!

1 Like
5

Amazing thank you so much for your help! Worked perfectly

1 Like