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