Take the 2-minute tour ×
Webmasters Stack Exchange is a question and answer site for pro webmasters. It's 100% free, no registration required.

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?

share|improve this question
add comment

1 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.

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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