The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS FlexBox CSS HTML5

  • This topic is empty.
Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
  • #173475

    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 –

    and here’s a link to the test area – – with the other bells and whistles

    Any help would be greatly appreciated.



    and here’s a link to the test area –

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

    We hate having to debug by using Developer Tools.


    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.


    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 ?


    This does work I just tested.

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

    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


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


    Okay – stress has been reduced.

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

    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

Viewing 7 posts - 1 through 7 (of 7 total)
  • The forum ‘CSS’ is closed to new topics and replies.