FlexBox CSS HTML5

[henihan]

I am working on a site and it is set to be Responsive with small screens as the basis and then expand to columns after 40em. I have 2 issues that are driving me crazy.

First is that the FlexBox height is not working across the 3 columns.
Secondly, the responsiveness of FlexBox is working on software emulators or if you make your browser window smaller but when you actually go to the website on the phone, you get 3 columns.

Here’s a demo to FlexBox code – https://gist.github.com/anonymous/4c03c18f37cf3951a0a7

and here’s a link to the test area – http://stepknows.server311.com/testarea/ – with the other bells and whistles

Any help would be greatly appreciated.

Thanks
Steph

[Paulie_D]

and here’s a link to the test area –

It would be easier if you put this into a Codepen.io example.

We hate having to debug by using Developer Tools.

[nixnerd]

Yeah, please make a Codepen. I’ve been working A LOT with flexbox the last few days… so I might be able to help you.

[henihan]

Heh guys,
Thanks much. I did earlier but excuse my ignorance but the only way to share was by creating a Gist and/or downloading a .zip or signing up for Pro version

In my stress, am I missing something ?

[henihan]

http://codepen.io/anon/pen/iJIsk

This does work I just tested.

Ok so when I copy the link into Codepen it works great.

http://codepen.io/anon/pen/iJIsk

But I’m still having some issues namely FlexBox height is no longer working aarrrgghhhh
Plus when you check it on a physical mobile device it does not reduce to 1 column but on software emulators it does and also on minimizing the screen

Thanks for taking a look
Kathy

[Paulie_D]

Obviously, something is not working with your Codepens because they aren’t getting saved.

[henihan]

Okay – stress has been reduced.

Heres my Codepen (I swear sometimes it’ just one of those kind of weeks !)

http://codepen.io/henihan/pen/adfum

Sorry about all the confusion

So again my issue is two fold:
Column heights are not the same
When you minimize the browser or use mobile emulators the site is one column wide on mobile devices (< 40ems), which is what I want but when you actually use a mobile device – then its the same as you see on a bigger device. – 3 columns wide

I am sure I am missing something completely obvious but I cant see it so any help would be appreciated.

sorry for the confusion with my codepen

Thanking you in advance
Steph

[Author]

Posts