Incorrect link formatting on all links, especially in sentences with two lines

Design help CMS
1

All the links on my website are not formatted correctly, especially when the sentence with the link takes up two lines. For example, the links on the screenshot look off.

I’ve already checked for hidden CSS on both the page and site levels but didn’t find anything wrong. In the past, I would remove formatting before pasting into the CMS, and that worked. However, this time it didn’t fix the problem.

Here’s a screenshot showing the issue:

Screenshot 2024-09-25 at 11.31.40 PM
Screenshot 2024-09-25 at 11.31.40 PM2050×240 34.2 KB

Here is the only formatting code I could find:

7474AE1E-A694-40EF-886D-FE092B137C06
7474AE1E-A694-40EF-886D-FE092B137C061292×852 133 KB

Has anyone else had this issue or knows how to fix it? Any help is appreciated! Thank you.

2

It’s not possible to guess without see the published site and your readonly designer link.

Could be that your links are in rich text and your rich text styling needs adjusted. Could be custom CSS. Could be that All Links is styled incorrectly.

Those are the most likely causes.

2 Likes
3

Thanks a lot for your help!

Here’s the readonly designer link.:
https://preview.webflow.com/preview/505-clean-queens?utm_medium=preview_link&utm_source=designer&utm_content=505-clean-queens&preview=857ab49e5696a0dcb59280fdbb64e74f&workflow=preview

I’ll also check the rich text settings and All Links styling. I really appreciate your support!

4

The main problem is that you have All Paragraphs set to flex, which treats all of the individual objects within it ( including links ) as individual items it must layout.

Remove that styling and your paragraphs will work much better.

It you don’t remember settings this, it’s possible that the template designer did this- so make sure to check your site for areas where the design actually requires the paragraphs to be flex-layout, and you can apply it to those specific classes individually.

5

It seems the blog does not inherit All Paragraphs. Instead, it inherits only the Body (All Pages) and Rich Text Block 4, which is set to block, not flex.

Screenshot 2024-09-30 at 7.48.43 AM
Screenshot 2024-09-30 at 7.48.43 AM566×748 46.4 KB

Screenshot 2024-09-30 at 7.48.20 AM
Screenshot 2024-09-30 at 7.48.20 AM2460×748 183 KB

Is the ‘All Paragraphs’ style overriding these style selectors?

6

That seem unlikely- Webflow’s CSS is site-wide, so all pages are affected by the same set of rules and the same CSS specificity.

It should. On your paragraphs, any <body> styles would be overridden by <p> styles.

7

The entire website looks okay, the issue is only with the blog format. Do you recommend using a combo class to only override the blog template, or should we modify all paragraphs, which could be risky?

8

You’re painting yourself into a corner if you’re trying to apply a fix on top of a fix. You’ll end up with a lot of duct tape and a very fragile build.

I’d fix the problem at the source. All Paragraphs should not be flex. Maybe a specific container? Rethink what you’re trying to do and when you need to break the rules, isolate that anomaly so it doesn’t affect the rest of your site. You might have a reason to make paragraphs flex, but only in one specific place, not site-wide.

9

Thanks for the advice! What is your recommendation on the process to go about fixing it?

10

Revert all paragraphs back to block so they function normally.
If you have places you actually need paragraphs to be flex, assign a class and set only that class to flex.