Background Overlay does not display on Mobile - Debut Theme

Solved
Highlighted
Tourist
10 0 0

Hi There

Working with debut theme, and my image slideshow does not display the background overlay when switching to mobile view. As this is a theme setting (black overlay, 66%), I assume the issue is in the theme css withholding the overlay once the image size changes? The text overlay in theme settings work fine, just not the background overlay. 

My text overlay becomes hard to read when there is no dark overlay dimming the image behind the text.. so it looks super sloppy once it goes to mobile view. 

0 Likes
Highlighted

Hello @TheCottonMafia,

Please share your site url so that I will give you exact solution

Want to modify or incorporate custom changes on store, Hire us.
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Free Review and advice for sale on store | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | SEO & Digital Marketing | Site Speed Optimization | Performance Site Audit
1 Like
Highlighted
Tourist
10 0 0

sin-city-hockey-club.myshopify.com
pass: juitsi

0 Likes
Highlighted

 @TheCottonMafia,

1. Go to Online Store->Theme->Edit code
2. Asset->theme.scss.liquid->paste bellow code in bottom of file

.slideshow__overlay::before {
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background-color: #000;
	opacity: 0.66;
	z-index: 2;
}

 

Want to modify or incorporate custom changes on store, Hire us.
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Free Review and advice for sale on store | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | SEO & Digital Marketing | Site Speed Optimization | Performance Site Audit
1 Like
Highlighted
Tourist
10 0 0

Thank you. It works only without text overlay. Now there is a new issue: adding the text overlay back to the image shows correctly in desktop view, but shows double in mobile view. The double appears below the image. doubletextoverlay.PNG

0 Likes
Highlighted

Ok,

In mobile view where do you want this text?

On image or below Image?

Want to modify or incorporate custom changes on store, Hire us.
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Free Review and advice for sale on store | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | SEO & Digital Marketing | Site Speed Optimization | Performance Site Audit
1 Like
Highlighted
Tourist
10 0 0
I would like the text on the image
0 Likes
Highlighted

Success.

@TheCottonMafia,

Please add below css on theme.scss file

.slideshow__text-content.slideshow__text-content--mobile.slideshow__text-content--mobile-0.text-center {
	display: none !important;
}

 

Want to modify or incorporate custom changes on store, Hire us.
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Free Review and advice for sale on store | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | SEO & Digital Marketing | Site Speed Optimization | Performance Site Audit
1 Like
Highlighted
Tourist
10 0 0

You rock thank you!

0 Likes