Knowledgebase

Full-Width Slider: How to change the slider height

Intro

Click on Theme Options and locate the Custom Styling section Enter the following into the Custom CSS box: .slider{height:400px;} .slider li{height: 400px;} #widget-block{margin-top:400px;} Adjust the number to your desired height This will affect all other elements within the slider layouts, so be mindful of how much content you are placing in the slides, and the […]

Solution

  1. Click on Theme Options and locate the Custom Styling section
  2. Enter the following into the Custom CSS box:
    .slider{height:400px;}
    .slider li{height: 400px;}
    #widget-block{margin-top:400px;}
  3. Adjust the number to your desired height

This will affect all other elements within the slider layouts, so be mindful of how much content you are placing in the slides, and the height of any featured images.

If you made the slider taller, you may also need to adjust the height in the mobile views using CSS media queries.

Refer to How to Customize the Mobile View in Responsive Themes

You would use the same set of styles as above, but adjust the height to make sense for a mobile screen (no taller than 480px)

Get 15% off!

Signup and get 15% off any of our Ghost or Framer themes immediately