SOLVED Weird mobile menu breakpoint behaviour
-
-
- Arnaud
- Sr. Rocketeer
- Posts: 233
- Thanks: 3
-
Well… So I deleted ALL my CSS, just to see the result.
I knew it would look ugly, but at least I might see how it behaves when it's all based on your default.
Then I saw that the result was the same with Safari.
So I headed to your online demos and realized your own demos had this problem as well.
I mean issues with the first switch to the mobile menu, on my version of Safari.
I guess this is no big deal, cause noone is supposed to use this mobile menu on a desktop browser.
I might do some tests on tablets this afternoon…
Thank you again for your help !
I'll come back if I get anything interesting during my tests.
-
-
-
- MrT
- Preeminent Rocketeer
- Posts: 101084
- Thanks: 13484
- Web Designer/Developer
-
What version of safari are you using? We don't support safari for windows and we don't support old versions of safari on a mac either.
I still don't get what the issue actually is with the demo? perhaps you could do some screenshots to show me what you mean?
Regards, Mark. - Please search forums before posting. Please make sure your post includes the version of the CMS you are using and a link to the problem. Annotations on screenshots can also be helpful to explain problems/goals. Please use the "secure" tab for confidential information.
-
-
-
- Arnaud
- Sr. Rocketeer
- Posts: 233
- Thanks: 3
-
My version of Safari is 6.2.8 on OSX, which is starting to get old, I agree.
Unfortunately I can't update my OSX system for some compatibilty reasons with some softwares and hardwares I'm using.
So I'm stuck with this version of Safari as well.
Well, I think explanations might be clearer than screen captures (for once).
Let's say I'm testing one of your demos (which I did with Xenon and Callisto) and changing the browser's window width with my mouse.
So that I get either the regular menu or the mobile menu, according to this width.
It's supposed to be some ON/OFF system, right ?
So I think we could see that as some virtual invisible vertical line in the window : on the right of this line, you get the regular menu, and on the left of this line, you get the mobile menu instead.
Are you following me ?
Well, this virtual line would have a width of 0px, since it's an ON/OFF system, OK ?
But in my Safari version, it's like this line would have a width of 15px, what I called "the dark zone", where the mobile menu toggle appears, but without being functionnal : if you click on the toggle (3 bars) the mobile menu won't open and several elements on the page are just jumping or sliding randomly. (that's why a screen capture won't show it).
As I said before, my guess is that this is a problem with the way (my version of) Safari calculates the page width. I think it excludes the vertical scroll bar width (on the right) while my other browsers include it. So there is this "zone" where Safari doesn't know exactly what to do : it makes the toggle appear, but can't calculate the sliding of the mobile menu. Then it acts weirdly.
Then, if you make your window even thiner (15px thiner I think) everything gets back to normal.
Is that a little clearer ? (I swear I tried)
-
-
-
- MrT
- Preeminent Rocketeer
- Posts: 101084
- Thanks: 13484
- Web Designer/Developer
-
We do not suppport Safari 6 for Gantry 5 - please see
http://docs.gantry.org/gantry5/basics/system-requirements#browser-requirements
Regards, Mark. - Please search forums before posting. Please make sure your post includes the version of the CMS you are using and a link to the problem. Annotations on screenshots can also be helpful to explain problems/goals. Please use the "secure" tab for confidential information.
-
-
-
- Luke Douglas
- Hero Rocketeer
- Posts: 322
- Thanks: 15
- Another Old Hack!
-
Mark,
The 'small-mobile-range' works well until you have a mobile phone that has a thinner width such as 21 rem instead of the 30 rem for 'small-mobile-range'. Is there anyway to add an additional breakpoint for smaller width mobile phones, such as 'very-small-mobile-range' with a breakpoint of 21rem?
Thanks.
Luke - Just another old hacker!
-
-
-
- MrT
- Preeminent Rocketeer
- Posts: 101084
- Thanks: 13484
- Web Designer/Developer
-
Luke Douglas - Please don't post in 7 month old solved topics or we might miss your post altogether. It's always better to create a new post of your own.
The small mobile range covers everything up to 30rem wide. Usually that is more that adequate as most mobiles are this wide. If you have some special requirements for specific devices then you can use your own media queries in custom CSS...
@media only all and (min-width: 0rem) and (max-width: 21rem) { ... your CSS goes here ... }
Media queries work like this:
if the viewport size is xxxxx then
use this css
endif
To create a custom CSS compatible with Gantry 5 please read this http://docs.gantry.org/gantry5/tutorials/adding-a-custom-style-sheet .
Remember to recompile CSS from base outline too.
Regards, Mark. - Please search forums before posting. Please make sure your post includes the version of the CMS you are using and a link to the problem. Annotations on screenshots can also be helpful to explain problems/goals. Please use the "secure" tab for confidential information.
-
Time to create page: 0.078 seconds