[Resolved] Can a conditional be media query based?

[Author]

Posts

[harryT]

Tell us what you are trying to do? I've created two Views: one designed to be shown if the media query indicates the viewing screen is bigger than 768 pixels; the other to be shown if the media query is smaller than 768 pixels. I couldn't find any documentation that indicated how to use @media only screen and (max-width: XXXpx;) as a conditional for selecting which View would be shown

Is there any documentation that you are following? Can't find anything that relates to it.

What is the link to your site? hidden link. View is not live at the moment, obviously. I will submit a login upon acceptance of this topic.

[Luo Yang]

Dear harryT,

There isn't such a built-in feature within Views plugin, I suggest you setup some JS/CSS codes for it, for example this thread:
https://stackoverflow.com/questions/20855806/php-with-screen-width-condition

[harryT]

Thanks. My solution was to create the two Views, then load them as <div>s on the page: (Use the "HTML" editor, not the "Visual" editor)

<div class="fpslarge">
    [wpv-view name="front-page-slider-large"]
</div>
<div class="fpssmall">
    [wpv-view name="front-page-slider-small"]
</div>

I then added this CSS in style.css to make the large one activate when the screen was greater than 860px; and the smaller one activate when the screen was smaller than 860px.

.fpslarge {
	display: none;
}
.fpssmall {
	display: block;
}

@media screen and (min-width: 860px) {
	.fpslarge {
		display: block;
	}
	.fpssmall {
		display: none;
	}
}

Hopefully, this will help others seeking to do the same thing. The finished page is viewable at hidden link