Changing text color when turning in phone

Solved

Changing text color when turning in phone

HHloot
Excursionist
20 0 4

Hello eveyone, 

I've got a small problem with my shopify store.I have used the "image slide" section on my shopify store.When it is on computer it's all good since the text is white on a colerful picture so we can see the text.Now when i go to the phone view, i see that my text disapeared just below the picture because the text is white on a white background.I would like to know if it was possible to maybe change the color of the text to black on white background below the picture but just for the phone version and let everything be for the computer version.

 

Thanks to anyone who will provide me with any kind of help.

Accepted Solution (1)
sahilsharma9515
Shopify Partner
1206 156 233

This is an accepted solution.

Hi @HHloot Thanks for explaining the issue you are facing, Please add the give code at the bottom of base.css file.

 

@media only screen and (max-width: 600px) {
h2.banner__heading.inline-richtext.h1, .banner__text.rte{
    color: black !important;
}
}

 

If you are not sure where is your base.css file please follow the steps:

  1. Login in shopify admin.
  2. Click on the Online Store.
  3. Then click on the button next to Customize in live Theme.
  4. Click Edit Code.
  5. Search Base.css in the code in left hand side.
  6. Add the code given above at the bottom of base.css file.

Result:

sahilsharma9515_0-1700310335128.png

 

If you will unable to implement the same then I'm happy to do this for you, let me know. I can implement the code changes so that this will work well for you.

 

Hopefully it will help you. If yes then Please don't forget hit Like and Mark it as solution!

 

Best Regards

Sahil

- Your

 Coffee Tip 

can create magic in coding ❤️❤️

- Need a Shopify Developer? CHAT ON WHATSAPP or EMAIL ME !


- Hopefully the solution will help you. If yes then Please hit

 Like 

and

 Mark it as solution! ❤️


View solution in original post

Replies 7 (7)

Natasha-Saed
Shopify Partner
421 46 77

Hi,

 

Can you share your store URL to be able to give you the solution for this.

If my solution helped you don't forget to accept it to help others.
===================================================================
And if you really like my support share a cup of coffee with me paypal.me/freemindsint
HHloot
Excursionist
20 0 4

Hello,

Here is the link : https://9d4a5b-3.myshopify.com/

Scroll down until you find the slideshow.You can see that the text displayed on the slide,on computer mode,is visible,all good. But if you go to inspect and switch to iphone version,you can see that the text go below the slide since it is too small,and because the color of the text is white and the background is white too,you can't see the text on mobile.

Now if you really need the password to fix it or to find the solution i don't know what password to share (like the password of my whole shopify account ? or like is there a password specificly for the shopify store only).

sahilsharma9515
Shopify Partner
1206 156 233

Hi @HHloot 

 

Can you please provide your store URL and password as well if applicable, so that I can provide you solution that can work for you.

 

Best regards

Sahil

- Your

 Coffee Tip 

can create magic in coding ❤️❤️

- Need a Shopify Developer? CHAT ON WHATSAPP or EMAIL ME !


- Hopefully the solution will help you. If yes then Please hit

 Like 

and

 Mark it as solution! ❤️


sahilsharma9515
Shopify Partner
1206 156 233

This is an accepted solution.

Hi @HHloot Thanks for explaining the issue you are facing, Please add the give code at the bottom of base.css file.

 

@media only screen and (max-width: 600px) {
h2.banner__heading.inline-richtext.h1, .banner__text.rte{
    color: black !important;
}
}

 

If you are not sure where is your base.css file please follow the steps:

  1. Login in shopify admin.
  2. Click on the Online Store.
  3. Then click on the button next to Customize in live Theme.
  4. Click Edit Code.
  5. Search Base.css in the code in left hand side.
  6. Add the code given above at the bottom of base.css file.

Result:

sahilsharma9515_0-1700310335128.png

 

If you will unable to implement the same then I'm happy to do this for you, let me know. I can implement the code changes so that this will work well for you.

 

Hopefully it will help you. If yes then Please don't forget hit Like and Mark it as solution!

 

Best Regards

Sahil

- Your

 Coffee Tip 

can create magic in coding ❤️❤️

- Need a Shopify Developer? CHAT ON WHATSAPP or EMAIL ME !


- Hopefully the solution will help you. If yes then Please hit

 Like 

and

 Mark it as solution! ❤️


HHloot
Excursionist
20 0 4

Wow,incredible,this worked perfectly.

I haven't been active lately due to personal matter so i just tried it now and it's fantastic it's so easy thank you so much for your help Sahil !

 

ZestardTech
Shopify Partner
5748 1050 1389

Hello @HHloot ,


Please share your store URL and Password.
So that I will check and let you know the exact solution here.

Want to modify or develop new app, Hire us.
If helpful then please Like and Accept Solution .
Email: support@zestard.com
Shopify Apps URL :- https://apps.shopify.com/partners/zestard-technologies
Custom Modifications Into Shopify Theme | Shopify Private App | SEO & Digital Marketing
HHloot
Excursionist
20 0 4

Hello,

Here is the link : https://9d4a5b-3.myshopify.com/

Scroll down until you find the slideshow. You can see that the text displayed on the slide,on computer mode,is visible,all good. But if you go to inspect and switch to iphone version,you can see that the text go below the slide since it is too small,and because the color of the text is white and the background is white too,you can't see the text on mobile.

Now if you really need the password to fix it or to find the solution i don't know what password to share (like the password of my whole shopify account ? or like is there a password specifically for the shopify store only).