Switch off unwanted responsive behavior of widget

Question

On a site that's intentionally non-responsive we're loading a class-schedule widget from a third party. But they've now made their widget responsive, which doesn't work very well for us.

The widget loads through a bit of javascript. Here's the code:

<script type="text/javascript">
  healcode_widget_id = "bk3750svbz";
  healcode_widget_name = "schedules";
  healcode_widget_type = "mb";
  document.write(unescape("%3Cscript src='https://www.healcode.com/javascripts/hc_widget.js' type='text/javascript'%3E%3C/script%3E"))Widget
</script>

We're happy with the content it outputs for desktop devices, but unhappy with what it outputs for mobile devices.

The widget authors don't provide the option to switch the responsive feature off.

Would there be a way to disable the responsive content/layout from showing and display the desktop content across all devices?

Answer 1

If the responsiveness is implemented via .css media queries then you can add your own .css to override their responsive styles. For example:

Suppose they have style like:

@media (max-width: 768px) {
    div.hide-for-mobile { display:none; }
}

Which causes this html to be hidden when the screen width is less than 768px:

<div class='hide-for-mobile'> 
    <!-- some content here -->
</div>

Then you could add your own .css to prevent/reverse this

@media (max-width: 768px) {
    div.hide-for-mobile { display:block!important; }
}

If your styles are loaded after theirs then you shouldn't need the !important.