I want to create a separate revslider for 1920 x 1080. I will have 2 revlisder shortcodes on the page, one for 1366 and the other for 1920. When the viewport is less than 1920 I want 1366 revlsider to show and 1920 revslider hidden and when the viewport is 1920 I want the 1920 revlslider to show and 1366 revslider hidden. I know its something like @media but im not sure how to do it. Please help, thanks in advance.
Hi there,
First of all thank you for your message. Would you please first consider checking this tutorial, that might enable you to achieve a responsive view without the need of having 2 slides:
https://www.themepunch.com/faq/slider-revolution-responsive-tutorial-5-0/
If it is not what you want then you can use the Hide/Show on viewport functionality of the builder. If you are using Cornerstone then you will need to use the Classic Revolution Slider element inside a Section. Add 2 sections with each one having one of the Revolution Slider elements. Then use the Section Customize tab options to Hide/Show it in different screen sizes:
As a last resort you can use the CSS media queries:
https://www.w3schools.com/css/css3_mediaqueries_ex.asp
Thank you.
Whats the breakpoint for revslider large screens in pixels? Is it 1366 x? Also what is the resolution in pixels for XS in cornertone? Im asking this because 1920px is becoming extremely popular, more than you think. I also beleive theme x is still not ready for 1920px. Test your theme on high resolutions and you will see that the menu changes its position on 1920px and revslider just gets stretched.
Please help.
You can setup X even in 4k. This just depends on your Site Width and Max Width settings.
Regarding your concern about setting up a slider for 1920 and a different one for 1366, that is not a popular setup because usually, what users do is just allow the slider to shrink proportionally because 1920 x 1080 screen is proportionally the same as 1366 x 768.
The highest breakpoint in Cornerstone is 1200px which is the desktop view. Most of the screens with that size are desktop monitors and big laptops. Cornerstone treats them as one view because responsive design is mostly applied to desktop (big laptops), small laptops, tablets and phones. To hide or show your slider on 1920 and 1366 screens would require custom media queries. I’ll add this as feature request though so our development team might take this into consideration.
You can see Cornerstone’s breakpoints when you toggle the Preview Sizer.
We do have an in-house custom development team that offer paid services, who may be able to assist you with media queries. They can be contacted at pinnacle@theme.co if this is of interest to you.
Thank you for your understanding.
This is my concern. Its changing. Now 1366 x is the most used resolution for desktops and guess what? 1920 x is now the second most used resolution in desktops. This trend is because we are almost in 2018. The problem I have with theme x in 1920 x is that the menu items change their position (centered). Can you test it in theme x? My url is irrelevant for it.
I am going to send a secure link so you can see the stats, please let me know if its better to change the breakpoints based on these stats.
I adding that my issue in 1920px is that the bacground image gets resized and if I remember correctly some of the text is actually hidden. I would rather have a different background image that is appropriate for 1920 x.
Hi there,
We certainly appreciate the feedback. We already added this as a feature request in our internal system. This way it can be taken into consideration for future development. All of these items are discussed with our team internally and prioritized based on the amount of interest a particular feature might receive.
At the time being kindly add another Revolution Slider for your 1920px and above mode. Then add it in a separate Section in the Cornerstone. In the Section, Class input add this class: above1920
Then add the CSS code below to X > Launch > Options > CSS:
@media (max-width: 1920px) {
.above1920 {
display: none;
}
}
Thank you.
Thank you, I will try it out and update how it went
You’re always welcome!
Cheers.
This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.