Change background/text colour on mobile version of banner text

Tonimerc
Tourist
6 0 3

Hi - I've got a banner on my homepage with some text overlaid on it. It's white text on a dark background on desktop - but on mobile the text turns black on a dark background - I'd like to change either the background colour or the text colour on the mobile version but I can't figure out how to do it.

Can anyone help? Screen grab attached of desktop and mobile to show what I mean. 

Thanks

Mobile versionMobile versionDesktop versionDesktop version

0 Likes

Hello,
Please share your site url.
So that I can check and let you know the exact solution here.

If helpful then please Like and Accept Solution. Free Website Review and advice for sale from Hire us
Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO | Digital Marketing | Site Speed Optimization | Performance Site Audit
For Quick Chat Whats app | Email: pallavi@oscprofessionals.com | Skype : oscprofessionals-87
0 Likes
Tonimerc
Tourist
6 0 3

Hi - Thanks for responding! It's dunnespremierhouse.ie

0 Likes
g33kgirl
Shopify Partner
210 51 63

You need to add this code at the end of your CSS file by going to Themes -> Edit code -> Assets -> themes-styles.scss.css

 

@media only screen and (max-width: 749px){ 
.banner-content.inner.abs_center {
    background-color: #fff;
}
}

 

 

If you found my answer helpful, please LIKE and ACCEPT.
buymeacoffee.com/g33kgirl ☕
If you're not comfortable with code, please modify code files at your own risk.
Do NOT give out your passwords unless absolutely necessary.
0 Likes
Natztech
Shopify Partner
567 140 334


please Go to Online Store->Theme->Edit code then go to assets/theme.css ->paste below code at the bottom of the file.

@media only screen and (max-width: 429px){
#shopify-section-1541389364083 .banner-content{
	background-color: #ffffff !important;
}
}

 

Want to theme customize contact us E-mail : natztech2312@gmail.com
If helpful then please Like and Accept as Solution

PageFly - My favorite drag and drop page builder - Visit the Shopify app store

Add this css at the bottom of
Online Store->Theme->Edit code->Assets->theme-styles.scss

 

@media only screen and (max-width: 767px){
#shopify-section-1541389364083 .banner-content.inner.abs_center {
    background-color: #ccc !important;
}
}

 


Change the color as per your choice.
Hope this will work for you.
Thanks....

If helpful then please Like and Accept Solution. Free Website Review and advice for sale from Hire us
Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO | Digital Marketing | Site Speed Optimization | Performance Site Audit
For Quick Chat Whats app | Email: pallavi@oscprofessionals.com | Skype : oscprofessionals-87
0 Likes