https://codepen.io/Redcaus12345/pen/wBwLqxm
Hi, I'm working on a slideshow using JavaScript that should also work on iPads and Phones, but I'm having trouble with the mobile display. Do you know how I can code it to function properly on these devices? Any tips would be appreciated!
5 Replies
I don't know exactly what your slideshow looks like... You didnt really provide any screenshots or code or anything, but, i would recommend setting a max-width on the slideshow container or use width with the min() function. Then set the images to a width of 100%, then set an aspect-ratio on the images so they all have the same size, then use object-fit:cover; on the images so that they are cropped to prevent any stretching.
Something like this:
https://codepen.io/tok124/pen/dPbBZbj
In the pen above, i have taken random pictures from google so they all have different sizes but they all appear to have the same size thanks to aspect-ratio and object-fit:cover;
And i have stacked all images on top of each other using grid
Or sorry... lol, i am so dumb, the codepen is in the title... 😂
but yeah you have used fixed widths and stuff and thats why it is not responsive
also your HTML is kinda hard to read because it is not formated properly, it should look like this
But you can see the responsiveness here
No problem but thank you so much 🙏🙏
No problem 🙂