Okay
  Public Ticket #170910
Responsive height and width
Closed

Comments

  • Benjamin started the conversation
    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; } }
  • Benjamin replied

    see sample pics

  • Benjamin replied

    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

  •  1,172
    Amit replied

    can you give me a link to which the slider is in ?

  •   Benjamin replied privately
  •  1,172
    Amit replied

    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

     

  • Benjamin replied

    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 :)

  • Benjamin replied

    Is there a way to change grid width and height based off screen resolution? Thank you for your help

  •   Max replied privately