How to avoid overlapping of text in Grid-Sytle?

Viewing 8 replies - 1 through 8 (of 8 total)
  • Plugin Author Ajay

    (@ajay)

    3 years, 3 months ago

    Can you please post a link to the page where you see this? I think a bit of CSS might help fix this.

    
.crp_related ul {
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)) !important;
}

    Potentially changing the 150px to something bigger. You can add this in your Styles tab > custom styles

    • This reply was modified 3 years, 3 months ago by Ajay.
    Thread Starter niclasto

    (@niclasto)

    3 years, 3 months ago

    Hey,

    thanks for your answer. When I change to at least 157px it works, however, it changes the whole structure in the mobile version then.

    Here is how it looks in mobile version when I change to 157px:

    https://prudentwater.com/wp-content/uploads/2021/01/Screenshot-mobile.jpg

    If I do not integrate the CSS-code it works fine as it should for the mobile version. So is there a way to change it only for the desktop version and to leave it as it is for the mobile version?

    Here is the link but I do not have it activated right now: https://prudentwater.com/verwasserungseffekt/

    Many thanks in advance!

    Niclas

    Plugin Author Ajay

    (@ajay)

    3 years, 3 months ago

    What does the mobile version look like without the change to 157px?

    I’ll need to see what it looks like on your site to get a sense of what needs to be changed.

    Thread Starter niclasto

    (@niclasto)

    3 years, 3 months ago

    This is how it looks in the mobile version without the css code – it can stay that way.

    https://prudentwater.com/wp-content/uploads/2021/01/Screenshot_20210110_194707_com.android.chrome.jpg

    Regards,

    Niclas

    Plugin Author Ajay

    (@ajay)

    3 years, 3 months ago

    Thanks. I’ve been working on a new version to fix that. Adding word-break: break-word; to the li element should wrap a long word onto the new line without breaking layout.

    I’m releasing this in v3.0.3 which should be out shortly.

    Plugin Author Ajay

    (@ajay)

    3 years, 3 months ago

    I released v3.0.3 – please can you check? You might need to clear your browser cache and any other caching plugins you have

    Thread Starter niclasto

    (@niclasto)

    3 years, 3 months ago

    I have added it and it works fine now! Many thanks for your help indeed!

    Regards,

    Niclas

    Plugin Author Ajay

    (@ajay)

    3 years, 3 months ago

    Thanks for confirming!

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘How to avoid overlapping of text in Grid-Sytle?’ is closed to new replies.