בניית המלצות במבנה 3 עמודות

כדי לשים את ההמלצות במבנה של 3 עמודות, יש להשתמש בקוד ה-CSS הבא:

/*Basic Thirds Code*/
.testimonials_list .item {
 width: 33% !important;
 float: right;
 display: block;
 clear: none;
}
/*Photo Alignment & size*/
.testimonials_list .item .photo {
 width: 130px;
 display: block;
 float: none;
 margin: 0 auto;
 position:relative;
 left:-20px;
}
/*Rounded Corners / Circle: enlarge radius*/
.testimonials_list .item .photo img {
 border-radius:20px !important;
}
/*Remove Border & Animation*/
.testimonials_list .image_frame {
 border: 0px;
}
.testimonials_list .item .image_frame:hover .image_wrapper img, .testimonials_list .item .image_frame.hover .image_wrapper img {
 -webkit-transform: scale(1);
 -moz-transform: scale(1);
 -o-transform: scale(1);
 transform: scale(1);
}
/*Center Title & Line*/
.testimonials_list .item .desc h4 {
 text-align:center;
}
.testimonials_list .item .desc hr.hr_color {
 margin:0 auto;
 width:40% !important;
}
/*Adjust Width*/
.testimonials_list .item .desc {
 width:90%
}
/*Break line every 3 Testimonials*/
.testimonials_list .item:nth-child(3n+1) {
 clear:right;
}

והתאמות למובייל עם הקוד הבא:

@media (max-width: 1000px) { /*-----ai---------Start Mobile-Range-----------*/
.testimonials_list div.item .photo {
 left:0px !important;
}
.testimonials_list div.item .desc {
 margin: 0 5% 40px;
}
 /*Basic Thirds Code*/
.testimonials_list div.item {
 width: 100% !important;
 float: none !important;
 clear: both;
 margin-bottom:70px !important;
}
} /*-----ai---------End Mobile-Range-----------*/

קוד להסתרת הפס מתחת לשם הממליץ:

div.testimonials_list .item .desc hr.hr_color {
  display:none;
}

הזזת האייקון והשם ימינה:

.testimonials_list .photo {
  width:100% !important;
}
.testimonials_list .photo .image_wrapper {
  position:relative;
  right:85px;
}
.testimonials_list h4 {
  text-align:right !important;
  color:#898345;
}

קוד להוספת אייקונים (5 כוכבים):

.testimonials_list h4:before {
content: '\e929\e929\e929\e929\e929';
font-family: 'mfn-icons';
padding-left:5px;
letter-spacing:0.2ex;
}