[Support request] Image and text are too close

[Krish]

On the Mobile version Images and the text are close together.

I’m getting the error – “Clickable elements too close together” from the Google search console.

Also, how can I change the gap between paragraphs and headings?

I’ve attached the link and screenshot.

How to fix this?

Thanks

[David]

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;
}

[Krish]

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

[Fernando]

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?

[Krish]

Ok.

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

Thanks

[Fernando]

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;
    }
}

[Krish]

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

[Fernando]

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.

[Author]

Posts