I have 2 elements (We can use the elements with the classes “nav” and “nav-tablet” for example) that have the exact same styles, but the “nav-tablet” element doesn’t display the same way on tablet view.
When I change the flexbox settings, nothing happens even after trying all possible combinations.
Am I doing something wrong? Or does flexbox not work on tablets/mobile?
Hi @TriceWD, I would suggest on the nav tablet, to set the process-container, portfolio-container and contact-container in the nav-tablet div, on tablet view and lower, to float left.
I am still checking on this with the flexbox styling…
I got it to work with floats, but I’m getting confused because some elements are messing up like this on the tablet view, but others are still behaving correctly.
Thanks a lot for looking into this, it’s much appreciated!
I found the way to fix it and kinda found the reason why it wasn’t working. To me it feels like a bug, but @cyberdave may correct me.
When you are applying display: flex option to some element starting NOT at the desktop view, for some reason, its children do not get flex child settings to themselves.
So, all you need to do, @TriceWD, is make “nav-tablet” element display: flex on the desktop view. Since you “hide” this element by using “inline” settings (on the settings panel) it will not affect the design on the desktop. But will fix the issue on the tablet view.
I wanted to look at the flex-child settings on the tablet view and check if there is everything correct and found out that it wasn’t available. So I moved to the desktop view and start to compare settings for the nav and all its “children” and nav-tablet and its children. Aaaand… found this difference. When I set nav-tablet display:flex on desktop suddenly everything became correct.