In this articles we will explain how to make your homepage slideshow responsive, please follow these steps to accomplish the responsive slideshow. 


Currently, the homepage slider zooms in to the picture. I you want it to keep the entire image and just shrink according to the size of the screen, this is the  solution for you. Please note, this does not apply to the "Clickable Maps Layout". 

  1. Go to the Admin >> Content >> Edit Web Pages.
  2. Search for the page called “Homepage”.
  3. On the Homepage Edit Section you need to search for the box called “Customize Page Level CSS Styles”, see Image #1.


  4. Simply add the CSS rules to make your homepage slider responsive. Please find the necessary CSS code attached to this article.

Importing Notes:
  • If there is a large space between the slider and your main content (See Image #2. ), you can modify your padding on this CSS Rule:

.homepage_settings {

    padding-top: 26px !important;

}


By modifying the padding, you will be able to resolve issues like this one:



Here are some helpful tips:


  • The modification needs to be done on the 900px CSS Media rule. 
  • Special thanks to Joe The Developer for sharing this fix.


This is what it looks like when the padding has been adjusted correctly.