How to reduce the padding size of a page?

Shopify Discussion
1

Hi,

i have the studio theme and I’ve created a page but the all text is in the centre of the page in a column. There’s too much padding on both sides of the page. Please can someone help me add a code to make the text start from the beginning of the page instead? thanks

2

Hi Ruby,

Please share your store URL so I can look at it and help you further.

3

Hello @RubyB11
Please share your website URL.

4

Hello Ruby, you can use browser inspector to find that class, try to test your new padding dimension.

If you finish your first step, then go in your shopify code and implement your new padding dimension in CSS file and mark it as !important.

For example, you login in your Store → Theme → Edit Code → Search .css (and you will see a lot of files there → if you find base.css , styles.css you can go and add a new class at bottom of file.

You could try to remove page-width class or edit dimensions in inspector to see the difference first.

5

hi, thanks for your message, I’ve sent my URL in private message. thankyou!

6

hi, i’ve sent my URL to you in private messages, thankyou!

7

Hi Ruby, follow these steps to accomplish what you want.

  1. Go to Online Store > (for the published theme) click on the three dots > click “Edit code”
  2. Search for “main-page”, open “main-page.liquid” file.
  3. In that file, search for “
    ”, its usually on Line #21 of non-edited Studio theme.
  4. Remove “page-width–narrow”, the line will become like this

Save file and then check your page.

8

First Step
First Step1504×655 66.3 KB

Second Step
Second Step1270×667 43.7 KB

9

Hello @RubyB11

Go to Online store >> Edit code >> Assets >> base.css
Add this code below of base.css file

.page-width–narrow {
max-width: 1180PX !important;
width: 100% !important;
padding: 25px;
}
.rte {
word-break: break-all !important;
}

10

thankyou it worked !