Change colour text specific slideshow

[BlueVagabonds]

I'm trying to change the text colour of a specific slideshow. Ideally I would also like to set the text width so it does not come over the picture when seen on a smaller screen. 

Would anyone be able to assist with this? 

Text colour needs to be #423F3F

[Dan-From-Ryviu]

Please share the link to your store 

[BlueVagabonds]

https://www.bluevagabonds.com/products/swim-with-humpback-whales-of-tonga

[Dan-From-Ryviu · Accepted solution]

Please add this code to Custom CSS of that section to change the text color. 

.overlay__content {
  color: #423F3F
}

Regarding the picture issue, more texts will be missing if you proceed. It currently has some text missing. 

[BlueVagabonds]

That worked! amazing, is there also a way to make it the same size as the other font size on the page? or just even smaller? 

[Dan-From-Ryviu]

Please update the code 

.overlay__content {
  color: #423F3F
}
@media (max-width: 749px) {
.line-1 { margin-bottom: .8rem; }
.line-2 { max-width: 20em; font-size: 1rem; }
.rimage-outer-wrapper { height: 700px !important; }
.overlay-type { padding: 40px 20px; }
}

[AnneLuo]

You can try this code by following these steps:
Step 1: Go to the online store ->Theme ->Edit Code.
Step 2: Find the theme.liquid file and add the following code before the </head> tag

<style>
#shopify-section-template--22362572619960__slideshow_Tc43Qr .overlay .inner {
  max-width: 60% !important;
 color: #423F3F !important;
}
#shopify-section-template--22362572619960__slideshow_Tc43Qr .overlay .inner .rte.line-2 {
  font-size: 16px !important;
}
</style>

Result:

Hope this helps! If yes then Please don't forget hit Like and Mark it as solution!

[BlueVagabonds]

Hi That worked, however now the text width is showing funny in the mobile version. Would we be able for the mobile version to keep the original way? 

[AnneLuo]

Please update the code

<style>
#shopify-section-template--22362572619960__slideshow_Tc43Qr .overlay .inner {
  max-width: 60% !important;
 color: #423F3F !important;
}
#shopify-section-template--22362572619960__slideshow_Tc43Qr .overlay .inner .rte.line-2 {
  font-size: 16px !important;
}
@media screen and (max-width: 767px) {
#shopify-section-template--22362572619960__slideshow_Tc43Qr .overlay .inner {
  max-width: 100% !important;
 }
}
</style>

[BlueVagabonds]

You are a magician! That made it perfect. Thank you!

[AnneLuo]

You're welcome.

[devcoders]

Hello @BlueVagabonds ,

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

.image-overlay .overlay__content {
color: #000;
}