Please Help! How to adjust mobile version Photos on my Slides to match Desktop

[Jackylou1212]

When viewing on my desktop, the slide photos are fine.

But when I am viewing the website on Mobile version, the photos are zoomed in.

How can I have the same photo view as the desktop?

My Website is : Eleven11BathCo.Com

[suyash1]

@Jackylou1212  I recommend to keep it as it is on mobile, else it will look weird like this

[DaisyVo]

Hi @Jackylou1212 

The original image has a horizontal layout (width greater than height).
On mobile, square images or those with a vertical layout are more suitable, so it can’t be adjusted to match the desktop layout.

If you try to adjust, the image will appear small, like this.

Here’s the code:

@media screen and (max-width: 768px){
.slideshow__media.banner__media.media img {
    height: auto !important;
}
}

Suggestion: Use separate images specifically for mobile.

I hope this helps

Best,

Daisy

[Jackylou1212]

What size photo would you recommend would I need to adjust photo for the mobile view?

[DaisyVo]

HI @Jackylou1212 

For the mobile logo, it’s best to choose an image with a width of 450px.

As for the height, aim for a dimension between 450px and 900px for a visually appealing result

Best,

Daisy