Reduce the height of the Slider

⚠️ Code snippets might not be compatible with the latest version of your theme. Always use a child theme to customize your theme, and test your code on a staging website before migrating to production.

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.

/* START OF Reduce the height of the Slider */
#customizr-slider.carousel .item {
height:         400px;
min-height:     400px;
line-height:    400px;
/* END OF Reduce the height of the Slider */

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

/* START OF Reduce the height of the Slider */
@media (max-width: 1200px){
#customizr-slider.carousel .item {
height: 308px;
min-height: 308px;
line-height: 308px;
@media (max-width: 979px){
#customizr-slider.carousel .item {
height: 247px;
min-height: 247px;
line-height: 247px;
@media (max-width: 767px){
#customizr-slider.carousel .item {
height: 246px;
min-height: 246px;
line-height: 246px;

@media (max-width: 480px){
#customizr-slider.carousel .item {
height:         152px;
min-height:     152px;
line-height:    152px;

@media (max-width: 320px){
#customizr-slider.carousel .item {
height:         112px;
min-height:     112px;
line-height:    112px;
/* END OF Reduce the height of the Slider */

Credit: @d4z_c0nf

Leave a Reply to Korvin Cancel reply

Your email address will not be published. Required fields are marked *

53 thoughts on “Reduce the height of the Slider”