Dawn theme / Change the layout for policies

[AndreaHuang]

Hi there,

I would love to adjust the layout for the Shipping & Return, Jewelry Page, Privacy Policy and Terms of Service page:

1. For Privacy Policy and Terms of Service page, I use the Shopify Policy template, would love the expand the width of the context. Please check the pictures below:

  

2. For Shipping & Return, Jewelry Care Page, I made each of them a new page template. I used the "Rich Text" Section for the text. I want to "Shipping & Return" and "Jewelry Care" Heading stay in the middle but the rest align left and expand the width to make it look like the Privacy Policy and Terms of Service layout. But don't influence other pages' Rich Text Section. Please check the picture below:

 

My url: andrejewelry.com

Password: Thankyou

Thanks for your help!

[Made4uo-Ribe · Accepted solution]

Check this one. 

• From your Shopify admin dashboard, click on "Online Store" and then "Themes".
• Find the theme that you want to edit and click on "Actions" and then "Edit code".
• 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:

@media screen and (min-width: 990px){
.rich-text__blocks {
    max-width: 100% !important;
}
}
.rich-text__wrapper {
    flex-wrap: nowrap;
}
.shopify-policy__container {
    max-width: 100%;
}

@media only screen and (min-width: 1215px){
    .shopify-policy__container {
    max-width: 100%;
    margin: 0 20%;
}
}

And Save. 

Result:

Please don't forget to Like and Mark Solution to the post that helped you. Thanks!

[Made4uo-Ribe]

Hi @AndreaHuang 

I check your store but pages you like to change is cant be reach. It is in the footer area but there is no link going into that pages. Please, provide or save the changes youve made.  

[AndreaHuang]

Just added the links in the footer. Thank you!

[Natasha-Saed]

1) Go to online store

2) Edit Code

3) Open your base.css file

4) Paste the following code at the end of the file:

      .shopify-policy__container {max-width: 90% !important}

5) Save.

You can adjust the desired size with 90% up to 100%.

Let me know if it work by marking it as a solution.

[Made4uo-Ribe · Accepted solution]

Check this one. 

• From your Shopify admin dashboard, click on "Online Store" and then "Themes".
• Find the theme that you want to edit and click on "Actions" and then "Edit code".
• 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:

@media screen and (min-width: 990px){
.rich-text__blocks {
    max-width: 100% !important;
}
}
.rich-text__wrapper {
    flex-wrap: nowrap;
}
.shopify-policy__container {
    max-width: 100%;
}

@media only screen and (min-width: 1215px){
    .shopify-policy__container {
    max-width: 100%;
    margin: 0 20%;
}
}

And Save. 

Result:

Please don't forget to Like and Mark Solution to the post that helped you. Thanks!

[AndreaHuang]

Thanks! The privacy poilcy & terms of service pages now are perfect!

but for the Shipping & Return, Jewelry Care pages, the context needs to align to the left. Only the heading is centered. And this code also affects the rich text section in other pages.

Thank you!

[Natasha-Saed]

This is because the code you are using adjust all the text try the code I gave you it will only effect the privacy and terms pages.

1) Go to online store

2) Edit Code

3) Open your base.css file

4) Paste the following code at the end of the file:

      .shopify-policy__container {max-width: 90% !important}

5) Save.

[Made4uo-Ribe · Accepted solution]

Check this one for alignment,

Same Instruction.

.rich-text__text.rte {
    text-align: left;
}
.center {
    text-align: center !important;
}

And Save. 

Result:

Please don't forget to Like and Mark Solution to the post that helped you. Thanks!

[AndreaHuang]

Seems like it will still affect all the Rich text section in other pages too. But it is good enough. Thank you!

[Spac-es]

Add this code in your base.css:

.shopify-policy__container {
  max-width: 900px !important;
}

Change the value (900px) to whatever you want!