Find Talent Column Redesign

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!):

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!