.x-root {min-height:100vh} is pushing down content on my sites

[aaronschmidt]

I just updated to the recent version of Pro, and I guess there’s some new CSS (or I had edited it out before!) that is causing a problem on some of my sites. .x-root {min-height:100vh;} is doing this and it is found in renew.css

You can see how it puts content below the fold here: https://richmond.prefabpower.com

Any idea why this is happening? Does it have something to do with how I’ve constructed the pages?

I’ve temporarily fixed this on other sites by including .x-root {min-height:0px;} on them in their global CSS.

I’ve also created a child theme and included .x-root {min-height:0px;} that in style.css.

I can convert other sites to this child theme, but it seems odd to me that this is happening. And also, I don’t know that my solution won’t cause problems in other ways.

Thanks!

[ruenel]

Hello @aaronschmidt,

Thanks for writing in! I have inspected your site and I am sure that you have inserted broken HTML code which has messed up the page layout. I just could not figure out whether in the header, content or in the footer. If you can provide us you WP access that would be great. You can create a secure note in your next reply with the following info:
– Link to your site
– WP login URL
– WP username
– WP password
– WP Administrator Role
– Confirmation that we can access and make changes to your site

To know how to create a secure note, please check this out: How The Forum Works

Best Regards.

[ruenel]

Hey @aaronschmidt,

Just as I suspected, you have inserted this broken HTML:

<div class="search-buttons">
    <div class="radio-btn">
        <label>
            <input type="radio" name="search-type-1" value="catalog" checked>catalog
        </label>
    </div>

    <div class="radio-btn">
        <label>
            <input type="radio" name="search-type-1" value="site"> website
        </label>
    </div>


    <form method="get" id="searchform-1" class="form-search" action="https://richmond.prefabpower.com/">
        <label for="s-1" class="visually-hidden">Search</label>
        <input type="text" id="s-1" class="search-query" name="s" placeholder="Search"/>
    </form>
</div>         

<script>
    jQuery(function($) {
    $('#searchform-1').on('submit', function() {
    if ($("input[name='search-type-1'][value='catalog']").is(':checked')) {
    var searchTerm = $('#s-1').val();
    var searchURL = "https://vcc-rap.primo.exlibrisgroup.com/discovery/search?vid=01VCC_RAP:RCC&tab=rcpl&offset=0&query=any,contains," + searchTerm;
    window.location.href = searchURL;
    console.log($("input[value='catalog']").is(':checked'));
    console.log(searchURL);

    return false;

    }
    })
    });
</script>

</div>
</div>

You may need to remove the last occurrence of the </div> in the code above.

Be advised that custom coding is beyond the scope of our support under our Support Policy. If you are unfamiliar with code and resolving potential conflicts, you may select our One service for further assistance.

Best Regards.