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!

20

Last updated Aug 31, 2021 @ 11:04 am

Subscribe

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

8 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
  3. Marie-Lise

    Hi Nelson, thanks so much for all the tutorials and super helpful explanations! 🙂 I’ve used your code a lot throughout the years and learned even more. I’ve implemented this code as you described but nothing changes on my page. Do you have any idea what the reason could be? The page where I’ve implemented this isn’t published yet but I’ve used other code from your website on this page and those snippets work…Thanks a lot!

    Reply
    • Hemant Gaba

      Hey Marie,

      It would be great if you publish the page provide us the URL for us to investigate further as the code is working on my end.

      Reply

Submit a Comment

Your email address will not be published.

Recent Posts

Pin It on Pinterest

0

Your Cart