Useful CSS snippets for the DIVI theme

Additional CSS for the DIVI theme to enhance your websites layout

Useful CSS snippets for DIVI
Posted on 1st October 2021

The DIVI page builder is rather good

Here at Portal Creative we like to build websites using WordPress. When we started building with WordPress, 99% of our website themes were built by hand using the Foundation framework. This gave us complete control of the layout and functionality of our web builds but as you can imagine it took quite a while to build each site and as more website jobs came in we were busier and busier.

Step forward a several (8) years, we were keen to not saddle our clients with stock themes that are limited in functionality, so we stumbled upon the quite remarkable DIVI theme. DIVI’s theme is a completely blank canvas which allows us to design and build completely bespoke websites from scratch. It has an excellent and well-designed front end page builder which is intuitive and fast. We’ve used just about every page builder going over the years but none of them can hold a candle to DIVI so much so that we use it exclusively for new client web builds.

CSS tweaks for the DIVI theme

As we’ve been using DIVI for some time now we’ve come across a few handy CSS tweaks that we tend to add to each build. From removing the top header box shadow to changing the font weight of the menu and to changing the website logo for certain pages. We’ll keep this page up to date with useful CSS snippets for the DIVI theme as we find them.

Remove the shadow beneath the main header

#main-header, #main-header.et-fixed-header {
-webkit-box-shadow: none!important;
-moz-box-shadow: none!important;
box-shadow: none!important;
}
Remove the bold font style from the main menu links in DIVI

#et-top-navigation {
font-weight: normal;
}
Remove the border between sidebar and content in DIVI page or post

#main-content .container:before {
width:0;
}
.et_pb_widget_area_right {
border-left:0 !important;
}
.et_pb_widget_area_left {
border-right:0 !important;
}
Change the breakpoint for the mobile menu

@media only screen and (max-width: 1200px) {

#top-menu {
display: none;
}

#et_mobile_nav_menu {
display: block;
}

}

Increase the width of the DIVI drop down menu

#top-menu li ul {
width: 260px;
padding:0;
}
#top-menu li li {
border-bottom: 1px solid #ddd;
width: 100%;
padding:0;
}
#top-menu li li a{
width:100%;
padding:10px 20px;
}
Move DIVI secondary menu social icons to the right

@media only screen and (min-width: 768px) {
#et-info { float:right !important; }
}
Remove DIVI sidebar border

.et_pb_widget_area_right {
border-left: 0 !important;
}
.et_pb_widget_area_left {
border-right: 0 !important;
}
Greyscale Divi Map

.et_pb_map_container {
filter: url("data:image/svg+xml;utf8,#grayscale");
filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: gray;
-webkit-filter: grayscale(100%);
}
Make DIVI logo bigger on Mobiles

@media only screen and (max-width: 767px) {
#logo {
height:auto;
margin-left:-15px;
width: 90%;
max-width: 90% !important;
}
}

DIVI CSS tweaks with classes

These little snippets require classes to be added to the section or row of your layout

Two buttons side by side. Add CSS Class ‘inline-buttons’ to row

.inline-buttons .et_pb_button_module_wrapper {
display: inline-block;
margin: 0 10px;
}
.inline-buttons {
text-align: center !important;
}
Equalize blog columns. Add CSS Class ‘bloggrid’ to blog module

.bloggrid .et_pb_salvattore_content {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}

.bloggrid article {
margin-bottom: 20px !important;
-webkit-box-flex: 1;
-ms-flex: 1 0 auto;
flex: 1 0 auto;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}

.bloggrid .post-content {

-webkit-box-flex: 1;

-ms-flex: 1 0 auto;
flex: 1 0 auto;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}

.bloggrid .column {
margin-bottom: 20px !important;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}

Our web design, SEO & WordPress blog

We live and breathe in the WordPress and SEO world which may be a bit geeky but we're passionate about our work and love sharing our knowledge with you.

Looking for help with your project?

We’d love to work with you on your new project get in touch with us today

portal creative agency stirling scotland
Privacy Overview

This website uses cookies so that we can provide you with the best user experience possible. Cookie information is stored in your browser and performs functions such as recognising you when you return to our website and helping our team to understand which sections of the website you find most interesting and useful.