Horizontal Scrolling for Elementor Posts | FREE downloadable section included

/*INSTRUCTIONS FOR HORIZONTAL SCROLL ON POSTS BY THEAFRICANBOSS.COM
1. add the CSS class 'horizontally' to the posts element you want the effect applied to
2. if u want same post height, add CSS class'scrollingCol' to the column (not section) containing the posts
3. Add the CSS code below EITHER
- your CHILD THEME style.css file
- or add it to an HTML element you can place anywhere in your page with open style tag and closing style tag surrounding the code below
- or add it to the page custom CSS under Advanced tab in Page Settings where the posts are
*/


/* for post WIDTH on MOBILE, adjust the pixels below */
.horizontally>div>div>article {
    max-width: 300px;
    /* width on mobile */
}

/* for post WIDTH on DESKTOP, adjust the pixels below */
@media screen and (min-width: 480px) {
    .horizontally>div>div>article {
        width: 350px;
        /* width on desktop */
    }
}

/* for SAME post HEIGHT on MOBILE, adjust the pixels below */
.scrollingCol>div>.elementor-column-wrap .elementor-element-populated {
    min-height: 280px;
    /* height on mobile */
}

/* for SAME post HEIGHT on DESKTOP, adjust the pixels below */
@media screen and (min-width: 480px) {
    .scrollingCol>div>.elementor-column-wrap .elementor-element-populated {
        min-height: 400px;
        /* height on desktop */
    }
}

/* for your own custom swiping cursor, add a 36x36 png URL of your choosing in this format "cursor: url(http://theafricanboss.com/wp-content/uploads/2020/07/swipe-left-right-lg.png), ew-resize;" */
.horizontally>div {
    cursor: ew-resize;
    display: flex;
    overflow-x: scroll;
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: -ms-autohiding-scrollbar;
}

.horizontally>div::-webkit-scrollbar {
    height: 4px;
}

.horizontally>div::-webkit-scrollbar-track {
    background: black;
    background: rgba(0, 0, 0, 0.1);
}

.horizontally>div::-webkit-scrollbar-thumb {
    background: black;
    background: rgba(0, 0, 0, 0.31);
}

.horizontally>div>div {
    display: flex !important;
    flex-wrap: nowrap;
    flex: 0 0 auto;
}