The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> Layout compatibility on iMac and iPhone browsers
HAJM
post Mar 2 2021, 12:32 PM
Post #1





Group: Members
Posts: 6
Joined: 17-February 21
Member No.: 27,804



Provided I make the browser window wide enough, the following web page

Attached File  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:

Attached Image

but on the Safari browser on my iPhone7 (ios 14.2) it displays like this:

Attached Image

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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Mar 2 2021, 03:20 PM
Post #2


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



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. wink.gif

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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
HAJM
post Mar 4 2021, 11:05 AM
Post #3





Group: Members
Posts: 6
Joined: 17-February 21
Member No.: 27,804



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.

User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
2 User(s) are reading this topic (2 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 28th March 2024 - 10:32 AM