Streaming live at 10am (PST)

Having trouble with Flexbox styling on tablet view


#1

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?

SHARE LINK: https://preview.webflow.com/preview/jbportfolio?preview=e2bdfd20d74ad8354236f44e2ab08544


#2

Anyone know what's going on?


#3

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


#4

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!


#5

Just an example:

The "menu-bars" in the "menu-icon-container" elements evenly space out the bars on desktop... but not on tablet.


#6

Thanks @TriceWD, thanks so much, I am continuing to check on this..... I promise to update you as I have some info.


#7

Much appreciated!

I'll use floats for now :stuck_out_tongue:


#8

Hello, guys.

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.

Cheers,
Anna


#9

May I ask your method on how you figured that out?

What made you try that?


#10

:slightly_smiling: ... Maaaagic :laughing: Joke :stuck_out_tongue:

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. :slightly_smiling:


#11

Very insightful :smiley:

Much appreciated as always!


#12

I've tried your solution and it kind of worked.

When I hide the "nav-tablet" element from the desktop view using the settings panel, I'm getting the same error.

Hiding it on the desktop using display:none however fixes the issue.

Odd...


#13

:confused: Definitely odd. I told you the process I used... But as long as it fixed the design issue, who care? :smiley: :sunglasses:


#14

There's nothing wrong with your process, I just think it's weird how this behaves in the Webflow editor. :slightly_smiling:


#15

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.