Skip to content
Submitted over 1 year ago

Testimonial Grid using VSC,MSpaint,HTML,CSS with flexbox.

GHNetCode•170
@GHNetCode
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Testimonials grid section
  • HTML
  • CSS
2junior

Design comparison

SolutionDesign

Solution retrospective

At first this looked straight forward however there were issues with ordering the elements (testimonial cards) using flexbox. So resorted to dividing the Cards up into separate groups into their respective classes to get them into the right position. Due the nature of how flexbox works where it just uses "Row""Column".. No JS on this one unfortunately. :(

Community feedback

  • C H A R A N 🎯•2,670
    @0xabdulPosted over 1 year ago

    Hey there well congrats on completing the testimonials gird section..👍

    • A little bit recommendation for improve your code 🤔
    • In Html :
    • the html page should be contained one main landmark
    • Ex :
    <html lang="en">
<head>
<title>my page</title>
</head>
<body>
<header>
//logo img or heading ect...
//Using heading only❗
</header>

<main>
//Use only main of the contents
</main>

<footer>
//use copy write discription or challenge d by front end mentor code by mark..
</footer>
</body>
</html>
    • In CSS :
    • well your testimonials card is not center aligning so fix the problem
    body {
display:flex;
align-items:center;
justify-content :center;
height:100vh;
}
    • I Hope it's useful for you
    • Happy Coding 😃
    1
    GHNetCode•170
    @GHNetCodePosted over 1 year ago

    @0xAbdul

    Hi Muhammad, Thank you for your feedback and highlighting where i have missed a few important parts much appreciated! When i get the time I will be sure to make the required changes. Best regards, M.

    0
    C H A R A N 🎯•2,670
    @0xabdulPosted over 1 year ago

    @GHNetCode it's our duty ❤️

    0
    C H A R A N 🎯•2,670
    @0xabdulPosted over 1 year ago

    @GHNetCode the testimonials section is awesome ❤️🤩

    0
    GHNetCode•170
    @GHNetCodePosted over 1 year ago

    @0xAbdul Hi Muhammad, Just a follow up that i have now made some minor adjustments so at least it is centred ok and includes the important elements. :) Cheers, Mark.

    0
  • Eileen dangelo•1,600
    @EileenpkPosted over 1 year ago

    Hi GHNetCode! your project looks great, and this might be a helpful tip.

    I'm not sure if I understand the problem that you were having with ordering the elements (testimonial cards) using flexbox. But what I think you mean is that you wanted to reorder the flex items. To do this with flexbox you can use the order property

            <div class="box">
            <div><a href="#">1</a></div>
            <div><a href="#">2</a></div>
            <div class="active"><a href="#">3</a></div>
            <div><a href="#">4</a></div>
            <div><a href="#">5</a></div>
        </div>
      

            .box {
          display: flex;
          flex-wrap: wrap;
          flex-direction: row;
        }
        .active {
            order: -1;
            flex: 1 0 100%;
        }

    Here is a link that goes into more about Flexbox - flexbox

    Hope you found this helpful!

    0

Please log in to post a comment

Log in with GitHub

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