ACA mobile jQuery experiment

script.js

// Add in Default.master file-- also see changes in Google Sheet
<script type="text/javascript">
    $(function () {
        $('font').attr('size', '')
        $('span').css('line-height', 'unset')
            .css('font-size', 'unset')

        $('theForm')
            .css('height', '100vh')
            .css('letter-spacing', '0.12em')

        $('.aca_wrapper')
            .css('padding-left', '0px')
            .css('padding', '2%')

        $('.aca_wrapper div').first()
            .css('width', '100%')

        var navbar = $('.ACA_NaviTitle')
            .css('width', '100%')
            .css('margin-left', '')
            .css('font-size', '1.5em')

        $('.ACA_NavBanner')
            .css('width', '100%')

        $('.ACA_RegisterLogin')
            .css('float', 'none')
            .css('text-align', 'right')
            .css('padding', '0 0 2% 0')

        $('.ACA_Content')
            .css('width', '100%')
            .css('margin-left', '')
            .css('box-shadow', 'unset')
            .css('border', 'unset')
            .css('-webkit-box-shadow', 'unset')

        $('.container_40')
            .css('width', '100%')
            .css('padding', '1%')

        $('#divSearchPaneltoPressEnter, #nav_parent_container, #nav_link_place_holder')
            .css('font-size', '1.5rem')

        var searchContainer = $('#gsContainer')
        $('.gs_container')
            .css('width', 'unset')
            .css('float', 'unset')
            .css('text-align', 'left')
            .css('padding-top', '1rem')

        $('table.gs_top_table').css('display', 'none')
        var searchBox = $('input.gs_search_box')
            .css('border', '1px solid gray')
        var searchButton = $('a#btnSearch')
        var searchHistory = $('a#btnSearchHistory').css('display', 'none')
        searchContainer.append(searchBox).append(searchButton)

        $('.ACA_RegisterLogin').append(searchContainer)

        var welcomePage = $('.ACA_Content.welcome-page')
        var permPlanServ = $('table.ACA_Welcome_Block tbody td').has('div')
        var permitsThing = permPlanServ.find('.Header_h2')[0]

        if (permitsThing && permitsThing.innerText === 'Permits') {
            $('div.ACA_LoginBox div.ACA_TabRow table').css('width', '100%')
            var loginPermitTrs = welcomePage.children().first().find('tr').first().children()
            var loginBox = loginPermitTrs.last().children().first().attr('class', '')
            $('.ACA_LoginBox').css('margin', '0 auto').css('padding', '2.5% 10% 3.5% 10%')
                .css('background-color', 'none')

            var mobileFriendlyDiv = $(document.createElement('div'))
                .attr('id', 'avl-mobile-friendly')
                .css('text-align', 'center')
                .css('font-size', '1.75rem')

            mobileFriendlyDiv.append(loginBox)


            $.each(permPlanServ, function(index, value) {
                mobileFriendlyDiv.append('<br>')
                var permPlanServDiv = $(document.createElement('div'))
                    .css('display', 'inline-block')
                    .css('width', '22em')
                    .css('padding', '1% 10%')
                    .css('background-color', '#e7f6fd')
                permPlanServDiv.html(value.innerHTML)
                mobileFriendlyDiv.append(permPlanServDiv)
            })

            welcomePage.html('').append(mobileFriendlyDiv)
        }
    });
</script>