Skip Navigation

[Resolved] Can a conditional be media query based?

The Toolset Community Forum is closed, for technical support questions, please head on to our Toolset Professional Support (for paid clients), with any pre-sale or admin question please contact us here.
This support ticket is created 6 years, 7 months ago. There's a good chance that you are reading advice that it now obsolete.
This is the community support forum for Types plugin, which is part of Toolset. Toolset is a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients and people who registered for Types community support can post in it.

Sun Mon Tue Wed Thu Fri Sat
- 9:00 – 13:00 9:00 – 13:00 9:00 – 13:00 9:00 – 13:00 9:00 – 13:00 -
- 14:00 – 18:00 14:00 – 18:00 14:00 – 18:00 14:00 – 18:00 14:00 – 18:00 -

Supporter timezone: Asia/Hong_Kong (GMT+08:00)

This topic contains 2 replies, has 2 voices.

Last updated by harryT 6 years, 7 months ago.

Assisted by: Luo Yang.

Author
Posts
#559427

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.

#559829

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

#561585

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

The forum ‘Types Community Support’ is closed to new topics and replies.

This ticket is now closed. If you're a WPML client and need related help, please open a new support ticket.