0

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?

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.