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

Solved
Highlighted
Excursionist
16 0 11

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

 

 

1 Like
Highlighted
Shopify Partner
9227 1178 3243

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
1 Like
Highlighted
Excursionist
16 0 11

amazing help again sir. all the best

1 Like
Highlighted
Shopify Partner
9227 1178 3243

@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