cssDorks

Custom CSS for Thank you message on Divi Contact Form

When the user submits the contact form on the Divi contact form they get the 'thank you message', however to change the font and justification of this message, add the below custom CSS and edit to suit:

#page-container .et_pb_contact_form_0.et_pb_contact_form_container .et-pb-contact-message {
color:aquamarine;
text-align: center;
border: 1px solid lightgreen;
background: orange;
}

Remove extra padding on Divi blog grid layout rows

The Divi blog module in grid mode may sometimes add padding between rows of posts. No matter what you do (adjust padding/margins/gutter width, etc on each the section, row, and module) it can be a challenge to get rid of it.

The solution is to add the following CSS code to your custom CSS (Divi > Theme Options > General tab > Custom CSS box):

.et_pb_gutters1.et_pb_row .et_pb_column .et_pb_blog_grid .column.size-1of3 .et_pb_post:last-child {
margin-bottom: 0 !important;
}

Divi Contact form full-width submit button

With the Divi theme to make the submit button on the contact form module full width. See CSS code below.

Desktop only CSS code:

body #page-container .et_pb_contact_form_0.et_pb_contact_form_container .et_pb_button {
width: 97%;
margin-left: 7px;
margin-top: 6px;
}
body #page-container .et_pb_contact_form_0 .et_contact_bottom_container {
width: 100%;
}

Mobile only CSS code:

@media (max-width: 479px){
.et_contact_bottom_container {
width: 100%!important;
}
.et_pb_contact_submit {
width:100%!important;
}
}

Customizing DIVI Testimonial module with a horizontal line

Name the CSS Class of the Module "testimonial-line".
Use this CSS Code:

.testimonial-line .et_pb_testimonial_author {
margin-top: 35px !important;
}
.testimonial-line .et_pb_testimonial_description_inner::after {
content: "";
position: absolute;
text-align: center;
width: 40%;
left:50%;
margin-top: -40px;
border-top: 1px solid #939290;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
}

Reduce padding from DIVI Blog Grid Layout

The blog module in grid mode seems to be adding padding between rows of posts. To reduce this padding, add the following CSS code to your custom CSS (Divi > Theme Options > General tab > Custom CSS box.

.et_pb_gutters1.et_pb_row .et_pb_column .et_pb_blog_grid .column.size-1of3 .et_pb_post:last-child {
margin-bottom: 0 !important;
}

How to Remove Sidebar from WooCommerce Shop and Category Page

Looking to make category pages full width? There are many posts online that tell you to edit core WooCommerce files. This is not the best practice as there are regular updates to the WooCommerce plugin. When you update the plugin, it will revert back to the page with the sidebar.

Please add this CSS code into Divi > Theme Options > General > Custom CSS field.

#left-area {
padding-right: 0 !important; width: 100%;
}
#sidebar {
display: none;
}
#main-content .container::before {
display: none;
}

Change No products were found matching your selection background color for WooCommerce

If you install the WooCommerce plugin for WordPress, you may notice some colors do not match your WordPress theme. You can add a CSS over-ride to change the default color here.