Borders on Universal Search Page

Search Best Practices - Search Front-End
1

Hi all!

I am working on styling for a client, and I’m working off of a mock-up. The goal is to only have border-top and border-bottom for the results cards. Unfortunately, the borders seem to be overlapping/bolding themselves in the middle 2 entities of the Universal Search, but the first top border and the last bottom border is fine.

I’ve tried to update borders of different elements and was unable to get the desired behavior. Please see current state here:

image
image1133×618 25.9 KB

The code is as follows in the frontend:

// Border Styling
.HitchhikerResultsStandard-title {
border-left: none;
border-right: none;
border-top: none;
border-bottom: none;
}
.HitchhikerResultsStandard-titleLabel {
border-left: none;
border-right: none;
border-top: none;
border-bottom: none;
}
.HitchhikerResultsStandard-Card {
border-left: none;
border-right: none;
border-top: 1px solid #c5bbb1;
border-bottom: 1px solid #c5bbb1;
padding-bottom: 30px;
padding-top: 7px;
}
.HitchhikerResultsStandard-viewMore {
border-left: none;
border-right: none;
border-bottom: none;
border-top: none;
}
.yxt-Card {
border-left:none;
border-right: none;
border-top: none;
border-bottom: 1px solid #c5bbb1;
}

Any ideas on how to “un-bold” the middle 2 borders on Universal Search page?

Thanks so much in advance!
Ariana

2

Since I have top and bottom borders, they are overlapping.

I solved by removing the top border and including a bottom-border on the section header:

.HitchhikerResultsStandard-title {
border-left: none;
border-right: none;
border-top: none;
border-bottom: 1px solid #c5bbb1;
}
.HitchhikerResultsStandard-titleLabel {
border-left: none;
border-right: none;
border-top: none;
border-bottom: none;
}
.HitchhikerResultsStandard-Card {
border-left: none;
border-right: none;
border-top: none;
border-bottom: 1px solid #c5bbb1;
padding-bottom: 30px;
padding-top: 7px;
}
.HitchhikerResultsStandard-viewMore {
border-left: none;
border-right: none;
border-bottom: none;
border-top: none;
}
.yxt-Card {
border-left:none;
border-right: none;
border-top: none;
border-bottom: 1px solid #c5bbb1;
}