cssDorks

How To Make Divi Blog Grid Posts The Same Height

The Divi blog grid layout does have a limitation, when you have featured images of different sizes, and post titles/excerpts which are different lengths, it can cause the grid to look uneven – even with the ‘Equalize Column Heights’ option checked.

Go to Blog Module Settings > Custom CSS and give the module the CSS Class “new_grid_blog”.

Add the following code to your Custom CSS box:

@media only screen and (min-width: 768px) {
.new_grid_blog .et_pb_post {
min-height: 520px;
max-height:520px;
}
}

Hide blog content in DIVI blog grid mode

With the Divi theme blog module, there are two display option, grid or full post. Both of these allow for a short amount of blog content to be shown, or the full blog post content.

There is not an option to not show the content in the Divi blog module.

If you wish to have the blog post just show featured image or may be just the the title, you can configure that in the module itself. To remove the content of the blog posts from showing in the grid view, login the WordPress admin area and under Divi >> Theme Settings, enter the following custom CSS:

.et_pb_post .post-content {
display: none;
}

Remove WooCommerce cart icon from DIVI header

To remove the WooCommerce cart icon from the DIVI header on your WordPress site.

Login the WordPress admin area and under Divi >> Theme Settings, enter the following custom CSS:

.et-cart-info { display:none; }

Add a transparent overlay to Fable theme featured image

If you are running the Fable theme for WordPress by Elegant Themes, then you may notice this little bug when you use features images. The text or post title of the WordPress post is usually hidden because it cannot be seen over the featured image.

To add the transparent overlay please add the following code to the Custom CSS box in the ePanel options:

.category .post.entry.et-background-image:before {
content:'';
display:block;
width:100%;
height:100%;
z-index:999;
position:absolute;
top:0;
background:rgba(0,0,0,0.5);
}
.category .post.entry .container.clearfix {
z-index: 9999999;
}

Hide the Email icon in Divi theme header

To hide the email icon in the DIVI theme header, just enter the below custom CSS:

/* Hide Mail Icon in Header */
#et-info-email {
display: none;
}

The icon appears if you only wish to have the phone number appear. You can disable them in theme customizer if you do not wish to display the phone and email icons.

Remove bullet points on DIVI footer menu and left align

If you add a custom navigation menu to the DIVI theme, you will notice that these bullet points appear before the text of each menu item.

These can easily be removed by adding the below CSS to your custom CSS box in the WordPress admin area:

.footer-widget li:before {
display: none;
}

If you add this, you will notice that there is still space for the bullet point although it is no longer visible. To have the menu items left aligned with the title you will need to add the follow CSS:

#footer-widgets .footer-widget li {
padding-left: 0px;
}

Aligning Gravity Forms survey responses side by side

The Gravity Forms plugin has a nice Survey add-on that can be installed. You can align the answers of the survey side by side if you wish so they are not stacked.

They are stacked on top of each other by default and the picture below will give you an idea of that.

If you wish to have the Gravity Forms survey form slightly more condensed as per the 1st question in the above example then all you need to do is a add a ready made CSS style.

The custom CSS class to add is: gf_list_inline

You can add this by editing form and adding the text to the Custom CSS class as pictured below.