why is my banner text almost transparent

[TBS2023]

I have tried this but not working

banner__heading inline-richtext h2
{ opacity: 1 !important;
}

https://yoga-spirit-mauritius.myshopify.com/

rtewth

[GTLOfficial · Accepted solution]

Hello @TBS2023 

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

#shopify-section-template--17554451464349__image_banner_jCx7Hh h2 {
color: #fff;
}
.banner__box .banner__heading + * {
color: #fff;
}

and the result will be

If this was helpful, hit the like button and mark the job as completed.
Thanks

[BSSCommerce-HDL]

Hi @TBS2023, 

Step 1: Go to Shopify Admin -> Online Store ->Theme -> Edit code

Step 2: Search file theme.liquid

Step 3: Insert this code above </head> tag: 

<style>
.banner__box {
    opacity: 100% !important;
    color: #fff !important;
}
.banner__text {
    color: #fff !important;
}
</style>

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you 😍

[Raj-webdesigner]

Add This css in your edit Code > base.css File

.banner h2.banner__heading.inline-richtext.h2 strong {
    color: #fff !important;
}
.banner .banner__box.content-container {
    opacity: 1 !important;
}
.banner .banner__text.rte.subtitle {
    color: #fff !important;
}

[Sweans]

Hi @TBS2023 ,

The issue you are facing is due to the opacity of the parent element being lower than 100%.
In order to fix the issue you can change the opacity of the banner box.
For that go to the edit code section->locate the section-image-banner.css file.

Inside this file go line 9.

and replace the code with this :

.banner__box {
text-align: center;
opacity: 100%;
}

This will give you this output:

If you would like remove opacity all together you can add this code at the bottom of the section-image-banner.css

.banner__heading.inline-richtext.h2 {
color: white !important;
}


.banner__text.rte.subtitle {
color: white !important;
}

This will be your output:

you need further assistance, feel free to reach out. I hope this helps! If it does, please like it and mark it as a solution!

Regards,
Sweans

[Dan-From-Ryviu]

Hi @TBS2023 

Please add this code to Custom CSS of that section to solve the issue. 

.banner__box { opacity: 100%; }