How To Align The Divi Blog Module Image With The Title And Details Tutorial by Pee Aye Creative

How To Align The Divi Blog Module Image With The Title And Details

In this tutorial I will show you a quick way to remove the negative margin on the Divi Blog module and align the image with the details.

Join subscribers on our YouTube channel and enjoy other Divi video tutorials!

How To Remove The Negative Margin On The Divi Blog Feed Image

As I mentioned in the intro, Divi has some odd -19px of margin around the Blog module featured image. This is actually applied to an outer “container” of the image. There are two ways we could reverse that. We could simply add 19px of margin back in to the image itself, but that seems weird to have -19px applied and then add 19px to offset it. Instead, I’m going to just give you the code to set the margin to 0px on the container. 

If you are using our free Divi child theme, place this snippet into the style.css file. Otherwise, place this in your Divi>Theme Options>Custom CSS code box. If you need help, check out our complete guide on Where To Add Custom Code In Divi.

/*remove negative margins from blog featured image*/

.et_pb_image_container {
	margin: 0px;
}

Be sure to watch the video to see this all in action and to see how simple this solution is! You could also check out our main blog feed to see that our images are aligned with the text as well.

Keep in mind that if you only want this to apply to specific Blog modules, you would need to add a custom class in the module and before the selector.

Now that you have removed the margin around the image, you may want to go to the next solution below as an optional continuation of this.

How To Add Spacing Around Each Post In The Divi Blog Feed

Now that you have the Divi blog image aligned with the title and text, you may want to go a step further. This next snippet is totally optional but would make good sense if you have a background color set for the indivual posts. Now that the image and text are aligned, they would both be flush with the edges of the post, so this spacing makes it all look great.

/*add spacing around the individual blog posts*/

.et_pb_blog_grid .et_pb_post {
	padding: 30px;
}

That’s it for this one, but we have a lot of new and exciting Divi Blog module tutorials planned! Let me know in the comments if you enjoyed this!

11
Last updated Aug 31, 2021 @ 11:04 am

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!

By commenting you agree to our Blog & YouTube Comments Policy

6 Comments

  1. Nissim Lanciano

    thank you again, Sir
    Question can you share the CSS extension for chrome looks very cool I couldn’t find it thank you

    Reply
  2. Beto

    Thanks !! I can’t see the css in this and others post – could You help how i can see ir?! Thanks. Bescuse your content are awesome

    Reply

Submit a Comment

Your email address will not be published. Required fields are marked *

Asset 7

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

Our videos have views! Join subscribers and enjoy over video tutorials!

Visit Our Channel

Recent Posts

Pin It on Pinterest

0

Your Cart