Why does this css code cut content off in Desktop view?

Question

(Background information) I have been tasked with fixing a former colleagues documents (html/css/js). I do not have access to all the html documents and none of the javascript because someone thought it would be a great idea to reference a bunch of it from a different branch in a different region with a different permission level than anyone in my department so lots of slow hoops to jump through. While I have been waiting weeks for them to email me or grant me permission into their branch I have to make due with what I have. The websites are being maintained by a CMS

I've come across an issue where the page content disappears in Desktop view, but not Mobile view. The css code affecting this directly is this:

    .mobile div.tr-page-container #entry_page_custom_html{
    max-height: 300px;
} 

these are also in the CSS document related to div.tr-page-container:

div.tr-page-container {
    -moz-border-radius: 0px;
    -webkit-border-radius: 0px;
    border-radius: 0px;
}

div.tr-page-container {

    border-radius:0;
}

div.tr-page-container div.header-container {
    background-color: none;
}

div.tr-page-container div.section-sub-header, #login-div-content .footer-block, div.registration-page-container div.section-sub-header {
    display:none;
}

If you view the test page you'll see it affect the content, if you resize the page down to about tablet or smaller view, a "view more" button appears and when you click it, the rest of the content appears.

If I remove this code, the content shows in desktop view, but in mobile view the "view more" button covers the entire content causing you to have to actually click it to read anything (see screen shot).

So I've concluded that the "max-height" function is necessary (i think), but what can I do to allow the content in desktop view appear? If I increase max height to fit all of it, the problem is when we add more content to that test page we'll be back in the same situation.

I really hope someone can advise me on this.

This by the way, is the javascript code for the view more/less, I found it while inspecting the webpage on chrome lol.

Y.use('jquery-ui',function(Y) {
    jQuery(function() {
        jQuery('.view-content-link').click(function() {
            jQuery('#entry_page_custom_html').toggleClass('expand');
                jQuery('.view-content-link').toggle();
        });
    });
});

Answer 1

I this part of code, you have a comment before you open brackets in a IF STATEMENT. And if this is comment, max-height:300px never will be recognized to be execute.

Change:

.mobile div.tr-page-container #entry_page_custom_html{
    max-height: 300px;
} 

To:

.mobile div.tr-page-container {
    max-height: 300px;
} 

Answer 2

Why does this css code cut content off in Desktop view?

Because your max-height is set at 300px and the content is more than 300px tall at that browser width so it is "cutting" the content off.

Remove this, and use a media query.

.mobile div.tr-page-container #entry_page_custom_html{
    max-height: 300px; //not needed

}

Add this to your script

$('.view-content-link').on('click', function(e) {
      $('.table').toggleClass("show"); 
      e.preventDefault();
    });

Add this to your css

.show{
     display: block !important;
   }

    @media screen and (max-width: 767px) {
        .table{
            display:none;
        }
    }

fiddle