Skip to content

Instantly share code, notes, and snippets.

@undfine
Created February 29, 2024 16:06
Show Gist options
  • Select an option

  • Save undfine/cafcd282aeae2510018c9a91100d60f8 to your computer and use it in GitHub Desktop.

Select an option

Save undfine/cafcd282aeae2510018c9a91100d60f8 to your computer and use it in GitHub Desktop.
A few additional utility classes for Elementor elements
/*** .vh100 ***
* add this class to any elemtent to make it full-height
* (excluding address bar on mobile)
*/
.vh100{
height: 100vh;
max-height: 100svh;
}
/**** .fullbg ***
* add class= "fullbg" to an elementor image
* to make it a background image (but responsive) in the section/container
*/
.elementor-widget-image.fullbg,
.elementor-widget-image-carousel.fullbg{
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: 0;
padding: 0;
width: 100%;
height: 100%;
display: flex;
}
.elementor-widget-image-carousel.fullbg .elementor-widget-container {
height:100%;
width: 100%;
display: flex;
}
.elementor-widget-image-carousel.fullbg .swiper-slide figure {
height: 100%;
}
.elementor-widget-image.fullbg .elementor-widget-container img,
.elementor-widget-image.fullheight .elementor-widget-container img,
.elementor-element .swiper-image-stretch .swiper-slide img.swiper-slide-image,
.elementor-lightbox .swiper-image-stretch .swiper-slide img.swiper-slide-image {
width: 100%;
height: 100%;
max-height:100%;
object-fit:cover;
object-position:center center;
display: block;
user-select: none;
-webkit-user-select: none;
-moz-user-select: none;
}
/**** elementor swiper utility classes ***
* aspect-3x2, aspect-4x3, aspect-16x9, fullbg
*/
.e-widget-swiper.aspect-3x2 .elementor-image-carousel-wrapper {
aspect-ratio: 3 / 2;
}
.e-widget-swiper.aspect-4x3 .elementor-image-carousel-wrapper {
aspect-ratio: 4 / 3;
}
.e-widget-swiper.aspect-16x9 .elementor-image-carousel-wrapper {
aspect-ratio: 16 / 9;
}
.swiper-slide-image {
-moz-user-select: -moz-none;
-webkit-user-select: none;
user-select: none;
}
/* fullwidth icons */
.fullwidth .elementor-icon,.fullwidth .elementor-icon svg {
width: 100%;
height: auto;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment