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
@Jackylou1212 I recommend to keep it as it is on mobile, else it will look weird like this
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
What size photo would you recommend would I need to adjust photo for the mobile view?
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