Image slider on my website is not responsive on certain iPhone models

1

Hello everyone!

I created what I thought was a simple, temporary personal site while I finish wireframing what I want my “real” site to look like. I have finished a course on website development I started in January but I feel I still have a looong way to go. This is the website: https://esarin.design

And its code is here: https://github.com/esarin7/elena-website-temp

I showed some of my friends my website but a few of them told me of issues they’ve been having. Those on iPhones 7 and 8 (some used Safari, others Chrome) see a gap between the image slider that looks like this:

iphone7
iphone7750×1334 122 KB

Some other friends have told me that on their phones, the photo slider takes over half of their screen.

I don’t understand what is happening and would immensely appreciate your support. I thank you in advance for your understanding and patience.

2

Your problem is a large image scaling down to fit on a phone. The image has too much height even when scaled down. You need to resize or crop your image. Whichever keeps the attention on the subject while giving you less height in the finished image.
BTW

section div.imagesection {
    height: 70vw;
  }

  section #fullimage {
    height: 70vw;
  }

  section #fullimage-2 {
    height: 70vw;
  }

Shouldn’t that be 70vh because your specifying height?
I didn’t notice on desktop except for the Colombian statue, since I know what it’s supposed to look like, you’re distorting your images to fill the space. Because you’re dividing the viewport in two, the parent width and the viewport height are a big difference in measurement.

width: 100%;
height: 100vh;
3

Thanks you for replying, really appreciate it, I’m still very new at this. I used vw instead of vh because I thought that for the mobile view, by using “vw” I’d avoid that space between the image and the right margin, which seems to appear regardless when using some devices.

Most of the photos were shot horizontally, except the one of Botero’s park, which was shot vertically. I don’t know how to eliminate the distortion as it seems it happens regardless of the width I set. What would you suggest?

4

You used a width and height where the two create a ratio different than the one of the image to which you linked.

Method one: Two different pictures
If the original has a lot more pixels, you can try cropping a tall rectangle out of the center for desktop since small screens get something more square. For a slider, people try to edit pictures so that they have the same height even though some pictures will have gaps because they’re a different size. Those with gaps will need a background.

Method two: Only set one dimension on an img so the browser scales it maintaining the original ratio. When one sets two dimensions one has to make sure that one is maintaining the original ratio or it stretches. I don’t think you’ll fill the entire vertical space this way.

Images require more work in responsive design. Maybe the person who grades your work doesn’t know Colombian art and you can leave it.

5

Thanks for your feedback, appreciate it.