How can I change the background color of my description text section?

Store Design
1

Hello,

I would like your help with changing the Background color of the description texts section (“All meals are… your babe”). I want the background color to be full width on both sides.

Here is the link to my collection https://wowberrybites.myshopify.com/collections/first-bites-bundles

Thank you for your help!

winnado11_2-1640328839341.png
winnado11_2-1640328839341.png3425×1620 697 KB

2

@winnado11

Add this code in theme.min.css

div.rte h1 {
    background-color: red !important;
}
3

@Zworthkey Thank you for the code. But the background color is not full width yet. I want both sides (left and right) of the text to be red as well.

Thanks for your time and help in advance.

winnado11_0-1640330175667.png
winnado11_0-1640330175667.png3150×1725 694 KB

4 
.collection-info.collection-info--template {
    background-color: red !important;
}

remove the previous code and try this.

@winnado11

5

@Zworthkey IThanks for the code, but it is still the same. Does not extend full width. Please see the below pic.

winnado11_0-1640330633865.png
winnado11_0-1640330633865.png3697×1715 714 KB

6

Sorry it can’t go full with .
When it goes full with it look like this.

.collection-info.collection-info--template {
    background-color: red !important;
    width: 132% !important;
    margin-left: -194px !important;
}

@winnado11
Add this code remove previous

7

@winnado11

do you mean like this

KetanKumar_0-1640330995879.png
KetanKumar_0-1640330995879.png1920×1080 384 KB

8

yes @KetanKumar . That’s exactly what I want. May you share the code? Thanks so much.

9

@winnado11

Please paste this code in theme.min.css file

@media only screen and (min-width: 600px) {
.collection-page .collection-description {
margin-top: -3rem !important;
}
}
.collection-info.collection-info--template {
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    background-color: red;
}

Savior_0-1640430766419.png
Savior_0-1640430766419.png1900×555 108 KB

If helpful then please Like and Accept Solution. Want to modify or custom changes on store Hire me. Feel free to contact me on shopify.dev.34@gmail.com | Shopify Design Changes | Custom Modifications In to Shopify Theme

10

@Savior Thanks so much! It finally works now! Really appreciated your help