Debut Theme Image w/ text overlay sizing for mobile

Uniquely-U-Beau
New Member
5 0 0

Hello, I really hope someone could help me with this. I am using the debut theme and I am trying to get the image text overlay to size perfectly on the mobile side like the desktop display ( pictured below ) Ive tried resizes the image and then uploading it to see if it will match perfectly but its not working. If anyone had code or anything that will help that would be greatly appreciated. Thank you! 

This is the desktop version which is perfect. The section height is small. 

This is the way it looks on the desktop which is perfect!This is the way it looks on the desktop which is perfect!

This is how it look on mobile. I drew a line where I want it to stop showing on mobile. 

This is how it looks on mobile. I drew a line to show where I want it to stop showingThis is how it looks on mobile. I drew a line to show where I want it to stop showing

0 Likes
paramSoft
Shopify Partner
1430 233 622

Please provide website url and if your store is password protected then also provide password

Want to customize Shopify storefront? Check the PageFly app
75,000+ Active Shopify merchants. TOP5 best Shopify Apps.

Contact Me On : parambabla.soft@gmail.com
0 Likes
Natztech
Excursionist
90 12 13

please share site url and password so that i can give solution 

Click to expand...
 
Want to theme customize Hire us.
If helpful then please Like and Accept Solution

E-mail :natztech2312@gmail.com
0 Likes
Uniquely-U-Beau
New Member
5 0 0

Thank you for your response 

url : uniquely-u-beauti-supply-llc.myshopify.com

Password: Uniquelyu7$

0 Likes
Natztech
Excursionist
90 12 13

please place this code end of theme.liquid  file

 

@_media only screen and (max-width: 750px)
{
.hero--small {
    height: 50px !important;
}
}

 

Want to theme customize Hire us.
If helpful then please Like and Accept Solution

E-mail :natztech2312@gmail.com
0 Likes
Uniquely-U-Beau
New Member
5 0 0

I received an error when I went to go display it after putting in the code. 

0 Likes
Natztech
Excursionist
90 12 13

 

Please make the  'm' letter of media small.

@_media only screen and (max-width: 750px)
{
.hero--small {
height: 50px !important;
}
}

 

Want to theme customize Hire us.
If helpful then please Like and Accept Solution

E-mail :natztech2312@gmail.com
0 Likes
Uniquely-U-Beau
New Member
5 0 0

It still didn't work for me

0 Likes