Trying to change the text colour on slideshow for mobile only - Stiletto theme

[HJC]

I'm wondering if anyone can help me (I'm using Stiletto theme 3.3.0).  I'm trying to change the text colour to white of only one section (slideshow) on mobile version only. I want to keep the desktop version in a dark colour as it works better, but you can't read it on the mobile version.

I've tried using @media queries code in Assets > theme.css. It changes just the mobile version but it also changes all the heading text throughout the site, whereas I only want to change the font colour of one section on the homepage (mobile version only).

Ideally I would like to find some code that I can use in the custom css for the slideshow section, but the @media queries don't seem to work there. Any suggestions? I'm not very experienced at coding so some easy instructions would be amazing! Thank you.

[Made4uo-Ribe]

Hi @HJC 

Please, share your store URL. Thanks!

[HJC]

Hi @Made4uo-Ribe 

I have managed to change the mobile heading colour only using the below code, but I can't work out how to change the accent text. Do you know what code I should use for this? Please could you add to the below code if you do, thank you! The screenshot shows the heading text I've successfully changed to white, but the smaller text above I can't work out.

@media only screen and (max-width: 640px) {
#shopify-section-template--24442038813051__slideshow_Ec9drk {
h2 {
color: #FFFFFF;
}

[Made4uo-Ribe · Accepted solution]

I would need your store URL, I try to use the Stiletto theme in  the demo but im not sure if it work.

1. From your Shopify admin dashboard, click on "Online Store" and then "Themes".
2. Find the theme that you want to edit and click on "Actions" and then "Edit code".
3. In the "Assets" folder, click on "base.css, style.css or theme.css" file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:

.slideshow-slide__text-container-inner {
    color: red;
}

• And Save.
• Result:
• 

  If this one doesn’t work, please share your store URL. We can’t help you if we can’t see the problem.

Please don't forget to Like and Mark Solution to the post that helped you. Thanks!

[HJC]

Thank you, I added that into my code and it worked!

[ParseLab_Viyana]

Hello @HJC , Can you please share your store URL?

[HJC]

Hi @ParseLab_Viyana 

I have managed to change the mobile heading colour only using the below code, but I can't work out how to change the accent text. Do you know what code I should use for this? Please could you add to the below code if you do, thank you! The screenshot shows the heading text I've successfully changed to white, but the smaller text above I can't work out.

@media only screen and (max-width: 640px) {
#shopify-section-template--24442038813051__slideshow_Ec9drk {
h2 {
color: #FFFFFF;
}