How can I change the color of a specific element on my website?

Technical Q&A
1

hi everyone!

I appreciate your help on this.

How do I make the . become a different colour? The dot inside the black square..

I only want the . to become a different colour example green colour

Untitled.png
Untitled.png680×274 9.63 KB

This is my website link

https://theimpossiblesauces.com/

Thank you

2

You would need to add span tags around the dot. For example it would look like this:

Welcome to the I.mpossible Sauces Factory

The other (not so good?) option would be to add that section as an image instead of text.

3

OK for first solution can u help show me where to add the solution pls ?

As in which section etc etc

Sorry i am a newbie to this.

Tqvm !

4

I would add it wherever you added the existing text. Just replace what you have with the example I provided above. You may need to add it as a Custom HTML block.

If you can’t get it work please include a screenshot of how you have added the existing content.

5

Hi sorry unable to make it work… i cannot find the existing content in the Edit Code section

I added the information through here… pls help thank you

Untitled.png
Untitled.png800×381 96.6 KB

6

Give this a try:

  • In the left column select Add Section > Custom Content

  • Hide any of the existing blocks that are added to the Custom Content section

  • In the Custom Content section click Add Block > Custom HTML

  • In this block paste the below:

Welcome to The I.mpossible Sauces Factory

Ready-To-Eat | Convenient | Quality | Halal
7

hi

I managed to do it but i have 2 issues

  1. how do align it middle?

Untitled.png
Untitled.png1579×765 31.2 KB

  1. for mobile view it becomes like this.. how do i fix this?

Untitled2.png
Untitled2.png1579×747 57.4 KB

8

Try replacing all of the code in the custom HTML block with the below:

.slideshow__text.banner__box {max-width: var(--page-width) !important; margin: 0 auto; background-color: transparent;} .ss-inner {background-color: #fff; width: 100%; height: 100%; padding: 75px;} .banner__text {margin-bottom: 30px;} @media only screen and (min-width: 750px) { .slideshow__text.banner__box {padding: 5rem;} .ss-inner {padding: 125px;} } @media only screen and (max-width: 750px) { .banner__box {padding: 4rem 1.5rem; !important;} }

Welcome to The I.mpossible Sauces Factory

Ready-To-Eat | Convenient | Quality | Halal
9

hi that worked great!

but i think it affected another part of the design…

the description i circled in black had a different colour background so that i can read the words.. like a bubble

i tried changing the Colour Scheme on the right side but cannot..

hope i make sense… thank you

Untitled.png
Untitled.png1873×877 225 KB

10

Replacing the custom html with the below should fix that:

.slideshow__text.banner__box.almo {max-width: var(--page-width) !important; margin: 0 auto; background-color: transparent;} .ss-inner {background-color: #fff; width: 100%; height: 100%; padding: 75px;} .banner__text {margin-bottom: 30px;} @media only screen and (min-width: 750px) { .slideshow__text.banner__box {padding: 5rem;} .ss-inner {padding: 125px;} } @media only screen and (max-width: 750px) { .banner__box {padding: 4rem 1.5rem !important;} }

Welcome to The I.mpossible Sauces Factory

Ready-To-Eat | Convenient | Quality | Halal
11

yes fixed it!

thank you so much for your help