Make an image carousel smaller

• 

  readsoftwareplatform · Member · Feb 20, 2018 at 12:03 am

  • Copy link
  • Add topic to favorites

  Hi! I need to make the whole carousel a bit smaller so it doesn’t take up so much of the page. How can I do this in CSS?

  The blog I need help with is: (visible only to logged in users)

• 

  shubhamgmath · Member · Feb 20, 2018 at 5:28 am

  • Copy link

  Hi readsoftwareplatform

  To change the caroousel size you need to decrease the padding top and padding bottom size in the css file. You need to change the code in your css file.
  The code that need to be change is

  .slideshow-window {
      background-color: #222;
      border: 20px solid #222;
      border-radius: 10px;
      height: 0;
      margin-bottom: 20px;
      overflow: hidden;
      padding-top: 30px !important;
      padding-bottom: 56.25% !important;
      position: relative;
      z-index: 1;
  }

  New code is :

  .slideshow-window {
      background-color: #222;
      border: 20px solid #222;
      border-radius: 10px;
      height: 0;
      margin-bottom: 20px;
      overflow: hidden;
      padding-top: 30px !important;
      padding-bottom: 36% !important;
      position: relative;
      z-index: 1;
  }

  I here changed the padding-bottom percentage from 56.25 to 36% you can change it accordingly as per your requirement.

  Hope this helps, feel free to ask if you have any doubts.

• 

  readsoftwareplatform · Member · Feb 20, 2018 at 10:49 pm

  • Copy link

  Thanks!