Sidebar disappears at bottom of page on mobile view

[csstrijax]

website: drgoodvet.com

On every page except for the homepage, the left sidebar disappears to the bottom of the page during a mobile view (decreased browser width). I can’t figure out why!

I removed the background of the sidebar as it overlayed the main content of any page other than the homepage.

I’m not the developer of the website, but the CSS for the page is below:

 .content-wrap #content-wrap-inner .sidebar {
    
        display: block !important;
    
        float: left;
    
        width: 240px !important;
    
        position: absolute;
    
        left: 0;
    
        font-size: 9px !important;
    
    }
    
    .sidebar {
        position:relative!important;
        display:block;
        float:none!important;
        min-width:240px!important;
        top:0px!important;
        width:300px!important;
        margin-left:auto!important;
        margin-right:auto!important;
    
    }
    
    .sidebar-shadow {
        postion:relative!important;
        float:none!important;
        max-height:650px!important;
    }
    
     .sidebar.border .sidebar-shadow.mid {
    
        /*background:#e6d9c4; */
    
        border-radius: 10px 10px 10px 10px;
    
        margin: 0 0 0 16px !important;
    
        padding: 1px 5px 20px !important;
    
        color:#000000;
    
    }
    

[Atelierbram]

Seems like there has been a half-hearted attempt to make the site responsive. When you would remove, or out-comment the width declaration in the (max-width: 767px) media-query of style_par.css, then 24cc74.css takes care of it , as far as I can see …

@media only screen and (max-width: 767px) { 
.content-wrap #content-wrap-inner .sidebar {
    display: block !important;
    float: left;
    /* width: 240px !important; */
    position: absolute;
    left: 0;
    font-size: 9px !important;
}

This site needs some work to make it really responsive though, and if I dare say, also stylistically.

[Author]

Posts