כדי לשים את ההמלצות במבנה של 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; }