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 image 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!
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!
I hope you have enjoyed learning How To Align The Divi Blurb Icon Or Image To The Top Left. Please share your thoughts in the comments below. If you find value in this type of post, please subscribe because we have tons of tutorials in progress to be posted!
Subscribe for more stuff like this.
Each month we send out a roundup email newsletter with the latest tutorials, product updates, helpful resources, and any other industry or personal news. Occassionally 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 :)
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.
OUR ONCE A YEAR SALE IS HAPPENING NOW!!!
25% OFF all Divi Plugins, Courses, and Child Themes!
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!
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
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!
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!
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.
Each month we send out a roundup email newsletter with the latest tutorials, product updates, helpful resources, and any other industry or personal news. Occassionally 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 :)
Divi Tutorials On YouTube
Our videos have views! Join subscribers and enjoy over video tutorials!
I’m pleased to announce our next update to version 2.2 of our Divi Events Calendar plugin with a full new search and filter module!
Pin It on Pinterest
{"id":null,"mode":"button","open_style":"in_modal","currency_code":"USD","currency_symbol":"$","currency_type":"decimal","blank_flag_url":"https:\/\/wordpress-292293-1617718.cloudwaysapps.com\/wp-content\/plugins\/tip-jar-wp\/\/assets\/images\/flags\/blank.gif","flag_sprite_url":"https:\/\/wordpress-292293-1617718.cloudwaysapps.com\/wp-content\/plugins\/tip-jar-wp\/\/assets\/images\/flags\/flags.png","default_amount":500,"top_media_type":"none","featured_image_url":false,"featured_embed":"","header_media":null,"file_download_attachment_data":null,"recurring_options_enabled":true,"recurring_options":{"never":{"selected":true,"after_output":"One time only"},"weekly":{"selected":false,"after_output":"Every week"},"monthly":{"selected":false,"after_output":"Every month"},"yearly":{"selected":false,"after_output":"Every year"}},"strings":{"current_user_email":"","current_user_name":"","link_text":"Leave a tip","complete_payment_button_error_text":"Check info and try again","payment_verb":"Pay","payment_request_label":"Pee-Aye Creative","form_has_an_error":"Please check and fix the errors above","general_server_error":"Something isn't working right at the moment. Please try again.","form_title":"Pee-Aye Creative","form_subtitle":null,"currency_search_text":"Country or Currency here","other_payment_option":"Other payment option","manage_payments_button_text":"Manage your payments","thank_you_message":"Thank you for being a supporter! It is people like you who keep us going week after week!","payment_confirmation_title":"Pee-Aye Creative","receipt_title":"Your Receipt","print_receipt":"Print Receipt","email_receipt":"Email Receipt","email_receipt_sending":"Sending receipt...","email_receipt_success":"Email receipt successfully sent","email_receipt_failed":"Email receipt failed to send. Please try again.","receipt_payee":"Paid to","receipt_statement_descriptor":"This will show up on your statement as","receipt_date":"Date","receipt_transaction_id":"Transaction ID","receipt_transaction_amount":"Amount","refund_payer":"Refund from","login":"Log in to manage your payments","manage_payments":"Manage Payments","transactions_title":"Your Transactions","transaction_title":"Transaction Receipt","transaction_period":"Plan Period","arrangements_title":"Your Plans","arrangement_title":"Manage Plan","arrangement_details":"Plan Details","arrangement_id_title":"Plan ID","arrangement_payment_method_title":"Payment Method","arrangement_amount_title":"Plan Amount","arrangement_renewal_title":"Next renewal date","arrangement_action_cancel":"Cancel Plan","arrangement_action_cant_cancel":"Cancelling is currently not available.","arrangement_action_cancel_double":"Are you sure you'd like to cancel?","arrangement_cancelling":"Cancelling Plan...","arrangement_cancelled":"Plan Cancelled","arrangement_failed_to_cancel":"Failed to cancel plan","back_to_plans":"\u2190 Back to Plans","update_payment_method_verb":"Update","sca_auth_description":"Your have a pending renewal payment which requires authorization.","sca_auth_verb":"Authorize renewal payment","sca_authing_verb":"Authorizing payment","sca_authed_verb":"Payment successfully authorized!","sca_auth_failed":"Unable to authorize! Please try again.","login_button_text":"Log in","login_form_has_an_error":"Please check and fix the errors above","uppercase_search":"Search","lowercase_search":"search","uppercase_page":"Page","lowercase_page":"page","uppercase_items":"Items","lowercase_items":"items","uppercase_per":"Per","lowercase_per":"per","uppercase_of":"Of","lowercase_of":"of","back":"Back to plans","zip_code_placeholder":"Zip\/Postal Code","download_file_button_text":"Download File","input_field_instructions":{"tip_amount":{"placeholder_text":"How much would you like to tip?","initial":{"instruction_type":"normal","instruction_message":"How much would you like to tip? Choose any currency."},"empty":{"instruction_type":"error","instruction_message":"How much would you like to tip? Choose any currency."},"invalid_curency":{"instruction_type":"error","instruction_message":"Please choose a valid currency."}},"recurring":{"placeholder_text":"Recurring","initial":{"instruction_type":"normal","instruction_message":"How often would you like to give this?"},"success":{"instruction_type":"success","instruction_message":"How often would you like to give this?"},"empty":{"instruction_type":"error","instruction_message":"How often would you like to give this?"}},"name":{"placeholder_text":"Name on Credit Card","initial":{"instruction_type":"normal","instruction_message":"Enter the name on your card."},"success":{"instruction_type":"success","instruction_message":"Enter the name on your card."},"empty":{"instruction_type":"error","instruction_message":"Please enter the name on your card."}},"privacy_policy":{"terms_title":"Terms and conditions","terms_body":null,"terms_show_text":"View Terms","terms_hide_text":"Hide Terms","initial":{"instruction_type":"normal","instruction_message":"I agree to the terms."},"unchecked":{"instruction_type":"error","instruction_message":"Please agree to the terms."},"checked":{"instruction_type":"success","instruction_message":"I agree to the terms."}},"email":{"placeholder_text":"Your email address","initial":{"instruction_type":"normal","instruction_message":"Enter your email address"},"success":{"instruction_type":"success","instruction_message":"Enter your email address"},"blank":{"instruction_type":"error","instruction_message":"Enter your email address"},"not_an_email_address":{"instruction_type":"error","instruction_message":"Make sure you have entered a valid email address"}},"note_with_tip":{"placeholder_text":"Your note here...","initial":{"instruction_type":"normal","instruction_message":"Attach a note to your tip (optional)"},"empty":{"instruction_type":"normal","instruction_message":"Attach a note to your tip (optional)"},"not_empty_initial":{"instruction_type":"normal","instruction_message":"Attach a note to your tip (optional)"},"saving":{"instruction_type":"normal","instruction_message":"Saving note..."},"success":{"instruction_type":"success","instruction_message":"Note successfully saved!"},"error":{"instruction_type":"error","instruction_message":"Unable to save note note at this time. Please try again."}},"email_for_login_code":{"placeholder_text":"Your email address","initial":{"instruction_type":"normal","instruction_message":"Enter your email to log in."},"success":{"instruction_type":"success","instruction_message":"Enter your email to log in."},"blank":{"instruction_type":"error","instruction_message":"Enter your email to log in."},"empty":{"instruction_type":"error","instruction_message":"Enter your email to log in."}},"login_code":{"initial":{"instruction_type":"normal","instruction_message":"Check your email and enter the login code."},"success":{"instruction_type":"success","instruction_message":"Check your email and enter the login code."},"blank":{"instruction_type":"error","instruction_message":"Check your email and enter the login code."},"empty":{"instruction_type":"error","instruction_message":"Check your email and enter the login code."}},"stripe_all_in_one":{"initial":{"instruction_type":"normal","instruction_message":"Enter your credit card details here."},"empty":{"instruction_type":"error","instruction_message":"Enter your credit card details here."},"success":{"instruction_type":"normal","instruction_message":"Enter your credit card details here."},"invalid_number":{"instruction_type":"error","instruction_message":"The card number is not a valid credit card number."},"invalid_expiry_month":{"instruction_type":"error","instruction_message":"The card's expiration month is invalid."},"invalid_expiry_year":{"instruction_type":"error","instruction_message":"The card's expiration year is invalid."},"invalid_cvc":{"instruction_type":"error","instruction_message":"The card's security code is invalid."},"incorrect_number":{"instruction_type":"error","instruction_message":"The card number is incorrect."},"incomplete_number":{"instruction_type":"error","instruction_message":"The card number is incomplete."},"incomplete_cvc":{"instruction_type":"error","instruction_message":"The card's security code is incomplete."},"incomplete_expiry":{"instruction_type":"error","instruction_message":"The card's expiration date is incomplete."},"incomplete_zip":{"instruction_type":"error","instruction_message":"The card's zip code is incomplete."},"expired_card":{"instruction_type":"error","instruction_message":"The card has expired."},"incorrect_cvc":{"instruction_type":"error","instruction_message":"The card's security code is incorrect."},"incorrect_zip":{"instruction_type":"error","instruction_message":"The card's zip code failed validation."},"invalid_expiry_year_past":{"instruction_type":"error","instruction_message":"The card's expiration year is in the past"},"card_declined":{"instruction_type":"error","instruction_message":"The card was declined."},"missing":{"instruction_type":"error","instruction_message":"There is no card on a customer that is being charged."},"processing_error":{"instruction_type":"error","instruction_message":"An error occurred while processing the card."},"invalid_request_error":{"instruction_type":"error","instruction_message":"Unable to process this payment, please try again or use alternative method."},"invalid_sofort_country":{"instruction_type":"error","instruction_message":"The billing country is not accepted by SOFORT. Please try another country."}}}},"fetched_oembed_html":false}
Thank´s Nelson !!!!!.
Have a nice day.
Guillermo
Hey Guillermo,
You are welcome! Glad you found this helpful! 🙂
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!
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!
Hello Nelson
I am Sonam from Bhutan
This is what I would like to achieve with the blurb..
Hi Sonam,
I’m not sure what you are asking. Do you mean having the category highlighted?
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
Hi Sonam,
I’m not sur exactly what you mean. Could you explain it?
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!
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!
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!
You’re welcome! Glad you got it!