How to make Divi slider image full width

Sep 29, 2021 | Divi Tips | 0 comments

It’s crazy how you can’t simply put an image into the Divi slider and have it full width. With some custom CSS, you can!

In your slider module, in the Advanced/Custom Classes area, add “full-image-slider” to the class field.

Add an image to the image field for each slider and save.

Add the following CSS to the Divi Options / Custom CSS (without style tags) or Integration / Head area.

/* Full width image in slider BEGIN */
.full-image-slider .et_pb_slide {
  padding-left: 0 !important;
  padding-right: 0 !important;
}
.full-image-slider .et_pb_slide:first-child .et_pb_slide_image img.active {
 animation: unset !important;
}
.full-image-slider .et_pb_container {
  max-width: 100% !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
}
.full-image-slider .et_pb_slide_image img {
  max-height: none !important;
  width: 100% !important;
}
.full-image-slider .et_pb_slide_image {
  margin: 0 !important;
  padding: 0 !important;
  top: 0 !important;
  position: relative !important;
  width: 100% !important;
  display: block !important;
    -webkit-animation-name: fade !important;
    -moz-animation-name: fade !important;
    -ms-animation-name: fade !important;
    -o-animation-name: fade !important;
    animation-name: fade !important;
}
.full-image-slider .et_pb_slider_container_inner {
  position: relative;
}
.full-image-slider .et_pb_slide_description {
  position: absolute !important;
  top: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  right:  0 !important;
  padding: 0 !important;
  margin: 0 !important;
width: auto !important;
height: auto !important;
}
.full-image-slider .et_pb_slide_description .et_pb_button_wrapper,
.full-image-slider .et_pb_slide_description .et_pb_button_wrapper a,
.full-image-slider .et_pb_slide_description .et_pb_button_wrapper a:hover {
  width: 100% !important;
  height: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
 color: rgba(0, 0, 0, 0) !important;  
  border: none !important;
  background: none !important;
}
.et_pb_column.et_pb_slider_fullwidth_off.full-image-slider .et_pb_slide_description .et_pb_slide_title,
.et_pb_column.et_pb_slider_fullwidth_off.full-image-slider .et_pb_slide_description .et_pb_slide_content,
.full-image-slider .et_pb_slide_description .et_pb_slide_title,
.full-image-slider .et_pb_slide_description .et_pb_slide_content {
  display: none;
}
/* Full width image in slider END */

0 Comments

Submit a Comment

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.