Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Divi Slider with bottom aligned overlay
/*----------------------------
Slider Customization
created by: Jake Smith
----------------------------*/
/* Blue box sizing and spacing */
/* Entire Slider */
#cm-slider .et_pb_slider {
}
/* All Slides */
#cm-slider .et_pb_slides {
}
/* Each instance of the slide, add a _number to pick a slide */
#cm-slider .et_pb_slide {
padding: 0px;
}
/* Holds all elements - Height is set here */
#cm-slider .et_pb_container {
display: flex;
width: 100%;
max-width: 100%;
flex-direction: column;
height: 550px !important;
}
/* Holds all elements - no :before/:after .clearfix - inherits height */
#cm-slider .et_pb_slider_container_inner {
display: flex;
margin-top: auto;
width: 100vw;
background-color: rgba(45,65,115,0.75);
}
/* Holds title and content */
#cm-slider .et_pb_slide_description {
padding: 2.5rem;
margin-top: auto;
width: 75%;
animation-name: none !important;
}
/* Holds title */
#cm-slider .et_pb_slide_title{
animation-name: none !important;
}
/* Holds content */
#cm-slider .et_pb_slide_content {
}
/* Groups arrows */
#cm-slider .et-pb-arrow-next, .et-pb-arrow-prev {
}
/* Back arrow */
#cm-slider .et-pb-arrow-prev {
}
/* Next arrow */
#cm-slider .et-pb-arrow-next {
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.