kristyna Posted February 11, 2022 Share Posted February 11, 2022 Site URL: https://kristyna.co/about-me Hi, I've a custom plugin for a vertical timeline - you'll see it when you scroll down the URL I've provided. Only recently I started seeing a small design problem - an underline under an existing link underline. See example attached. The Squarespace customer support told me that it has been triggered by the custom CSS code. I'm adding it below. I'd be grateful if somebody can help. Sadly, the people I bought the plugin from (https://squarestud.io/) don't respond to my emails. Thank you! p a {text-decoration: none; color: #AEADAD !important; border-bottom: 1px solid #edeeef; } // COLORS // LINE .timeline:before { background: #EDC100; } // DOTS .timeline-img { background: #000000; } // TIMELINE ITEM BACKGROUND .timeline-content { background: #; } // SUBTITLE AREA .Xdate { background: #; color: #000000; } .timeline:before { content: ''; width: 5px; display:block; height: 100%; position: absolute; left: 50%; transform: translateX(-50%); } .timeline-img { width: 30px; height: 30px; border-radius: 50%; position: absolute; left: 50%; margin-top: 65px; margin-left: -15px; } .timeline-item:nth-child(even) { .timeline-content { float: right; .Xdate { right: auto; left: 0; } &::after { content: ''; position: absolute; border-style: solid; width: 0; height: 0; top: 70px; left: -15px; border-width: 10px 15px 10px 0; border-color: transparent #fafafa transparent transparent; } } } .timeline-item { width: 100%; margin-bottom: 70px; &::after { content: ''; display: block; clear: both; } } .timeline-content { position: relative; width: 45%; box-sizing: border-box !important; padding: 80px 40px 30px 40px !important; border-radius: 1px; &::after { content: ''; position: absolute; border-style: solid; width: 0; height: 0; top: 70px; right: -15px; border-width: 10px 0 10px 15px; border-color: transparent transparent transparent #fafafa; } } .Xdate { display: inline-block; padding: 15px 40px; font-size: 18px; position: absolute; top: 0; width: 100%; box-sizing: border-box !important; right: 0; } @media screen and (max-width: 768px) { .timeline { &::before { left: 20px; } .timeline-img { left: 20px; } .timeline-content { max-width: 100%; width: auto; margin-left: 70px; } .timeline-item { &:nth-child(even) { .timeline-content { float: none; } } &:nth-child(odd) { .timeline-content { &::after { content: ''; position: absolute; border-style: solid; width: 0; height: 0; top: 70px; left: -15px; border-width: 10px 15px 10px 0; border-color: transparent #fafafa transparent transparent; } } } } } } Link to comment
Solution Caroline_Smith Posted February 11, 2022 Solution Share Posted February 11, 2022 Hi there! It looks like this is occurring because the plugin you bought is adding a border-bottom to links everywhere instead of only in the timeline. To fix this, you just need to specify that you only want underlines underneath links in the timeline. Just replace the first CSS rule you pasted above with the following code: .timeline p a { text-decoration: none; color: #AEADAD !important; border-bottom: 1px solid #edeeef; } kristyna 1 Feel free to email me with any customization inquiries or questions you may have! Free Squarespace Resources: DevTools Minicourse, 11-Step Guide to Improve Custom CSS, Free Product/Pricing Comparison Table Generator Link to comment
kristyna Posted February 14, 2022 Author Share Posted February 14, 2022 Caroline, you're amazing, it worked! Thank you! Link to comment
Caroline_Smith Posted February 14, 2022 Share Posted February 14, 2022 You're welcome - glad I could help! Feel free to email me with any customization inquiries or questions you may have! Free Squarespace Resources: DevTools Minicourse, 11-Step Guide to Improve Custom CSS, Free Product/Pricing Comparison Table Generator Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment