Image with text overlay doesn't resize properly on mobile Solved

Highlighted
Excursionist
14 0 2

@dmwwebartisan wrote:

Hi @Shaunmihikids 

Try to add following css in your assets/theme.scss.liquid file

 

@media only screen and (max-width: 749px){
h2, .h2 {font-size: 1.5625em !important;}
.hero__inner {padding: 15% 0 0 0 !important;}
}

Hope this will work for you.

Thanks!


Thanks so much for this fix, I really appreciate it. I changed the padding and it appears to fit in well. One small question - would it be possible to move the second section down a little (on mobile only), so that it doesn't feel so cramped. I've attached a photo to show you what I mean. 

Cheers


Shaun

 

mobile image 2.PNG

0 Likes
Highlighted
Shopify Partner
2242 488 630

please accept solution and thank for message

 

 

If helpful then please Like and Accept Solution.
Do you need custom changes on store ? Hire me.
Feel free to Contact me on dmw.webartisan@gmail.com
Follow us on Instagram @dmw.webartisan
1 Like
Highlighted
Shopify Partner
2242 488 630

Hi @Shaunmihikids 

Try to add following css in your assets/theme.scss.liquid file

@media only screen and (max-width: 749px){
.custom__item {margin-top: 40px;}
}

Hope this will work for you.

 

Please do like and accept as solution. That will cost of our time :)

Thanks!

 

If helpful then please Like and Accept Solution.
Do you need custom changes on store ? Hire me.
Feel free to Contact me on dmw.webartisan@gmail.com
Follow us on Instagram @dmw.webartisan
1 Like
Highlighted
Excursionist
14 0 2

@dmwwebartisan wrote:

Hi @Shaunmihikids 

Try to add following css in your assets/theme.scss.liquid file

@media only screen and (max-width: 749px){
.custom__item {margin-top: 40px;}
}

Hope this will work for you.

 

Please do like and accept as solution. That will cost of our time :)

Thanks!

 


Amazing, thanks so much. :)

0 Likes
Highlighted
Shopify Partner
2242 488 630

Hi @Shaunmihikids 

Please Accept as solution. This will cost of our time. :)

Thanks!

If helpful then please Like and Accept Solution.
Do you need custom changes on store ? Hire me.
Feel free to Contact me on dmw.webartisan@gmail.com
Follow us on Instagram @dmw.webartisan
0 Likes
Highlighted
Tourist
9 0 1

Hi there, it is a little bit better now, but the image still gets cut off slightly. Is there any way to change this?

 

Also is it possible to make the font size for this section to be smaller on mobile? I have attached the picture for your reference after adding this codescreenshot_280.png

0 Likes
Highlighted
Shopify Partner
2242 488 630

Hi

Try to add following css in your assets/theme.scss.liquid file

 

.hero {background-size: 100% 100% !important; background-position: 50% 50% !important;}

Hope this will work for you.

Thanks!

If helpful then please Like and Accept Solution.
Do you need custom changes on store ? Hire me.
Feel free to Contact me on dmw.webartisan@gmail.com
Follow us on Instagram @dmw.webartisan
0 Likes
Highlighted
Tourist
9 0 1

Hi sorry it did not work, after adding the code, it looks like this:

screenshot_282.png

0 Likes