Phase III: CSS Flexbox Upgrades

What is on Your Mind?
1

On my never ending quest to get rid of table tags and make the site responsive for all device sizes, I plan to use CSS Flexbox with jQuery.

I tried using Bootstrap Flex and CSS Grids, but none of these worked as easy and clean as CSS Flexbox.

For example, today I changed the top header area (forum name and member avatar area at the very top of the each page) to be responsive (see YT video below or go to YT link directly).

<style>
    .flex-container-header {
        display: flex;
        flex-wrap: wrap;
        align-items: stretch;
        justify-content: space-between;
    }
</style>
<script>
    $(document).ready(function () {
        $(window).on('resize', neoAdjustFlex);
        neoAdjustFlex();
        function neoAdjustFlex() {
            if ($(window).width() < 500) {
                $(".flex-container-header").css({ "justify-content": "space-around" });
            }
            else {
                $(".flex-container-header").css({ "justify-content": "space-between" });
            }
        }
    });
</script>

I plan to do this with the menus and then on to other forum views like search results, thread and discussion views, member lists, etc.

https://www.youtube.com/watch?v=9nrue8l9oIo

Or watch the vid here: