Changing the Height of Divi Sliders Using CSS

Setting the Slider Height Using CSS

If you are looking for a quick and easy way to set the height of your Divi Sliders using CSS, follow these steps:

  1. Add a CSS Class to your slider (example¬†provided uses “myslider”).
  2. Navigate to Divi Theme Options > Custom CSS and add the following code block; then save.
/* Desktop */
.myslider .et_pb_slide .et_pb_container {
	height: auto !important;
	min-height: 500px !important;
}
/* Tablet */
@media only screen and (min-width: 768px) and (max-width: 980px) {
	.myslider .et_pb_slide .et_pb_container {
		height: auto !important;
		min-height: 500px !important;
	}
}
/* Phone */
@media only screen and (max-width: 767px) {
	.myslider .et_pb_slide .et_pb_container {
		height: auto !important;
		min-height: 500px !important;
	}
}

/* Handle padding */
.myslider .et_pb_slide {
	padding-bottom: 0px !important;
}
.myslider div.et_pb_slide_description, 
.myslider .et_pb_slider_fullwidth_off div.et_pb_slide_description {
	padding-top: 1%;
	padding-bottom: 1%;
}