Mobile app version of vmapp.org
Login or Join
Deb1703797

: Switch off unwanted responsive behavior of widget 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,

@Deb1703797

Posted in: #ResponsiveWebdesign

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?

10.01% popularity Vote Up Vote Down


Login to follow query

More posts by @Deb1703797

1 Comments

Sorted by latest first Latest Oldest Best

 

@Nimeshi995

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.

10% popularity Vote Up Vote Down


Back to top | Use Dark Theme