I am currently designing and building a website in html and css, and have ran into a small issue. I checked responsiveness using the chrome dev tools (sizing the window to phone and tablet sizes), and everything looked fine. However now that I checked the site on my iPhone X, the images are all stretched out vertically. I have tried multiple things but none worked.
This is the way it looks in the chrome dev tools, with the iPhone X option selected, and with the screen set to the actual safari frame size (375, 632):
And here is a screenshot of what it actually looks like on my phone:
This is the html layout of the frame:
<h1>Your 10 most watched series</h1>
<section class="series-image-list">
<img src="..." alt="...">
<img src="..." alt="...">
</section>
And this is the corresponding css:
.series-image-list {
position: relative;
width: 100vw;
display: flex;
overflow-x: scroll;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
scroll-snap-type: x mandatory;
margin-right: 50px;
}
.series-image-list img {
width: 35vh;
height: auto;
margin: 0;
margin-left: 25px;
margin-top: 20px;
margin-bottom: 20px;
transition: all .2s ease-in-out;
}
Any help as to why the images are stretched out vertically would be greatly appreciated!
