I'm trying recreated what you see on the https://mail.google.com/intl/en/mail/help/about.html page. A slider with a maximum width that will change height depending on the device. For example on mobile and smaller screens it will look more square. I put #slidereponsive in Offset Containers and must be do something wrong because its not working. I did get results on the desktop version when I used #rev_slider_2_1_wrapper but nothing was happening on mobile. Here is the code i'm using with rt_anacron-custom.css I have set up with my template.
/* Smartphones */
@media (max-width: 480px) {
#slidereponsive {
max-height: 200px !important; }
}
/* Smartphones to Tablets */
@media (min-width: 481px) and (max-width: 767px) {
#slidereponsive {
min-height: 200px !important; }
}
/* Tablets */
@media (min-width: 768px) and (max-width: 959px) {
#slidereponsive {
max-height: 500px !important; }
}
/* Desktop */
@media (min-width: 960px) and (max-width: 1366px) {
#slidereponsive {
max-height: 600px !important;
max-width: 1200px !important;}
}
/* Large Display */
@media (min-width: 1367px) {
#slidereponsive {
max-height: 800px !important;
max-width: 1200px !important; }
}
P.S. I did catch that mistake on the min-hieght settings on smarthphone to tablets and changed it to max-height. I noticed that when usuing "#rev_slider_2_1_wrapper" that it seems that the background image (total slide) can't go any smaller but the layers do get smaller. Thank you for any help
see sample pics
P.S. I did catch that mistake on the min-hieght settings on smarthphone to tablets and changed it to max-height. I noticed that when usuing "#rev_slider_2_1_wrapper" that it seems that the background image (total slide) can't go any smaller but the layers do get smaller. Thank you for any help
can you give me a link to which the slider is in ?
Hi Benjamin Mooney
i loged in your site and the slider is acting as it should. there is know way to achieve a diffrent effect.
as shown on our demo
http://unitecms.net/joomla-extensions/unite-revolution-slider-responsive/revolution-full-width-demo
any other effect can not be achieved with css since the effect is achieved with js calculations.
the css you added is not necasary since the calculations happen automatically .
the wrapper you added as well is not necasary
Actually I may have figured out :) I'll do some more testing and post back here so people will know how if I can get it to work :)
Is there a way to change grid width and height based off screen resolution? Thank you for your help