Lots of sites use Divi, by Elegant Themes, for their WordPress theme. I’m rounding up, but I think the last completely made up stat I heard was like a gabillion sites are now powered by Divi.  Here are some pretty inspiring ones.

Or perhaps just consider this site-it uses Divi, too.  But I’d argue the actual power of any website does not lie in the technology but in the person who sets it up.  And if that person is using Divi they should use most, if not all, of these CSS snippets or else their “kung fu is really pathetic.”

Ok, so on to the snippets in no particular order.

Remove margin on 2nd fullwidth header button on mobile

If you use the fullwidth header module (and who doesn’t?) and add two buttons (and who doesn’t?) then this is a MUST have tweak.

Here is what a desktop view looks like out of the box:

But resize that viewport to mobile and any decent designer who cares about symmetry or, at least, sleeps on a rectangle bed like the rest of the first world, should want to punch someone in the face when seeing this:

AGH!!  HELP ME, LAWD!

Fortunately, there is an easy fix for that.  Just add this CSS to your site, however, you prefer to do so.

/* Responsive Styles Smartphone Portrait */
@media all and (max-width: 479px) {
 .et_pb_fullwidth_header .et_pb_fullwidth_header_container .et_pb_button_two {
 margin-left: 0;
 }
}

Refresh your browser and you should now see this:

Ah, much better.  On to #2…

Remove Bullets From the Divi Theme Footer

This CSS is straight from Divi Theme Examples, but it’s legit.  Why, oh why, for the life of me bullets are the default footer option is well beyond my finite mind’s ability to comprehend design, but this is what the default Divi footer looks like if you add, say, a custom menu widget for site navigation:

But, alas, add this quick CSS:

#footer-widgets .footer-widget li:before {
 display: none; 
} 
html #footer-widgets .footer-widget .et_pb_widget:not(.woocommerce) ul li {
 line-height: 26px; 
 padding-left: 0px; 
}

Et voila!  Much better.

#3….

Make Blurb Images the Same Width and Height in a Row

Truth be told, this should be done with image sizing not CSS.  If you are putting (3) images in a row on say (3) blurb modules, then before you upload the images, RESIZE THEM THE SAME using scaling and cropping on virtually any image editor.  But if you are just lazy, don’t care, or just a CSS junkie, this CSS magic will help.

Here is a (3) column layout using (3) different sized images:

Notice how UNEVEN those images are!?  AGH!!  MY EYES!  Quick, I need to stare at the sun to literally BLIND MYSELF so I do not have to stare at that terrible symmetry!!

Now, it’s one thing if you are GOING FOR UNEVEN symmetry, but tell me that’s what you’re doing in my comments section on this blog and I will find you and punch you in the ear.  Right dab square right in the out lob where it’ll sting for hours.

But, alas, you can use this little CSS nugget to help (which I got from this NDR (Non-Divi Related) site):

.et_pb_main_blurb_image {
 width: 320px;
 height: 200px;
 overflow: hidden;
}

Keep in mind that my choice for 320px width hinged on the Divi specs on this Elegant Themes page that say it’s 320px for 1/3 modules.  You will/should adjust the width / height values for your design and gutter width.

Here is how it looks with that little bad boy in action:

Whew…yes, glad I did not actually stare at the sun so I could appreciate this beautiful and perfectly even layout…

Content Containers Not Lined Up in Blurb Modules (or other modules)

Coming in at #4 of my no particular order 10 is a container alignment problem that happens with header titles are too long, usually coupled with font-sizes being large.  For example, check out this blurb icon layout:

This is pretty common and the easiest way to solve it is to use smaller titles!  One worders that end in a fancy action sound like AMAZING and SUPER, but not SUPER DUPER…that may overflow…

But, of course, it’s pretty unavoidable…client demands and all…so a CSS option is to increase the height of the title containers with a minimum value.  Like this:

.et_pb_blurb_container h4 {
 min-height: 42px;
}

You will have to adjust the height as needed, but the point is to tell the browser to ensure that the h4 title (in this case) is always AT LEAST so many pixels.  Here is how it looks with this…

Ah, yes, breathing easier again…

On to Number 5!  Yea!

Add Inner Text Shadow to White Sections

Quick side note.  All of these CSS tweaks are (obviously) just my opinion based on using Divi for several years and this next one is no different.  All of these are completely optional and I just wanted to be clear that I don’t really think anyone who does not use these has pathetic kung-fu.

Now, let’s finish #5.  It’s fairly common design to alternate white and color/background-image in each section on a page with more than 1 section.  You know, white background and some text, then maybe a background image and a call to action, then a white background and some text, then a #f7f7f7 background and more s’more boring text, then white, etc, etc.

And while that super flat design works great visually, one way I like to ‘spicen it up’ a bit is to add some depth by adding a small inset box shadow to the white sections.  Here is what I mean.  Here is a section with no inset box shadow applied.

It’s clean and aside from the super ugly call to action, it works.

But if we apply a little box shadow to the main element of the section with:

box-shadow: 
inset 0px 11px 8px -8px #888,
inset 0px -11px 8px -8px #888;

Then we can add some depth and while subtle maybe distract a bit from the eye sore of a CTA:

Ok, so, yea, that’s it for the first 5 CSS snippets I use on almost every Divi site and you should, too!

Or not…whatever…let me know your favorite CSS snippets in the comments below and subscribe to receive more!

Now go on and build beautiful!