Hero Image Text on Mobile using Brooklyn Theme

[kevin12345]

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.

[oscprofessional]

Hello @kevin12345,

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

[kevin12345]

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

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

Thanks.

[oscprofessional · 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%;
}
}

[kevin12345]

This worked, thanks!

[FranciscoSantos]

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:

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

Can you please advise how to solve this issue?

Thanks!

Francisco.

[oscprofessional]

Hello @FranciscoSantos,

Can you please share your site url

[FranciscoSantos]

Hello. 

It is solved, thanks!

[killa14]

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!

[oscprofessional]

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!