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