New to the community? Start here

Slider is not responsive in Mobile

I am trying to make my slider responsive for mobile but it’s cutting in mobile. The slider is just below the menu on mobile.

Mon, 16 Dec 2019 20:31:47
  • Adam
    • Support Gorilla

    Hi Celsio

    I hope you’re well today and thank you for your question!

    The slider get’s “cut off” – or rather just hidden – because there’s this CSS added to the site: 

    /**Do not display slider on small devices**/
@media only screen and (max-width: 600px) {
.slider_wrap.slider_boxed.slider_engine_revo.slider_alias_home-34 {
display: none;
}}

    You’ll find it in the custom CSS of the site via “Custom CSS Pro” link in admin toolbar. It seems it must have been added to the site in the past to hide that slider. If you remove that code, the slider should start showing up (though you might need to clear up cache as well).

    Best regards,
    Adam

    • Dmytro Borovyk
      • Staff

      Hi Celsio,

      Thank you for your explanation.

      From what I see there’s no appropriate setting in the Slider Revolution plugin which would allow you do that. So in order for the slider to fit the device width you can try making it visible again by removing the part of CSS used for hiding the slider:

      /**Do not display slider on small devices**/
@media only screen and (max-width: 600px) {
.slider_wrap.slider_boxed.slider_engine_revo.slider_alias_home-34 {
display: none;
}}

      and adding the following CSS media query:

      @media only screen and (max-width: 777px) {
	#rev_slider_3_1 .tp-bgimg {
		background-size: contain !important;
		background-position: center top !important;
		background-color: #F4F1E8
 !important;
	}
}

      – this should make the slider image fit the smaller screens, align it to
      the top and change the revealed white background to your background
      color.

      As the slider will then look smaller, you will probably also want to
      reduce the gap underneath it for the tablet and mobile screens. You can
      do this by changing the maximum height in Slider Settings >> Slide Layout:

      [attachments are only viewable by logged-in members]

      After that clear the Hummingbird cache (Hummingbird >> Clear page cache) and refresh your page with the slider to see the changes.

      Regards,
      Dmytro