diggeddy

/* ------------ MARK-UP BELOW -------*/

<div class="db-container">
    <div class="db-a">A</div>
    <div class="db-b">B</div>
    <div class="db-c">C</div>
    <div class="db-d">D</div>
</div>

/* ----------- CSS BELOW ---------- */

diggeddy

/* CSS Elementor flexible gallaery */

.db-grid-flex .elementor-widget-container .elementor-image-gallery .gallery {
    display: -webkit-box;  /* OLD - iOS 6-, Safari 3.1-6, BB7 */
    display: -ms-flexbox;  /* TWEENER - IE 10 */
    display: -webkit-flex; /* NEW - Safari 6.1+. iOS 7.1+, BB10 */
    display: flex;
    justify-content: center;
    flex-flow: row wrap;
}

diggeddy

/* Elementor - Auto aligning elements within a column */

/*Option 1 - Flex Container Fix*/

.db-flex-column .elementor-widget-wrap {
    height: 100%;
    display: -webkit-box;  /* OLD - iOS 6-, Safari 3.1-6, BB7 */
    display: -ms-flexbox;  /* TWEENER - IE 10 */
    display: -webkit-flex; /* NEW - Safari 6.1+. iOS 7.1+, BB10 */
    display: flex;         /* NEW, Spec - Firefox, Chrome, Opera */

diggeddy

/* Elementor - create a double button with Icon List widget */

.db-list-button .elementor-icon-list-items {
    display: -webkit-box;  /* OLD - iOS 6-, Safari 3.1-6, BB7 */
    display: -ms-flexbox;  /* TWEENER - IE 10 */
    display: -webkit-flex; /* NEW - Safari 6.1+. iOS 7.1+, BB10 */
    display: flex;         /* NEW, Spec - Firefox, Chrome, Opera */
    justify-content: center;
}
.db-list-button .elementor-icon-list-item a {

diggeddy

/* Elementor - add Masonry to Gallery Widget */

.gallery-icon img{
    width: 100%;
}

@media (min-width: 1024px) {
    #gallery-1 {
      column-count: 4;
      column-gap: 0px;

diggeddy

/* Elementor - additional content on Form Widget */

/* Basic code to add text content via Pseudo elements */
.elementor-form-fields-wrapper >div:nth-child(1) {
    display: flex;
    flex-flow: column;
    align-items: left;
}
.elementor-form-fields-wrapper >div:nth-child(1):before {
    content: "PUT YOUR TEXT CONTENT HERE";

diggeddy

/* Post thumbnail shortcode */

add_shortcode('featured_img', 'fi_in_content');

function fi_in_content($atts) {
    global $post;
    return get_the_post_thumbnail($post->ID);
}

diggeddy

/*---- convert a slider widget into a zoom box ---*/

.db-slider-reveal .elementor-slide-description,
.db-slider-reveal .elementor-slide-button,
.db-slider-reveal .slick-slide-inner .elementor-background-overlay {
    transition: all 1000ms ease-in-out;
}
.db-slider-reveal:not(:hover) .elementor-slide-description,
.db-slider-reveal:not(:hover) .elementor-slide-button,
.db-slider-reveal:not(:hover) .slick-slide-inner .elementor-background-overlay

diggeddy

/*---- creating a block quote class for p tag ----*/

.db-quote p:before {
  content: '\f10d';
}
.db-quote p::after {
  content: '\f10e';
}
.db-quote p:before , .db-quote p:after {
  font-family: FontAwesome;

diggeddy

/*---- Elementor UI Onion Skin Hack ----*/

.elementor-editor-active  .elementor:hover .elementor-section:not(:hover) {
    opacity: 0.3;
    z-index: 0;
}
.elementor-editor-active .elementor-section:hover {
    z-index: 1 !important;
}