How to make Divi slider image full width

TIPS

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.

[css]
/* 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 */
[/css]

0 Comments

Submit a Comment

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

More Tips

Ad - Web Hosting from SiteGround - Crafted for easy site management. Click to learn more.

Cloudways Hosting

WPEngine Hosting

Pressable Hosting

AccuWeb Hosting

Ask the Divi Guy a Question

"*" indicates required fields