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
Whats app
Free Website Review and advice for sale from Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO ; Digital Marketing & amp | 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

This is an accepted solution.

@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
Whats app
Free Website Review and advice for sale from Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO ; Digital Marketing & amp | Site Speed Optimization | Performance Site Audit
4 Likes
Highlighted
New Member
3 0 0

This worked, thanks!

0 Likes
Highlighted
New Member
6 0 0

Hi.

I applied the code as you mentioned but, in the mobile version, the button is underneath the slideshow and the space between the heading, subheading and button is bigger than normal.

Please check:

mobile.PNG

 

I would like it to have the same look of the desktop:

desktop.PNG

Can you please advise how to solve this issue?

Thanks!

Francisco.

0 Likes
Highlighted

Hello @FranciscoSantos,

Can you please share your site url

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
Whats app
Free Website Review and advice for sale from Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO ; Digital Marketing & amp | Site Speed Optimization | Performance Site Audit
0 Likes
Highlighted
New Member
6 0 0

Hello. 

It is solved, thanks!

0 Likes
Tourist
10 0 2

Hello there!

I am having the same problem. I applied the code you share above and it worked for puting the text inside the slider (well seems so, cannot see it completely because it is too big).

The webpage link is https://xn-2i0b75ttzb5vk.myshopify.com/  and the password: whahnt

Thank you so much!

0 Likes
Highlighted

Hello @killa14 

Add this css at the bottom of

Online Store->Theme->Edit code->Assets->theme.scss.liquid

@media screen and (max-width: 769px) {
.hero__adapt-text-wrap.wrapper {
	top: 40%;
	margin: 0;
	}
}
@media screen and (max-width: 600px) {
.hero__adapt-text-wrap.wrapper {
	top: 35%;
	}
}
@media screen and (max-width: 480px) {
.hero__adapt-text-wrap.wrapper {
	top: 30%;
	}
}
@media screen and (max-width: 360px) {
.hero__adapt-text-wrap.wrapper {
	top: 28%;
	font-size: 11px;
}
}

Hope this will work for you.
Thanks!

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
Whats app
Free Website Review and advice for sale from Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO ; Digital Marketing & amp | Site Speed Optimization | Performance Site Audit
0 Likes