text overlay at articles search on mobile

Hi Mihai,

It’s probably that you have a very small line-height defined in Appearance > Customize > Typography for either the Blog Archive Title or for the H2 heading https://vertis.d.pr/i/HVoiJh. You need to check those values on mobile.

Regards,

Rodica

Thanks for the note. The article titles appear just fine on the blog page though. It’s only when I perform a keyword search in the search box at the end of the 3rd article (again, mobile only), when the articles titles appear overlayed.

Hi,

That’s happening because you are using some plugin to create the blog page. Is not using the default layout from Neve. That’s why there is a difference between the titles on the blog page and the ones from the search page ( coming from Neve ). If you follow the steps I’ve shared before, the title should be right.

Regards,

Rodica

Thank you for the note, Rodica. I followed the exact recommendation you provided (i.e. setting the line height for the blog archive title to 1 PX: https://prnt.sc/3TzRTYDXQZhK) and am still getting the same title overlay error: https://prnt.sc/UFOuY5LbwEsj

Any idea on what I could further try out?

Cheers,
M

Hi @nutrifix!

The screenshot provided above served as an example to show where the Line Height field can be found, so please set a higher value in the Line Height field than 1px. Also, please make the same adjustment for the H3 heading on mobile.

I hope this helps!

Thank you for the note, Lucia. Even when I set the post title line height at 40PX: https://snipboard.io/KJpnTg.jpg , as well as the H2 heading at the same height of 40PX: https://snipboard.io/rRnwHO.jpg , the search results in the blog archive show the titles overlayed: https://snipboard.io/a2JLCO.jpg

Is there anything that I am missing?

Cheers,
M

Hi @nutrifix,

I have checked your site on mobile and couldn’t see the issue.

Please let us know if you still have this issue at your end.

Hey Poonam. Thank you for the message. Yes, when doing a search on the blog page for ‘carnitine’, I get the following results: https://hmp.me/d7vy

As you can see, the article titles are still overlayed. Did the browsing and search on incognito mode, so there is no cache issue here..

Any thoughts on how to fix this?

Cheers,
Mihai

Hi @nutrifix,

Thank you for the update and I’m sorry for the late reply here.

I can see the issue on mobile devices for the search results – https://vertis.d.pr/i/JiZhc7. The font size in the post title for mobile devices is currently set to 16px. I recommend setting the line height for mobile devices to 32px for the post title; here is an example of the result – https://vertis.d.pr/i/WMOsU8.

In case you are using a caching solution, please clear the cache after applying the changes to make sure it will reflect on the front end.

Let us know how it goes.

Thanks for the note, @stefancotitosu. Where do I need to make that change from though? Any post template or from the Blog page?

Cheers,
M

Hi @nutrifix,

This change can be applied in Dashboard -> Appearance -> Customize -> Typography -> Blog panel, blog archive section, Post Title accordion, and change the value for Mobile devices – https://vertis.d.pr/i/B85f8z.

Regards,
Stefan

Hey @stefancotitosu ,

Followed the steps exactly and changed the line height from 40 to 32 (yes, it was 40, not 16 px) and still have the same issue, upon performing a search on the blog page (on mobile): https://ezgif.com/image-to-datauri/ezgif-3-dcf5ea610d.jpg (after clearing the non LQIP cache from LiteSpeed)

Any idea what might be going on?

Cheers,

Mihai

• This reply was modified 1 year, 2 months ago by nutrifix.

Hi @nutrifix,

Please try changing the value of the following setting: Dashboard -> Appearance -> Customize -> Typography -> Headings panel. Then in the H3 accordion, change the value of line height for Mobile devices – https://vertis.d.pr/i/4ViFMe. As for the value you can try 1.2 EM or 32 PX.

I hope this will help.

Thanks a ton, @stefancotitosu . Seems to be working now.

All the best,
Mihai

Hi @nutrifix,

Awesome, I’m glad to hear it works as expected.

Best regards,