Increase width of related product Section & Center title - DAWN Theme

[ManuelH]

Hey id like to increase the width of the related product section on the product page. Also id want to put the title "You may also like" in the center and change the color of it. 

Anybody know how to do all that?

[niraj_patel]

Hello @ManuelH 
Can you share store URL?

[ManuelH]

arent the selectors the same for all in DAWN theme 14.0?

[niraj_patel]

You can add code by following these steps

1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file

3. Paste the below code before </body> on theme.liquid
<style>
  product-recommendations.related-products.page-width {
     padding: unset !important;
     margin: unset !important;
     max-width: 100% !important;
  }
  .related-products h2.related-products__heading.inline-richtext.h2 {
      text-align: center !important;

      color: #d5290d !important; /*change according to you*/
   }
</style>
Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution.

[Anshul_arora]

Hello @ManuelH ,

I understand you are looking to increase the 'You may also like' section size and change the heading text placement.

You can implement this change with the help of the CSS code.

Please add the below-mentioned code at the bottom of theme.liquid file before </body> tag and save.

<style>

product-recommendations.related-products.page-width.section-template--21651094733124__related-products-padding.isolate.scroll-trigger.animate--slide-in.product-recommendations--loaded {
max-width: 100% !important;
}

h2.related-products__heading.inline-richtext.h2 {
text-align: center !important;
color: blue;
}

</style>

[Please feel free to change the max-width- px size and color of the font.]

After applying code output will be like this -: https://prnt.sc/uxKRPieZ80jP

I hope the solution helps you.

Please share if you have any queries.

Thank you.

[Made4uo-Ribe]

Hi @ManuelH 

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:

product-recommendations.related-products.page-width.section-template--21651094733124__related-products-padding.isolate.scroll-trigger.animate--slide-in.product-recommendations--loaded {
    max-width: 100%;
}

And Save. 

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