Skip to content
Submitted 6 months ago

MOBILE FIRST TESTIMONIALS GRID SECTION WITH FLEXBOX

accessibility
why-not-phoenix•330
@why-not-phoenix
A solution to the Testimonials grid section challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

What are you most proud of, and what would you do differently next time?

This was more challenging than I wanted. I was bent on using Bootstrap at first to improve my skills but I met a dead end. How do you create gaps on Bootstrap without ruining the whole design? If you have a link of anyone that used bootstrap to complete this challenge it'll be much appreciated. Anyway, I had to scrap everything and start over w/o Bootstrap. Spent less time, which I guess the idea of Bootstrap is to reduce time spent? maybe cos this is relatively small I won't appreciate that. I guess it came out okay at the end but with minor font issues. Couldn't get the correct font-size. That's all I have to say for now, criticisms are welcomed.

What challenges did you encounter, and how did you overcome them?

Same as above I guess

What specific areas of your project would you like help with?

How could I have done this better and faster? How could I improve this? How could I have done this using Bootstrap?

Code

Please log in to post a comment

Log in

Community feedback

  • M. Abubakr•250
    @m-abubakr1

    You’ve done a good job with this layout! 🙌🏻 Here are a few suggestions and answers to your questions to help you improve further:

    Using Bootstrap Effectively:

    • Bootstrap excels when used for grid layouts and spacing. If you were stuck on creating gaps without affecting the design, try using Bootstrap's g-* utility classes for grid spacing or its margin and padding classes like mt-3, mb-3, or p-4. For instance:
    • Instead of setting gaps in a custom flex class, you could use a Bootstrap grid (row and col-*), combined with Bootstrap utilities like gap-3.
    • To replicate the card layout, nest your card components in a Bootstrap grid layout and adjust columns (e.g., col-md-6 or col-lg-4) for responsiveness.

    Time-Saving Tips:

    You are not using BootStrap the right way, Leveraging Bootstrap could save you time by avoiding writing repetitive classes. For example:

    • Use Bootstrap's card component for your testimonial sections, which already supports padding and border-radius styling.
    • Customize Bootstrap variables (e.g., $border-radius, $card-bg, $text-muted) in a SCSS file to match your design palette.

    Font Size Issue:

    To fix the font-size mismatch, confirm that the correct units are applied. Bootstrap uses rem for font sizes, so integrating its typography utilities (like fs-4, fw-bold, etc.) can make scaling more predictable and consistent.

    Improving and Streamlining:

    • Your layout works well for small and large screens, but consider adding middle breakpoints to refine how the cards stack.
    • Simplify your layout further with Bootstrap's predefined utilities (d-flex, align-items-center, justify-content-between) instead of custom Flexbox rules.

    Accessibility Improvements:

    • Avoid skipping heading levels like h2 to h3. It’s better for screen readers and SEO to maintain a logical structure, e.g., h1 > h2 > h3. For subheadings like "Verified Graduate," consider using a <p> with a semantic class instead.
    • Ensure alt attributes are descriptive and meaningful. For instance, “daniel-image” could be “Portrait of Daniel Clifford.”
    Marked as helpful

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord