Image and text are too close

Hi there,

i tested a few pages using Mobile Friendly test and they all passed:

https://search.google.com/test/mobile-friendly/result?id=amtwjimHHQYJh7Q8ssCfDw

May just be Google bot being overloaded, recrawl the links later today to see if the warning passes.

The space after the image.
Add this CSS:

.figure {
    margin-bottom: 1.5em;
}

Yeah, Whenever i test the live URL it gets passed. But overall the site has indexing issues. So I think it's because of this issue.

Can I adjust the spacing between the elements using the Customizer? Like with realtime editing?

Thanks

Hi Krish,

You're site is passing on Google's Mobile-Friendly test as well when I tested.

You'll need custom CSS most likely. In what way are you wanting to add spacing? Perhaps we can increase the default bottom margin for Paragraphs and Headings on mobile?

Ok.

Could you give me the code to increase the bottom margin for paragraphs and headings on mobile?

Thanks

You can try adding something like this in Appearance > Customize > Additional CSS:

@media (max-width: 768px) {
   .entry-content :is(p, h1, h2, h3, h4, h5, h6) {
        margin-bottom: 40px;
    }
}

This works. But the spacing between the image and text is still not changing.

You can change the code to this:

@media (max-width: 768px) {
   .entry-content :is(p, h1, h2, h3, h4, h5, h6, .wp-block-image) {
        margin-bottom: 40px;
    }
}

This will apply the same bottom margin to images as well on Mobile view.