How can I adjust left and right padding in the Dawn Theme?

Store Design
,
1

I need to make the margins wider for my “sizing-help” page so that the size chart image is actually readable, is there a css code to adjust the left & right padding only that I can add to just that page? There are sliders for top & bottom, but not left/right. Here’s a reference. I am using the Dawn Theme.

size chart issue.png
size chart issue.png1544×758 135 KB

1 Like
2

Hi @amyp25 ,

Im sorry I didnt catch that much what youll like to do. You like to add margins? To make sizing-help wider? and add padding to left and right? You like the sizing chart wider? Would you mind to share your URL website? with password if its protected. Thanks!

3

Yes, I need to make the center section of content wider so the chart is visible.

amyp25_0-1690585350820.png
amyp25_0-1690585350820.png1156×608 120 KB

These are the only options I have when trying to edit in the page.

amyp25_1-1690585428318.png
amyp25_1-1690585428318.png361×586 12.7 KB

Can you help me without me having to share a password in this forum? Thanks!

1 Like
4

Im not sure if I can help you without seeing any visible design. Its hard to searching in the darkness. Even we know your theme but youve already make a lot of costumization and we need to get the same design that you have, it will spend more time for us. You can PM me anytime. Thanks!

5

I just sent you a PM, thanks.

6

Thank you for the information.

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:
  4. And Save.
.product-popup-modal__content {
    padding-left: 0px;
    padding-right: 0px;
}

.product-popup-modal__content-info {
    padding-right: 0px;
}

Result:

Ribe_Dagandara_0-1690654981182.png
Ribe_Dagandara_0-1690654981182.png912×445 128 KB

I hope it help.

7

Thank you, but from the code you provided & your screen shot it looks like that is just for the sizing chart pop up on my product pages.

I need to adjust the sizing-help page, which is attached to the Sizing hyperlink in my footer.

amyp25_0-1690655500584.png
amyp25_0-1690655500584.png1158×607 120 KB

1 Like
8

Oh sorry about that, I manage to make it wider but its wides also the page. So I size only 80%. Check 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:
  4. And Save.
.page-width.page-width--narrow.section-template--19964250095891__main-padding {
    max-width: 80%;
}

Result:

Ribe_Dagandara_1-1690657965852.png
Ribe_Dagandara_1-1690657965852.png1179×408 123 KB

I hope it help.

1 Like
9

That worked perfectly, thanks so much for your help!

1 Like