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

Last updated May 29, 2021 @ 10:06 am


Each month we send out a roundup email newsletter with the latest tutorials, product updates, helpful resources, and any other industry or personal news. Occasionally we send an extra separate email here and there if we just can’t wait! So that’s what you will get if you subscribe, and you can always unsubscribe at any time if you just can’t take it anymore :)

Please share this post!

Nelson Lee Miller (aka The Divi Teacher)

Nelson is the owner of Pee-Aye Creative in the beautiful state of Pennsylvania. He loves helping small businesses, exploring outdoors, building websites with Divi, and teaching others.

Leave A Response!

By commenting you agree to our Blog & YouTube Comments Policy


  1. Guillermo

    Thank´s Nelson !!!!!.

    Have a nice day.


  2. Pedro Martinez

    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!

    • Nelson Lee Miller (aka The Divi Teacher)

      Thank you Pedro,
      I’m so glad I could save your sanity! 🙂 That makes it all worthwhile knowing my content is helping people like you with Divi!

  3. Sonam Tshering

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

  4. Sonam Tshering

    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

  5. Shannon

    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’), to no avail. I also tried changing Blurb setting > Design > Image/Icon placement on mobile to ‘top’, and then back to ‘left’, and it doesn’t seem to make a difference either way, it still looks like the screenshot below.

    I feel like I’m missing something here, but I just can’t seem to figure out what. Thanks for any help you can provide!

    • Nelson Lee Miller (aka The Divi Teacher)

      Hi Shannon,
      I see that Divi/WordPress has been updated and so I needed to update the post. So I actually just rewrote #3 and now you can do it totally within the builder without the snippet. Take a look!

      • 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!

Submit a Comment

Your email address will not be published.

Recent Posts

Pin It on Pinterest


Your Cart