A Simple Solution For A Silly Problem!
Align the Divi Blurb Icon or Image to the Top Left
The Divi Theme and Builder from Elegant Themes is awesome, but it has some weird quirks that are actually pretty bad. For example, when the blurb module icon or image is left aligned it looks awful on mobile, and yet this is the most popular module of them all! This means that blurb modules all over the web are causing problems. Be sure to look at #3 for a clever way to fix this on mobile!
Before we get to that, I’ll show you how to align the Divi Blurb icon or image to the left. The funny thing is, there are several scenarios here. One solution only works for the icon, and another similar solution for the image. If you find this website helpful, please leave us comments and subscribe for more!
#1. Move Divi Blurb Icon To The Top Left
This is the easiest one on the list. You’re going to do a facepalm as soon as you see it. Ready? Add “text-align: left;” to the Blurb module Advanced tab custom CSS box for “Blurb Content.”
Before = Top Center (default)
This icon is left aligned on desktop, but top on mobile!
After = Top Left
This icon is left aligned on desktop, but top on mobile!
#2. Move Divi Blurb Image To The Top Left
Like I said, the icon and image each are differnt, so we need to do something similar but with a few key differences. To align the Divi Blurb image to the top left, go to the Blurb Module Advanced tab and find the “Blurb Image” box. Add the code “display: block; width: 96px;”
Before = Top Center (default)
This image is top-aligned, but we want it on the top left!
After = Top Left
This icon is left aligned on desktop, but top on mobile!
#3. Move A Left Aligned Blurb Image/Icon To The Top Only On Mobile
The last one here you could call a bonus, but it’s the most need solution out of all three of them. When using a Blurb module with an icon or image on the left, the mobile version gets really awkward with spacing. The title and text get really narrow, and this looks very unprofessional. To remedy this, some would say to duplicate the module and adjust the visibility settings, but that is not recommended at all. The easier solution is to use the code below to switch the icon or image to the top on mobile, but keep the desktop version the same. This example shows you how to move a left aligned Blurb image or icon to the top only on mobile.
Icon Example
This icon is left aligned on desktop, but top left on mobile!
Image Example
This image is left aligned on desktop, but top left on mobile!
Add the class “pa-blurb-left-desktop-top-mobile” to the Blurb Settings Advanced tab in the CSS Class input field.
Go ahead and copy and paste the CSS snippet into the Divi>Theme Options>Custom CSS box.
Leave a Reply