Useful CSS snippets for the DIVI theme

Oct 1, 2021 | Web Design Blog, Blog

Useful CSS snippets for DIVI

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 & marketing blog

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

Need our Assistance?

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