Proportional Images to laptop and desktop

Highlighted
Tourist
18 0 3

@oscprofessional @KetanKumar @dmwwebartisan Hi, I know you guys are all great people to ask for this issue, and I need help fixing my homepage of my website, the image with text overlay box is the main image on my website homepage. When I enter in my image that is 2048x1024, it looks perfect on my desktop, but when my friend goes to the website on his laptop the image gets cropped and the words are not on his screen. The same goes for mobile and I would like it to be proportional for all three and show the same image whole on any screen size. Thanks for the help! I have been working on this for hours and I really appreciate it. 

0 Likes
Highlighted
Tourist
18 0 3
Highlighted
Shopify Partner
3237 711 860

@justinfleet9 

I checked your website on small screens, there is a problem. I think you designed for bigger screens. I will check and get back to you if any easy solution for this. I think we have to work on devices using media queries.

Let you know.

 

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
18 0 3

@dmwwebartisan  Hi, thank you for getting back to me, I haven't been able to get any help recently and this will help me out a ton. My issue is just that the big banners on the home page with the dog's don't resize proportionally on smaller screens, it just crops the image to fit the width of the screen. Thank you for helping me out and let me know if there is a fix!

Highlighted
Shopify Partner
3237 711 860

@justinfleet9 

Please add the following code at the bottom of your assets/theme.scss.liquid code.

@media only screen and (max-width: 749px){
.hero--x-large { height: height: 177px !important;}
}

@media only screen and (min-width: 750px){
.hero--x-large { height: 582px !important;}
}

Hope this helps. Check on your big screens too, if that is fine.

 

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
18 0 3

@dmwwebartisan Hi, it popped up with an error code and gave me this messageThe Illuminight Collar - Customize Debut - Shopify 11-12-2020 11-35-50 PM.png

Again thank you for the help it means the most.

0 Likes
Highlighted
Shopify Partner
3237 711 860

@justinfleet9 

Sorry that was my mistake. This is the correct one.

@media only screen and (max-width: 749px){
.hero--x-large { height: 177px !important;}
}

@media only screen and (min-width: 750px){
.hero--x-large { height: 582px !important;}
}

 

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
18 0 3

@dmwwebartisan Yes!!! Thank you sooo much it looks a ton better on mobile already! Does this also fix the issue for the smaller screens on laptops? I don't have my friends near me to try it with their laptops. Sorry for the late response. The mobile looks great.

Highlighted
Shopify Partner
3237 711 860

@justinfleet9 

Yes, It should work for all small screens mobile, laptop etc.

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