Resize 'image with text overlay' for mobile. Debut Theme

Solved
myjerseyposter
Excursionist
31 0 16

Hi all. I am using the 'image with text overlay' section to demonstrate some product features through a photo (see photo below). On desktop it works perfectly, but on mobile the sides get cut off (see photo). Can I resize the photo only on mobile so nothing gets cut off?

Also, I use the 'image with text overlay' many other times on the landing page and hopefully we can fix this specific section and keep the others unchanged. Thank you in advance.

Store URL: https://myjerseyposter.com/

Photos:

desktop

Screen Shot 2020-11-19 at 1.31.49 PM.png

mobile

Screen Shot 2020-11-19 at 1.32.06 PM.png

 

 

KetanKumar
Shopify Partner
16967 1839 6350

This is an accepted solution.

@myjerseyposter 

Thanks for post again

1. Go to Online Store->Theme->Edit code
2. Asset->/theme.scss.liquid->paste below code at the bottom of the file.

@media only screen and (max-width: 749px) {
#shopify-section-1605802304b4a93306 .hero--x-large {
    height: 280px;
}
}

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
myjerseyposter
Excursionist
31 0 16

amazing help again sir. all the best

KetanKumar
Shopify Partner
16967 1839 6350

@myjerseyposter 

Thanks for update and support.

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes
Effielah23
Excursionist
11 0 2

Hello, 

I'm currently having a similar problem on my website as well, the image with text banner won't resize to mobile but when I try the code here to resize it, it actually leaves an unsightly white space between the banner and the header and the rest of the page, on both the mobile and the desktop view. 

KetanKumar
Shopify Partner
16967 1839 6350

@Effielah23 

Sorry for facing this issue, it's my pleasure to help us.

Welcome to the Shopify community!
and Thanks for your Good question.

Please share your site URL,
So I will check and provide a solution here.

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Effielah23
Excursionist
11 0 2
Effielah23
Excursionist
11 0 2
KetanKumar
Shopify Partner
16967 1839 6350

@Effielah23 

thanks for more details. please add this code

1. Go to Online Store->Theme->Edit code
2. Asset->/theme.css ->paste below code at the bottom of the file.
this code apply for after 5 - 6 second

@media only screen and (max-width: 749px) {
#shopify-section-hero-2 .hero--medium {
    height: 90px;
    background-size: contain;
    background-color: #000;
}
}

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Effielah23
Excursionist
11 0 2

Thank you! It worked!