วิธีสร้าง Responsive Testimonials ด้วย CSS

Responsive Testimonial Cards: การ์ดรับรอง/รีวิวที่ปรับตัวตามหน้าจอ

ใช้ Flexbox/Float + Media Query ทำให้รูปโปรไฟล์และข้อความจัดเรียงแนวนอนบน Desktop และซ้อนแนวตั้ง (center) บน Mobile (max-width: 500px)

โค้ดตัวอย่าง

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <style>
    body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; }
    .testimonialContainer {
      border: 2px solid rgba(0, 0, 0, 0.363);
      background-color: rgb(207, 235, 218);
      border-radius: 5px; padding: 16px; margin: 16px 0;
    }
    .profilePic { width: 100px; height: 100px; }
    .testimonialContainer::after { content: ""; clear: both; display: table; }
    .testimonialContainer img { float: left; margin-right: 20px; border-radius: 50%; }
    .testimonialContainer span { font-size: 24px; font-weight: 500; margin-right: 15px; color: purple; }
    .testimonialContainer p { font-size: 18px; font-style: oblique; }
    @media (max-width: 500px) {
      .testimonialContainer { text-align: center; }
      .testimonialContainer img { margin: auto; float: none; display: block; }
    }
  </style>
</head>
<body>
  <h1>Responsive Testimonials Example</h1>
  <div class="testimonialContainer">
    <img class="profilePic" src="..." />
    <span>James Anderson</span>
    <p>Shawn is a hard working and committed individual</p>
  </div>
  <div class="testimonialContainer">
    <img class="profilePic" src="..." />
    <span>Steve Boulder</span>
    <p>Shawn is great at managing people</p>
  </div>
</body>
</html>

แนวทางทันสมัย: Flexbox (แนะนำ)

.testimonialContainer {
  display: flex; gap: 20px; align-items: flex-start;
  padding: 24px; border-radius: 12px; background: #f9f9f9;
}
@media (max-width: 600px) {
  .testimonialContainer { flex-direction: column; align-items: center; text-align: center; }
  .testimonialContainer img { margin: 0; }
}

UI/UX Tips สำหรับ Testimonials

• ใช้รูปจริง (ไม่ใช่ stock photo) + ชื่อ/ตำแหน่ง/บริษัท เพื่อความน่าเชื่อถือ
• เพิ่ม Star rating (★★★★★) ด้วย CSS color: gold
• Carousel/Slider สำหรับหลาย testimonials (Swiper, Splide, หรือ CSS scroll-snap)
• Schema.org Review markup สำหรับ SEO Rich Snippets