Can I force the html element to display a specific media size?
I have an html template (MeteorJS template) that I am using on a page on my site. I want to reuse this template on another page, but I want to display the mobile version of the template because it will act as a widget and not the full template (which is why I want the mobile version).
I would like to do this without having to override all media queries.
Is there a way to tell an element to display all of its children as a specific media size?
source to share
What I would do is add a new class name to the version of the template that you want to subordinate to media queries. Then change your CSS query to target-only media content with this new class name.
Let's say your basic CSS (mobile and widget):
.module-a {
...
}
.module-a-heading {
...
}
Then add a new class name to, say, .module-a-fluid
the instances .module-a
that you want to track in your media queries.
<div class="module-a module-a-fluid">
<!-- ... -->
</div>
Then change your media queries only to those .module-a
that also have .module-a-fluid
.
@media (min-width: 768px) {
.module-a.module-a-fluid {
...
}
.module-a-fluid .module-a-heading {
...
}
}
source to share