JQuery and CSS Flex Code for Responsive Forum Home Page

So far, I have completed making the home page more responsive (except for the forum stats at the top and the WOL box at the bottom, they still use scroll bars).

For full screen use the link below and set your YT resolution to 1080p60 HD

https://youtu.be/xevV3_iZ8-s

Here is the jQuery code I wrote to make the forumhome table more responsive using CSS Flex:

<script>
    jQuery(document).ready(function () {
        jQuery('[class^="forumhome_forumbit_level"]').
            css({
                "display": "flex", "flex-flow": "row wrap",
                "justify-content": "space-between",
                "flex-direction": "row", "align-content": "stretch",
                "margin": "0px", "padding": "0px"
            });
        jQuery('[class^="forumhome_forumbit_level"]').closest("div").
            css({ "overflow": "visible" });
        jQuery('[class^="forumhome_forumbit_level"]').find("td").
            css({
                "align-self": "stretch",
                "flex-grow": "1", "width": "300"
            });
        jQuery('[class^="forumhome_forumbit_level"]').find(".neo-forumhome-status").
            css({
                "flex-grow": "1", "width": "80"
            });
        jQuery('[class^="forumhome_forumbit_level"]').find(".neo-forumhome-status-icon").
            css({
                "flex-grow": "1", "width": "60"
            });
        jQuery('[class^="forumhome_forumbit_level"]').find(".neo-forumhome-postinfo").
            css({
                "flex-grow": "20"
            });
        jQuery('[class^="forumhome_forumbit_level"]').find(".neo-forumhome-desc").
            css({
                "flex-grow": "20"
            });
        jQuery('.neo-forumhome-div').find("tbody").
            css({
                "margin": "0px", "padding": "0px",
                "border-style": "none", "border-width": "0px"
            });
        $(window).on('resize', neoAdjustForums);
        neoAdjustForums();
        function neoAdjustForums() {
            var widthNow = $(window).width();
            if (widthNow < 900) {
                $(".forumhome_forumbit_level_thead").hide();

            }
            else {
                $(".forumhome_forumbit_level_thead").show();
            }
            if (widthNow < 810) {
                $(".neo-forumhome-status-icon").hide();
            }
            else {
                $(".neo-forumhome-status-icon").show();
            }
            if (widthNow < 550) {
                $(".neo-forumhome-postinfo, .neo-forumhome-subforums").hide();
            }
            else {
                $(".neo-forumhome-postinfo, .neo-forumhome-subforums").show();
            }
            if (widthNow < 575) {
                $(".neo-forumbit-viewing").hide();
            }
            else {
                $(".neo-forumbit-viewing").show();
            }
        }
    });
</script>

Please post comments or suggestions on this here. Thanks.

Update:

Responsive CSS Flexbox is now working on the forum home page and the forum display pages.

Hopefully, this adds value to everyone.

If not please post back and complain and let us know!

Next, I will get this working for search results and thread views for the lists of threads and and discussions.

For those who don't like responsive and prefer the old fashioned unresponsive horizontal scrollbars, if enough people comment (I cannot imagine anyone prefers horizontal scrollbars over a responsive website) I will add a UserCP switch for uses to turn off.

However, recommend you give responsive a try and move away from 10 year old web technologies.

Better we make "responsive better" versus depending on horizontal scrollbars and 10 year old table overflow technology when we can be responsive and change the view based on the width of the screen.