How to change background image size for mobile view, without changing desktop view settings

Solved
VertaL1fe
Tourist
10 0 1

 

Hi there,

I am having some trouble with making changes to my website on the debut theme. I have my background image at a perfect size on the desktop view, however once I click the mobile view, the image is enlarged and cuts 75% of the original. I would like to make it so that image/background fits perfectly on the mobile view, without adjusting the settings on the desktop view. 

Any help would be great! Thanks! 

0 Likes
Pallavi
Shopify Expert
2239 370 486

Hello @VertaL1fe ,

Please share your store URL and Password.
So that I will check and let you know the exact solution here.

Want to modify or develop new app, Hire us.
If helpful then please Like and Accept Solution .
Email: support@zestard.com
Shopify Apps URL :- https://apps.shopify.com/partners/zestard-technologies
Custom Modifications Into Shopify Theme | Shopify Private App | SEO & Digital Marketing
0 Likes
VertaL1fe
Tourist
10 0 1

 

Hi,

website: vertalife.com

password: Shadowkob1

 

Pallavi
Shopify Expert
2239 370 486

This is an accepted solution.

Hello There,

1. In your Shopify Admin go to online store > themes > actions > edit code
2. Find Asset >theme.scss.css and paste this at the bottom of the file:

@media screen and (max-width: 749px){
div#Hero-hero-1 {
height: 71vw;
}

div#Hero-hero-2 {
height: 72vw;
}

.image-bar--medium .image-bar__content, .image-bar--medium .image-bar__item {
height: 66vw;
}
}
Want to modify or develop new app, Hire us.
If helpful then please Like and Accept Solution .
Email: support@zestard.com
Shopify Apps URL :- https://apps.shopify.com/partners/zestard-technologies
Custom Modifications Into Shopify Theme | Shopify Private App | SEO & Digital Marketing
0 Likes
Pallavi
Shopify Expert
2239 370 486

This is an accepted solution.

Thank you for your response. It's good to know that it's worked for you. Kindly feel free to get back to me if you need any further assistance.

Want to modify or develop new app, Hire us.
If helpful then please Like and Accept Solution .
Email: support@zestard.com
Shopify Apps URL :- https://apps.shopify.com/partners/zestard-technologies
Custom Modifications Into Shopify Theme | Shopify Private App | SEO & Digital Marketing
0 Likes