Code Snippets

Tips and Tricks for Developers

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.

Pictured is website code for a form box.

JetEngine Dynamic Checklist Icon Alignment

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;
}

				
			

Column Align Last Item

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.

Listing Grid Jet Engine Align the Last Item

  • Edit Listing with Elementor

    • Select the first section.
    • Go to the Advanced tab and add the classes listing-equal-height and listing-last-to-bottom.
  • Adjust Listing Grid Settings

    • In the Elementor Editor, select the Listing Grid.
    • Go to the Content tab and set “Equal columns height” to “Yes”.

 

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%;
    }

				
			

Target the Content Wrapper for Tabs for Added Padding

Paste this CSS into the Column settings Advanced/Custom CSS and adjust the padding accordingly.

Target the Progress Widget Wrapper for Height Issues on Chrome

Edit Site Settings. In Custom CSS, copy and paste the provided CSS.

Add this Scroll Bar to Your Text

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.

Simply copy paste this code in the Advanced > Custom CSS field of the target element
				
					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 */; }
				
			

Instagram Social Icon Official Color

Most of the time when we do Social Media Icons we style them for the colors of the brand. However in the rare occasion a client request that they have official colors you will notice that the Instagram Icon does not provide official colors. This CSS Code will fix that.