As a web developer, discovering the right piece of code at the right time can save work hours and improve efficiency. This free resource is designed to share the most useful code snippets I’ve discovered and used over the years. Most of what you will find here is based on working with Elementor and other WordPress-based plugins. Bookmark this page and keep coming back for new additions.
Paste this CSS into the Widget settings Advanced/Custom CSS.
.jet-check-list .jet-check-list__item {
position: relative;
}
.jet-check-list .jet-listing-dynamic-field__icon {
position: absolute;
top: 6px;
left: 0;
}
.jet-check-list .jet-check-list__item-content {
margin-left: 27px;
}
selector .elementor-widget-wrap {
flex-direction: column;
}
selector .elementor-widget-wrap div:last-child {
margin-top: auto;
}
When building out columns of content, often, the content pushes the bottom item, like buttons, to be staggered instead of Aligned in a straight line. Paste this CSS into the Column settings Advanced/Custom CSS to align the bottom item/button.
Edit Listing with Elementor
listing-equal-height and listing-last-to-bottom.Adjust Listing Grid Settings
Edit Site Settings. In Custom CSS, copy and paste the provided CSS.
.listing-equal-height > .elementor-container {
height: 100%;
}
.listing-equal-height > .elementor-container .elementor-widget-wrap {
height: 100%;
}
.listing-equal-height > .elementor-container .elementor-column-wrap{
flex-direction: column;
}
.listing-equal-height > .elementor-container .elementor-column-wrap .elementor-widget:last-of-type{
margin-top: auto;
}
/* Last Widget Alignment */
.listing-last-to-bottom > .elementor-container .elementor-widget-wrap{
flex-direction: column;
}
.listing-last-to-bottom > .elementor-container .elementor-widget:last-of-type{
margin-top: auto;
}
.elementor-tabs-content-wrapper,
selector {padding: 20px}
.elementor-widget-progress,
.elementor-widget-wrapper {
height: 7%;
}
Edit Site Settings. In Custom CSS, copy and paste the provided CSS.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
selector{
max-height: 300px;
overflow-x: hidden;
overflow-y: scroll;
}
selector::-webkit-scrollbar{
width: 14px;
}
selector::-webkit-scrollbar-track{
background: rgba(0, 0, 0, 0.1);
}
selector::-webkit-scrollbar-thumb{
background: rgba(0, 0, 0, 0.31);
}
.elementor-social-icon-instagram { background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%,#d6249f 60%,#285aeb 90%) /* !important */; }