Jump to content

Custom plugin triggers a design bug

Go to solution Solved by Caroline_Smith,

Recommended Posts

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;
            }
          }
        }
      }
    }
  }

Screenshot 2022-02-11 at 11.47.22.png

Link to comment
  • Solution

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;
 }

 

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

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.