Slider Revolution

- 9 years ago edwardwichmann
  Participant
  
  Expired
  
  We are using the Slider Revolution on the home page of our website. A mysterious white band is appearing below the slider which is visible only on a mobile device. This band does not show on a standard PC/laptop resolution. Please can someone advise on how can we remove this extra white space. ?
  
  Here is a link to our test site in case it helps.
  
  https://dev.perspectivetechnologies.com/perspectivetechnologies/
  
  Regards
- 9 years ago Mirela
  Participant
  Hello,
  
  Please add this code into your custom css box:
  
  @media (max-width: 480px){ .slider#slider-fullwidth { min-height: auto !important; }}
  
  Let us know.
  
  Best regards!
- 9 years ago edwardwichmann
  Participant
  
  Expired
  
  Hello Mihaila,
  
  Thanks so much for your response. I appended the suggested code in the “Custom CSS Code” box under Tower->General Options area. It does not seems to have made any difference. I still get the white band/space.
  
  Please advise.
  
  Regard,
  
  Vishakha
- 9 years ago Mirela
  Participant
  Hello,
  
  I see the code did made the change but you have a padding top on content. To remove it edit the code to this:
  
  @media (max-width: 480px){ .slider#slider-fullwidth { min-height: auto !important; } #content { padding-top: 0 !important; }}
  
  Let us know.
  
  Best regards!
- 9 years ago edwardwichmann
  Participant
  
  Expired
  
  Mihaila,
  
  Thanks for the response. The new code takes care of the problem.
  
  I have noticed though that the slider looks a little squashed, again, only on a mobile device. Is that because of the height attribute in the new code snippet? Is there anyway I could address this to display correctly on a mobile device?
  
  Once again, thanks so much for your help.
  
  Best Regards,
  
  Vishakha
- 9 years ago Mirela
  Participant
  
  Hello,
  
  The code provided takes care only of the extra white space. It edits it to be the same height as your current slider. It does not change the slider. Any code inside the @media rule block is addressed to mobile devices. So if you want other changes for it you should add the new css inside this block for it to be effective only on mobile.
  
  What do you want to change in the slider? I see it is in proportion with the desktop version.
  Let us know.
  
  Best regards!
- 9 years ago edwardwichmann
  Participant
  
  Expired
  
  Mihaila,
  
  Thanks for the clarification about the @media rule block.
  
  I feel that the slider looks small (0r narrow in height) when viewed on a mobile. I don’t mean it is due to the code you kindly suggested. We would prefer it to be a little big bigger on the mobile. It looks ok on the desktop version, I think.
  
  If you can suggest anything to make it a bit bigger on the mobile version, it will help.
  
  Many thanks once again for your time.
  
  Best regards,
  
  Vishakha
- 9 years ago Mirela
  Participant
  Hello,
  
  Please try this code:
  
  @media (max-width: 480px){ .fullwidthbanner-container { height: 210px !important;} .fullwidthbanner-container .fullwidthabanner { height: 210px !important;} }
  
  Result screenshot. Edit the value to your wish.
  
  Best regards!
- 9 years ago edwardwichmann
  Participant
  
  Expired
  
  Mihaila,
  
  Thanks for the suggestion. Yes, I can see that I can play with different values with this code.
  
  Thanks so much for your kind help on this issue.
  
  Warm regards,
  
  Vishakha

Viewing 8 reply threads

You must be logged in to reply to this topic.

Community Forums

Site Links

Useful Articles

Login