Code by Day | Explore By Weekend

How To Align The Divi Blurb Image Icon To The Right Tutorial by Pee Aye Creative

How To Right Align The Divi Blurb Module Image/Icon

Here is an easy tutorial to show you how to right align (reverse) the Divi Blurb module image and/or icon with just few snippets of CSS.

Image/Icon = Left

This is an example of the default Divi blurb with the image/icon aligned to the left.

Image/Icon = Top

This is an example of the default Divi blurb with the image/icon on top.

Image/Icon = Right

This is an example of the Divi blurb with the image/icon right aligned using this tutorial.

Image/Icon = Left

This is an example of the default Divi blurb with the image/icon left aligned.

margin-left: 12px;
display: flex;
flex-direction: row-reverse;
23
Last updated Jan 12, 2021 @ 4:45 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
23 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Armando
1 year ago

Thanks for the article Nelson, it was very helpful! I applied to the social media section, it worked perfectly.

John
John
1 year ago

You’re doing the lord’s work sir.
Thank you

Jean-Victor Degrève
1 year ago

hello , i tried your code , and it works , but i get a very very tiny image ….?
how can i adjust a proper size of the image ?

thanks

Merry
Merry
1 year ago

This is a great trick… Is there a way to swap the image in the blurb module without right-aligning the entire module? I’d like the image on the right of the header text, but to keep everything left -aligned…

Ferg
Ferg

Hi I have the text aligned to left but the whole module is still aligning to the right of the column. Not sure what I am doing wrong here. Any advice would be appreciated.

Screenshot 2021-02-24 at 8.37.42 AM.jpg
Rach
Rach
9 months ago

Thanks again Nelson , worked wonders 🙂

Aiman
6 months ago

This tutorials work well unless the image size overflow from main content.

I am not sure why it happen, when the image size set to 200px with the body blurb text take out almost 3 lines, it seem not good at all. I need to use very small size of image to make it fit inside the row container.

Aiman
Reply to  Aiman
6 months ago

I discover that in blurb contents, i use direction: rtl; and the padding-left: 12px for image instead of margin fix this problem

Kams
Kams
2 months ago

Great tip!
I am wondering how to achieve the same thing with the toggle module?

Anette
Anette
2 months ago

Great tutorial! But I have one question. I had allready used CSS to make my blurb image larger than what is possible in the Divi module design tab, I used width: 150px;

Following this tutorial, it made my image small again. Is there any way of right aligning the blurb image, like in this tutorial, while KEEPING the width: 150px; ?

Thanks! Anette 🙂

Anette
Anette

Thanks, but nope. In the blurb module you can only change it from super small to small. If you want it a little bigger, you need to do that with CSS. And that’s what I have done. But when I tried your recipe for putting the image on the right, the size og the image changed back to the small standard size (the max size, wich is very small).

Manuel
23 days ago
Hello, thank you very much for your contribution, it is very good! consult ... how can I eliminate the space between the icon on the left and the content of the text, they are far apart ...
Captura de pantalla 2021-02-03 130018.png

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