Code by Day | Explore By Weekend

Align Divi Blurb Icon or Image Top Left Tutorial by Pee-Aye Creative

How To Align The Divi Blurb Icon Or Image To The Top Left

This tutorial solves such a common problem and is easy to do! Let's get started and align the Divi blurb icon or image to the top left!
Align Divi Blurb Icon Top Left

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!

Align Divi Blurb Image Top Left
Pee Aye Creative website design in Pennsylvania 11

Before = Top Center (default)

This image is top-aligned, but we want it on the top left!

Pee Aye Creative website design in Pennsylvania 11

After = Top Left

This image is left aligned on desktop, but top on mobile!

Icon Example

This icon is left aligned on desktop, but top left on mobile!

Pee Aye Creative website design in Pennsylvania 11

Image Example

This image is left aligned on desktop, but top left on mobile!

To solve this, simple open the Blurb module settings and open the Custom CSS toggle in the Advanced tab. Now go to BOTH the Blurb Image and Blurb Content boxes and toggle open the three responsive tabs for Desktop, Tablet, and Phone. Write or copy the CSS below in each of those, and you are done!

display: block;
Divi blurb image on mobile
Divi blurb icon on mobile
18
Last updated Jan 28, 2021 @ 11:02 pm

Please share this post!

Nelson Lee Miller (aka The Divi Teacher)

Nelson is the owner of Pee-Aye Creative Co in the beautiful state of Pennsylvania. He loves helping small businesses, exploring, building websites with Divi, and teaching others.
Divi Adventure Club Product And Course Membership by Pee Aye Creative

Become A Member!

Gain access to everything we offer!

Learn More

Leave A Response!

Subscribe
Notify of
guest
12 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Guillermo
Guillermo
1 year ago

Thank´s Nelson !!!!!.

Have a nice day.

Guillermo

Pedro Martinez
Pedro Martinez
10 months ago

Thank you Nelson, I’m new to your channel and FB blog (pending acceptance) and I can’t even begin to tell you how many time you saved my sanity when Divi was driving me nuts!

Sonam Tshering
Sonam Tshering
1 month ago

Hello Nelson
I am Sonam from Bhutan
This is what I would like to achieve with the blurb..

BlurbImage.jpg
Sonam Tshering
Sonam Tshering
1 month ago

Hi Nelson I am sending another one
I want the image to appear like in the first image but the text should appear like in 2nd image. Thank you please help me with that

BlurbImage.jpg
Shannon
1 month ago

Hi Nelson! Thanks for all of your posts, they’ve helped almost every time I was stuck! For some reason, I can’t get this one to work. I’m trying for #3 (left aligned image on desktop, but top-aligned on mobile) and it doesn’t seem to be working. What the code snippet and css class did do was to make the blurb image appear, still to the left on mobile, but slightly overlapping the blurb text. (see attached screenshot, this is the ‘after’ image’). I tried increasing the top padding for the blurb module on mobile (in case the image ‘needed room’),… Read more »

after custom css.png
Shannon

Got it! That worked! I also found (by accident) that if you follow step #3, setting both blurb image and blurb content to display: block; AND you set image/icon position to ‘top’ on mobile (instead of ‘left’) that it will center the image.

I ended up just putting it back to ‘left’, though, because it looked better with the left text alignment.

Thanks so much!

Shop Our Divi Products

Plugins • Courses • Templates

Visit The Shop

Divi Adventure Club Product And Course Membership by Pee Aye Creative

Become A Member!

Gain access to everything we offer!

Learn More

Divi Tutorials On YouTube

Join over 5,200 others and subscribe to our helpful Divi videos!

Visit Our Channel

Recent Posts

Pin It on Pinterest

0

Your Cart