Reduce the height of the Slider

Last Reviewed: 27-Apr-15 (3.3.20) 3.1.* 3.2.* 3.3.*

Customizr introduced built-in feature changes in v3.3. Go to Customize>Content>Front Page. Adjust the Set slider’s height in pixels setting. Also check the settings Apply this height to all sliders and Replace the default image slider’s height.


3.1/3.2 code

Where to copy/paste this code?
The simplest way is to use the Custom CSS section of the customizer option screen. If you have many customizations to make in CSS and PHP, then we strongly recommend you create a child theme. Everything you need to know about creating a child theme with Customizr here.

Credit: @acub

How to change the default slider image sizes?
Refer to this Snippet

You will need to make further adjustments for different viewports, the following has been suggested by Rocco (@d4z_c0nf):

Let’s assume we’re defining a new height of 400px.
For a slider height of 500px (based on some ratios defined by @nikeo)
– @media max-width 1200px
385px => ratio = 385/500 = 0.77 so width should be 400*0.77 = 308px
– @media max-width 979px
309px => ratio = 309/500 = 0.618, so 400*0.618 = 247px
– @media max-width 767px
308px => ratio = 308/500 = 0.616, so 400*0.616 = 246px
– @media max-width 480px
190px => ratio = 190/500 = 0.38, so 400*0.38 = 152px
– @ media max-width 320px
140px => ratio = 140/500 = 0.28, so 400*0.28 = 112px

Credit: @d4z_c0nf

53 thoughts on “Reduce the height of the Slider”

Comments are closed.