- This topic has 7 replies, 3 voices, and was last updated 3 years, 5 months ago by
.
-
Posts
-
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
Customer Support
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
Customer Support
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.
- You must be logged in to reply to this topic.
