Dawn theme related products till edge of website

[Sivadarshan]

I'm using dawn theme latest version, in that product page related products section I want to make it till edge of the website.

[Vinsinfo · Accepted solution]

@Sivadarshan 

Please follow below steps to change the width of related products section to edge of the website. Let me know whether it is helpful for you.

1. From admin go to "Online Store" -> "Themes".

2. Click "Edit code" button from the current theme.

3. Go to "base.css" file.

4. Then paste the below code at the bottom of the file and then save changes.

product-recommendations.related-products {
  padding-left: 0px !important;
  padding-right: 0px !important;
}

Result will be like,

Please provide your support by click "Like" and "Accepted" if our solution works for you. Thanks for your support.

[DaisyVo]

Hi @Sivadarshan 

Do you have an example of how it should be? If possible, please share with me the screenshot of your idea. Thank you!

Best,

Daisy - Avada Support Team. 

[DaisyVo]

Hi @Sivadarshan 

You can consider checking our CSS code below and see if it's correct: 

Step 1: Go to your Shopify admin > Online store > Customize: https://prnt.sc/XQ6IDB99kUCd
Step 2: From the left menu > Theme settings > Open Custom CSS: https://prnt.sc/iDxwa8zBQ4Z-
Step 3: Copy the code below and paste it there. Then save the change

Here is the code part: 

product-recommendations {
    padding-inline: 0 !important;
}

Before: https://prnt.sc/cZa2slM86doc

After: https://prnt.sc/B_BPiKd5P9VL

Please let me know if it works. Thank you!

Best,

Daisy - Avada Support Team. 

[Vinsinfo · Accepted solution]

@Sivadarshan 

Please follow below steps to change the width of related products section to edge of the website. Let me know whether it is helpful for you.

1. From admin go to "Online Store" -> "Themes".

2. Click "Edit code" button from the current theme.

3. Go to "base.css" file.

4. Then paste the below code at the bottom of the file and then save changes.

product-recommendations.related-products {
  padding-left: 0px !important;
  padding-right: 0px !important;
}

Result will be like,

Please provide your support by click "Like" and "Accepted" if our solution works for you. Thanks for your support.

[GTLOfficial · Accepted solution]

Hello @Sivadarshan 
Go to online store ----> themes ----> actions ----> edit code ---->base.css
add this code at the end of the file and save.

.related-products.page-width.section-template--17986858909893__related-products-padding.isolate.scroll-trigger.animate--slide-in.product-recommendations--loaded {
padding: 0px !important;
}

result

If this was helpful, hit the like button and accept the solution.
Thanks