Proportional Images to laptop and desktop

[justinfleet9]

@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. 

[justinfleet9]

My site url is https://the-l-e-dog-collar.myshopify.com/

[dmwwebartisan]

@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!

[justinfleet9]

@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! 🙂

[dmwwebartisan]

@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!

[justinfleet9]

@dmwwebartisan Hi, it popped up with an error code and gave me this message

Again thank you for the help it means the most.

[dmwwebartisan]

@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;}
}

[justinfleet9]

@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.

[dmwwebartisan]

@justinfleet9 

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

Thanks!

[paleio48]

The issue you shared here is an  error of the page because I faced this type of problem in my websitepage and then istalled a plugin for it.