You can redesign the standard design of the Find a Talent page from one column of Talent items, into 3 columns, that look like this (ignore the black and white theme!):
![](https://talentpools.io/wp-content/uploads/2024/07/talent-pools-platform-redesign.png)
To add this redesign to your platform, add this CSS to your styling page:
.freelancers-list {
display: grid !important;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 20px;
}
.freelancers-list .freelancer__list-item {
padding: 0 !important;
padding-bottom: 20px !important;
border: 1px solid #027bfe !important;
}
#app div.freelancers-list div {
background: #1e1e1e !important;
justify-content: center;
}
#app div.freelancers-list .freelancer-info-container div {
margin-bottom: 5px !important;
}
#app
.freelancers-list
.customer__item-wrapper
.customer__item-wrapper__avatar
div {
margin-bottom: -10px !important;
padding-top: 10px !important;
padding-bottom: 10px !important;
background-image: linear-gradient(
to bottom,
#141414 50%,
#1e1e1e 50%
) !important;
}
.freelancers-list .customer__item-wrapper {
display: flex;
flex-direction: row;
width: 100%;
flex-wrap: wrap;
}
.freelancers-list .customer__item-wrapper > div {
flex: auto;
max-width: 100% !important;
padding: 0 !important;
text-align: center;
background: #1e1e1e !important;
}
.freelancers-list .customer__item-wrapper .reviews-view-profile-btn-container {
padding-left: 10px !important;
}
.freelancers-list .customer__item-wrapper > div .row {
margin: 0 !important;
}
#app
.freelancers-list
.customer__item-wrapper
.custom-data-top-section-cl-search-page-list {
position: absolute;
right: 0;
margin: 10px 10px 0 0;
background-color: transparent !important;
z-index: 1;
}
#app
.freelancers-list
.customer__item-wrapper
.custom-data-top-section-cl-search-page-list
span {
color: #027bfe !important;
}
.freelancers-list .customer__item-wrapper .editable_profile__avatar-profile {
width: 100%;
height: 100%;
max-width: 100px;
max-height: 100%;
border-radius: 50% !important;
background-size: cover;
margin: 6px 0;
}
.freelancers-list .customer__item-wrapper .data-types-concat-list {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
gap: 5px;
margin-bottom: 20px !important;
padding: 20px !important;
padding-top: 0 !important;
}
.freelancers-list .customer__item-wrapper .data-types-concat-list li::before,
.freelancers-list
.customer__item-wrapper
.freelancer_rating
.star_icon
i.fa-star {
color: #027bfe;
}
.freelancers-list .customer__item-wrapper .data-types-concat-list li {
text-align: left;
font-size: small;
padding: 0 !important;
}
.freelancers-list
.customer__item-wrapper
.single_freelancer_profile_bttn
button {
max-width: fit-content !important;
margin: 0 auto !important;
margin-bottom: 10px !important;
}
.freelancers-list .freelancer-custom-data-line1 {
display: block !important;
}
.freelancers-list .reviews-view-profile-btn-container .view-profile-button {
display: none !important;
}
.freelancers-list .single_freelancer_profile_bttn .view-profile-button {
display: block !important;
}
// responsive
@media (max-width: 767px) {
.freelancers-list div.customer__item-wrapper__avatar {
max-width: 30% !important;
}
.freelancers-list div.freelancer-info-container {
max-width: 70% !important;
text-align: left;
}
.freelancers-list div.freelancer-info-container .row {
display: block !important;
padding: 10px;
}
.freelancers-list div.freelancer-info-container .row > div {
display: inline !important;
}
.freelancers-list .customer__item-wrapper > div.freelancer_rating {
max-width: 50% !important;
}
.freelancers-list
.customer__item-wrapper
> div.freelancer-custom-data-colums-container {
display: flex;
flex: 1;
justify-content: left !important;
}
.freelancers-list .reviews-view-profile-btn-container .view-profile-button {
display: block !important;
}
.freelancers-list div.reviews-view-profile-btn-container {
flex: none !important;
text-align: left !important;
}
.freelancers-list .single_freelancer_profile_bttn .view-profile-button {
display: none !important;
}
#app
.freelancers-list
.customer__item-wrapper
.customer__item-wrapper__avatar
div {
background-image: none !important;
margin-left: 5px;
}
}
Any questions, just let us know!