Mobile broser address bar - Post ID...

User 116462 Photo


Registered User
129 posts

Hi,
I am running into a little problem with the unpredictable behaviour of mobile browser address bar. To my surprise the viewport height does not seem to take the address bar into account, with the result that part of my page is hidden and no scroll bars are present.

It can be seen on my page, if you put your phone into landscape mode. I tried with the latest FF that does not seem to autohide the address bar..
https://www.artinso.com/orphelion_testing/

Is there any trick/hack to design around that issue?

Regards
Berthold
Berthold, Spain
Astronomy site: http://www.astronomy.artinso.com
Musical events: http://www.orphelion-ensemble.com
ED V4, SD V5
User 122279 Photo


Senior Advisor
14,461 posts
Online Now

Is it the menu where you cannot see all the items? (sorry, my mobile phone just ran out of power and needs to be recharged before I can take a look).
Ha en riktig god dag!
Inger, Norway

My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com


User 116462 Photo


Registered User
129 posts

Inger wrote:
Is it the menu where you cannot see all the items? (sorry, my mobile phone just ran out of power and needs to be recharged before I can take a look).


No rush!
No, at the bottom of the main landing page, I have some text and a button that opens a text panel. On my phone that is hidden by the address bar in landscape mode (I have the address bar down).
Now that you mention it, I'll try to see the effect with the address bar on top.
Berthold, Spain
Astronomy site: http://www.astronomy.artinso.com
Musical events: http://www.orphelion-ensemble.com
ED V4, SD V5
User 116462 Photo


Registered User
129 posts

This seems to be a FireFox bug.
With the address bar on top it is even worse, as it messes with my fixed positioned footer and breaks the function of browsing to the additional content
Berthold, Spain
Astronomy site: http://www.astronomy.artinso.com
Musical events: http://www.orphelion-ensemble.com
ED V4, SD V5
User 122279 Photo


Senior Advisor
14,461 posts
Online Now

My mobile phone is an iPhone 6, and it has recharged now ;) . When I view your site in landscape orientation, I'm able to see that wee downwards button and click on it. I can also scroll the page with my fingers, so I can reach everywhere, also in portrait orientation. I'm using Safari as my browser, I don't know if it is different in Ffx. Someone else may perhaps chime in and tell you.

Another thing is, that fixed positioned elements, like header, navbar and footer often take up too much space on small viewports. I usually let the fixed positioning kick in for middle sized devices and up. Having said that, there is nothing which is not working for me on your site, as long as I don't use my fingers to make the contents display larger. It is well built, and if this was your first attempt with SD, then well done!
Ha en riktig god dag!
Inger, Norway

My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com


User 187934 Photo


Senior Advisor
20,193 posts
Online Now

I would allow the slider to scroll
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.

This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
User 116462 Photo


Registered User
129 posts

Eric Rohloff wrote:
I would allow the slider to scroll


Hi Eric,
I am not sure that I understand what you are referring to. The problem is not the size of the Orbit slider. I limit Orbit via Vmin and Vh to certain dimensions at breakpoints to allow the other elements to flow in the remaining space.
The problem is that the latest Firefox does not remove the address bar anymore. It stays fixed and won't go away. However, for some reasons the developers decided to not account for the address bar in terms of viewport height and just overlay it on the screen. In consequence, as far as my website code is concerned, the address bar does not exist and viewport height is the full screen...

Regards
Berthold, Spain
Astronomy site: http://www.astronomy.artinso.com
Musical events: http://www.orphelion-ensemble.com
ED V4, SD V5
User 116462 Photo


Registered User
129 posts

Addendum:
I just found this, which might be a solution
https://allthingssmitty.com/2020/05/11/css-fix-for-100vh-in-mobile-webkit/

What is the best way to instruct SD to use this?

Regards
Berthold, Spain
Astronomy site: http://www.astronomy.artinso.com
Musical events: http://www.orphelion-ensemble.com
ED V4, SD V5
User 116462 Photo


Registered User
129 posts

Inger wrote:
Another thing is, that fixed positioned elements, like header, navbar and footer often take up too much space on small viewports. I usually let the fixed positioning kick in for middle sized devices and up. Having said that, there is nothing which is not working for me on your site, as long as I don't use my fingers to make the contents display larger. It is well built, and if this was your first attempt with SD, then well done!


Thanks Inger!
This is a rework of a site that I started with RSD2 a few years back.
I started my first website with Geocities back in 1996 with Allaire Homesite and later Topstyle when CSS came along. A few years CoffeeCup software and then several years Dreamweaver with an online shopping site and finally back to the roots with Coffecup software in 2016..
However, since I always work in intervalls with several years of nothingness in between, it always feels like starting from square one... So it seems that I never passed the beginners stage.:D

Great idea to reduce the NavBar for small screens! That possibility somehow escaped my attention.

Regards
Berthold, Spain
Astronomy site: http://www.astronomy.artinso.com
Musical events: http://www.orphelion-ensemble.com
ED V4, SD V5
User 116462 Photo


Registered User
129 posts

Beastro wrote:

What is the best way to instruct SD to use this?

Regards


Disregard that question. It is of course the page manage item.
Berthold, Spain
Astronomy site: http://www.astronomy.artinso.com
Musical events: http://www.orphelion-ensemble.com
ED V4, SD V5

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.