Provided I make the browser window wide enough, the following web page
TestLayout.html ( 3.38k )
Number of downloads: 286
displays on the Safari browser (14.0.3) on my iMac (OSX 10.15.7) like this:
but on the Safari browser on my iPhone7 (ios 14.2) it displays like this:
If I rotate the phone sideways to make the window wider, the large buttons and the sliders and their buttons each display on single lines, but the small buttons are still the wrong shape and overlap the second slider.
I can get the buttons and sliders to each display on single lines, with my phone vertical, by adjusting their widths in the script, but the first set of small buttons still overlay the second slider. In all cases on the phone, the shape of the small buttons isn't circular, although in a previous, slightly different version of the page, they did have the correct shape but not the correct position on the phone.
I am a loss to understand what is happening. I previously used px or % sizes, but changed to using vw and vh units, as I thought they were tied to the actual window size and so should display the same on my iMac and iPhone.
I would be grateful for any advice, but should mention that I have a very limited understanding of html and css, and have put this page together from bits and pieces copied from several different code examples on the int
It seems it's the use of vh that screws the pink buttons up. It happens in a desktop browser too, if you shrink the hight of the window. I can get them to look like hyphens. Or rather em dashes, they are pretty long.
Afraid I don't understand why it happens though since you used vh for both width and height. But only their height shrinks. I would have thought that should make them keep their shape.
Thanks for pointing out that the button shape changes in the pc browser, if the window height is reduced. It still doesn't really explain why the small red buttons are displayed much wider than specified, nor why they are misplaced relative to the slider elements. However, I think that what I have to do is to read about html and css for myself and leave this problem until I have a better understanding of how things work. I have found some good online tutorials that should help. Thanks again for your help.
Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)