Hero Image Text on Mobile using Brooklyn Theme

Solved
kevin12345
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.

Accepted Solution (1)

Accepted Solutions
oscprofessional
Shopify Partner
9218 1567 1937

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%;
}
}
If helpful then please Like and Accept Solution. Want to Speed up your Shopify Website Guranteed result Whats app
| Hire us
| Expert Site Speed Optimization | Performance Site Audit | Shopify Private App | Custom Theme Development & Modifications any Shopify Theme | Shopify SEO | Digital Marketing
For Quick Chat | Email: pallavi@oscprofessionals.com | Skype : oscprofessionals-87

View solution in original post

Replies 24 (24)
oscprofessional
Shopify Partner
9218 1567 1937

Hello @kevin12345,

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

If helpful then please Like and Accept Solution. Want to Speed up your Shopify Website Guranteed result Whats app
| Hire us
| Expert Site Speed Optimization | Performance Site Audit | Shopify Private App | Custom Theme Development & Modifications any Shopify Theme | Shopify SEO | Digital Marketing
For Quick Chat | Email: pallavi@oscprofessionals.com | Skype : oscprofessionals-87
kevin12345
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.

oscprofessional
Shopify Partner
9218 1567 1937

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%;
}
}
If helpful then please Like and Accept Solution. Want to Speed up your Shopify Website Guranteed result Whats app
| Hire us
| Expert Site Speed Optimization | Performance Site Audit | Shopify Private App | Custom Theme Development & Modifications any Shopify Theme | Shopify SEO | Digital Marketing
For Quick Chat | Email: pallavi@oscprofessionals.com | Skype : oscprofessionals-87

View solution in original post

kevin12345
New Member
3 0 0

This worked, thanks!

FranciscoSantos
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.

oscprofessional
Shopify Partner
9218 1567 1937

Hello @FranciscoSantos,

Can you please share your site url

If helpful then please Like and Accept Solution. Want to Speed up your Shopify Website Guranteed result Whats app
| Hire us
| Expert Site Speed Optimization | Performance Site Audit | Shopify Private App | Custom Theme Development & Modifications any Shopify Theme | Shopify SEO | Digital Marketing
For Quick Chat | Email: pallavi@oscprofessionals.com | Skype : oscprofessionals-87
FranciscoSantos
New Member
6 0 0

Hello. 

It is solved, thanks!

killa14
Tourist
10 0 3

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
Shopify Partner
9218 1567 1937

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!

If helpful then please Like and Accept Solution. Want to Speed up your Shopify Website Guranteed result Whats app
| Hire us
| Expert Site Speed Optimization | Performance Site Audit | Shopify Private App | Custom Theme Development & Modifications any Shopify Theme | Shopify SEO | Digital Marketing
For Quick Chat | Email: pallavi@oscprofessionals.com | Skype : oscprofessionals-87