Dawn theme "Featured Product" Section add Background color

[palettepaws]

I would like to add background color to the "Featured Product" Section.
I tried to add the css code.

div {
  background-color: #f5f5f5;
}

but this couldn't completely add the background color on both side.

As you can see the background color is only applied to the middle part.



I would like to fill the same color on the side, simillar to the "Rich Text" Section (Featured Canvas of the Month) above.

Any experts here that can help me with this?
link: palettepaws.com
pw: cheath

[Artzen_tech]

Hello @palettepaws 
Its Artzen Technologies! We will be happy to help you today.

You can try to follow these steps:

Go to Online Store -> Themes -> Actions -> Edit code.

Go Assets folder -> theme.liquid file.

Add the following code in the bottom of the file above </body> tag

<style>
section.color-background-1.gradient {
    background: #f5f5f5;
}
.product-media-container.media-type-image.media-fit-contain {
    margin-bottom: 0;
}
.product__info-wrapper.grid__item.scroll-trigger.animate--slide-in {
    background: #f5f5f5;
}
</style>

like this

Let me know if need further assistance
Regards,
Artzen Technologies

[ZestardTech · Accepted solution]

Hello there,

1. In your Shopify Admin go to online store > themes > actions > edit code
2. Find Asset > base.css and paste this at the bottom of the file:

section.color-background-1.gradient {
background-color: #f5f5f5!important;
}
.product__info-wrapper.grid__item.scroll-trigger.animate--slide-in {
background-color: #f5f5f5!important;
}

[JohnE10]

In the "Featured product" section settings, instead of adding Custom CSS (which is what I'm assuming you did), change the "Color scheme", that will cover the full width of the background.

You can pick the exact color you'd like to use in the "Colors" tab in the "Theme settings".