Changing section color/text color in Dawn theme

[VikingsSecreto]

Good Evening!

I am hoping that I could get some assistance with an issue I have been having. I have been trying to change the color of the “Image with Text” section on my company’s product page. I have been searching like crazy the last few days to figure it out and cannot seem to get the right code to change the grey section below in my screen shot. I would like to have the section be white from side to side with black text to break up the page a bit more. As I mentioned, I just seem to be unable to get the right code to get it done. Could someone assist with helping me correctly code this section? Let me know if you need any additional information!

Thank you in advance!

[solverStaff]

Hello @VikingsSecreto

Please share that product page link

[VikingsSecreto]

@solverStaff Thanks! Link is https://vikingsecreto.com/products/the-colorado-og and the pass is geolyi

[solverStaff]

Your store is password protected. Please share your front password

[VikingsSecreto]

Sorry if the other password didn’t work. Try password1

Thanks!

[solverStaff]

.image-with-text__media.image-with-text__media--small.gradient.color-background-2.global-media-settings.media {
	background-color: #fff;
}
#ImageWithText--template--17105469276462__image-with-text {
	background-color: #fff;
	color: #000;
}
#ImageWithText--template--17105469276462__image-with-text h2 {
	color: #000;
}

Please add that css code to bottom of base.css file

[VikingsSecreto]

Could be missing it, don’t see css code in your reply.

[solverStaff]

.image-with-text__media.image-with-text__media--small.gradient.color-background-2.global-media-settings.media {
	background-color: #fff;
}
#ImageWithText--template--17105469276462__image-with-text {
	background-color: #fff;
	color: #000;
}
#ImageWithText--template--17105469276462__image-with-text h2 {
	color: #000;
}

[VikingsSecreto]

Thanks so much! Is there a way to have the white extend to each edge of the screen? Basically fill in the sides? Or is that a limitation of the theme/section?

[Ujjaval]

@VikingsSecreto
put below code into base.css(online store->themes->asset->base.css)

.image-with-text__text.rte.body {
    color: black !important;
}
h2.image-with-text__heading.h1 {
    color: black !important;
    font-weight: bold;
}
:root {
    --gradient-base-background-2: white !important;
}
.global-media-settings {
    background-color: white !important;
}

[Rajvi_patel_1]

Hiii @VikingsSecreto

You can try this code by following these steps:
Step 1: Go to Online Store->Theme->Edit code.
Step 2: Search file base.css.
Step 3: Paste the below code at bottom of the file → Save

.image-with-text__media.image-with-text__media--small.gradient.color-background-2.global-media-settings.media {
    background-color: white!imporant;
}
div#ImageWithText--template--17105469276462__image-with-text {
    background-color: white!important;
}
.image-with-text__text.rte.body {
    color: black!important;
}

[solverStaff]

Actually i’m confused what do you want exactly? Can you share more clear details?

[VikingsSecreto]

@solverStaff sorry for any confusion. I’d like the white section of the page to extend to each side of the screen, giving a banner type of effect. In the snip below, ideally, the sections where the red arrows are would also be white.

[solverStaff]

#shopify-section-template--17105469276462__image-with-text {
	background-color: #fff;
}

Add that code also. i hope it will work for you

[Ujjaval]

@VikingsSecreto

div#shopify-section-template--17105469276462__image-with-text {
    background-color: white !important;
}

Add above one also

[VikingsSecreto]

@solverStaff That did the trick! You’re amazing, thank you so very much!!

[solverStaff]

Okay great. If you’d like to discuss this more, don’t hesitate to send me a PM.

[VikingsSecreto]

@solverStaff I definitely will! I will likely need more help here soon. I’ll save your info from your signature for future needs. Hope you have a great night!

[solverStaff]

Thanks a lot man. Good night