Last active
November 7, 2024 11:31
-
-
Save kyrylo/2cb9fca0ffd411869dc6a74407f2237a to your computer and use it in GitHub Desktop.
Mobile-friendly testimonials in CSS (no JS!) with the columns property. https://x.com/kyrylosilin/status/1854465457513722207
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1"> | |
| <title>Masonry layout with CSS columns</title> | |
| <style> | |
| body { font-family: "Lucida Grande"; padding-bottom: 2000px; } | |
| blockquote { margin: 0; } | |
| .testimonials { | |
| width: min(1000px, 100%); | |
| margin: 0 auto; | |
| columns: 3; | |
| column-gap: 1em; | |
| } | |
| @media (max-width: 768px) { | |
| .testimonials { | |
| columns: 2; | |
| } | |
| } | |
| @media (max-width: 480px) { | |
| .testimonials { | |
| columns: 1; | |
| } | |
| } | |
| .testimonial { | |
| margin: 0 0 0.5em 0; | |
| padding: 1em; | |
| background-color: #ccc; | |
| break-inside: avoid; | |
| } | |
| .testimonial__author { | |
| margin-top: 0.5em; | |
| font-size: 14px; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <h1 style="text-align: center;">Masonry layout with CSS columns</h1> | |
| <div class="testimonials"> | |
| <figure class="testimonial"> | |
| <blockquote class="testimonial__quote"> | |
| "Telebugs has completely changed the way we handle errors. Having real-time updates straight to our Telegram makes | |
| it so easy to keep track, and our team can fix issues before they affect our users. Lifesaver!" | |
| </blockquote> | |
| <figcaption class="testimonial__author"> | |
| — <cite>Alex M., CTO of Devify</cite> | |
| </figcaption> | |
| </figure> | |
| <figure class="testimonial"> | |
| <blockquote class="testimonial__quote"> | |
| "Finally, a monitoring tool that doesn’t feel overwhelming! Telebugs fits into our workflow perfectly—no more | |
| juggling dashboards and endless notifications. Now we get only the important stuff right in our Telegram." | |
| </blockquote> | |
| <figcaption class="testimonial__author"> | |
| — <cite>Maria T., Backend Developer at SkyHub</cite> | |
| </figcaption> | |
| </figure> | |
| <figure class="testimonial"> | |
| <blockquote class="testimonial__quote"> | |
| "I’ve tried every error tracker out there, and Telebugs is by far the best. The setup was a breeze, and the | |
| instant alerts let us catch bugs in production before they cause real damage. Couldn’t be happier!" | |
| </blockquote> | |
| <figcaption class="testimonial__author"> | |
| — <cite>James K., Lead Engineer at CodeFusion</cite> | |
| </figcaption> | |
| </figure> | |
| <figure class="testimonial"> | |
| <blockquote class="testimonial__quote"> | |
| "Telebugs is like having an extra pair of eyes on my code 24/7. I get updates in real-time, so I can respond to | |
| errors immediately. Plus, my team loves how it keeps the alert noise low." | |
| </blockquote> | |
| <figcaption class="testimonial__author"> | |
| — <cite>Rachel P., Product Manager at ClearBit</cite> | |
| </figcaption> | |
| </figure> | |
| <figure class="testimonial"> | |
| <blockquote class="testimonial__quote"> | |
| "Our customers are happier, and our developers are less stressed. Telebugs has simplified our error monitoring and | |
| reduced downtime significantly. A must-have tool for any growing team." | |
| </blockquote> | |
| <figcaption class="testimonial__author"> | |
| — <cite>Dan W., Head of Product at UpStack</cite> | |
| </figcaption> | |
| </figure> | |
| <figure class="testimonial"> | |
| <blockquote class="testimonial__quote"> | |
| "I love the simplicity of Telebugs! The Telegram integration keeps us in the loop without being overwhelmed. Our | |
| error response time has never been faster." | |
| </blockquote> | |
| <figcaption class="testimonial__author"> | |
| — <cite>Emily S., Software Engineer at CodeStreet</cite> | |
| </figcaption> | |
| </figure> | |
| <figure class="testimonial"> | |
| <blockquote class="testimonial__quote"> | |
| "Telebugs strikes the perfect balance between detail and simplicity. We know immediately if something goes wrong, | |
| and our devs are spending less time on unnecessary alerts and more time building new features." | |
| </blockquote> | |
| <figcaption class="testimonial__author"> | |
| — <cite>Oliver H., COO of QuickSprint</cite> | |
| </figcaption> | |
| </figure> | |
| <figure class="testimonial"> | |
| <blockquote class="testimonial__quote"> | |
| "Telebugs keeps us proactive instead of reactive. I can’t imagine going back to a dashboard-heavy error tracker. | |
| The Telegram integration just works!" | |
| </blockquote> | |
| <figcaption class="testimonial__author"> | |
| — <cite>Priya R., Tech Lead at CloudLeap</cite> | |
| </figcaption> | |
| </figure> | |
| <figure class="testimonial"> | |
| <blockquote class="testimonial__quote"> | |
| "Telebugs is like an early warning system for our app. We catch bugs before they become big problems. It’s fast, | |
| efficient, and our team feels more in control." | |
| </blockquote> | |
| <figcaption class="testimonial__author"> | |
| — <cite>Ben J., DevOps Engineer at PixelForce</cite> | |
| </figcaption> | |
| </figure> | |
| <figure class="testimonial"> | |
| <blockquote class="testimonial__quote"> | |
| "Error monitoring used to be a hassle, but Telebugs has made it so much easier. Real-time updates in Telegram help | |
| us stay on top of things without being glued to a dashboard all day." | |
| </blockquote> | |
| <figcaption class="testimonial__author"> | |
| — <cite>Chloe M., Developer at ByteShift</cite> | |
| </figcaption> | |
| </figure> | |
| </div> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Mobile-friendly testimonials in CSS (no JS!).
Just use the columns CSS property:
✅ Production-ready (supports all browsers)
✅ Supports variable column height
✅ Easy to customize