Hero Image Text on Mobile using Brooklyn Theme

Solved
Highlighted
New Member
3 0 0

I am using the slider and I have inserted text on the hero image.  When I view it on a computer or tablet the text looks fine, it is on top of the image.  But when I view it on mobile the text is placed underneath the image.  Is there a way to keep the text on top of the image when viewing on mobile?  It works on some other themes I have tried but I would like to use Brooklyn.

0 Likes
Highlighted

Hello @kevin12345,

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
0 Likes
Highlighted
New Member
3 0 0

Hello, the site url is https://eatneatlyapron.com/

 

The site is not live yet so the password to enter the site is plield

 

Thanks.

0 Likes
Highlighted

Success.

@kevin12345,

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

@media screen and (max-width: 769px) {
.hero__adapt-text-wrap.wrapper {
	position: absolute;
	top: 20%;
	left: 0;
	right: 0;
color: #fff;
}
}
@media screen and (max-width: 480px) {
.hero__adapt-text-wrap.wrapper {
	top: 10%;
}
}
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
New Member
3 0 0

This worked, thanks!

0 Likes