Submitted about 1 year ago

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

GHNetCode• 170

@GHNetCode

Preview site View code

This is a solution for...

Testimonials grid section

HTML
CSS

2junior

View challenge

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

Muhammad Abdullah 🎯• 2,650

@0xabdul

Posted about 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 😃

GHNetCode• 170

@GHNetCode

Posted about 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.

Muhammad Abdullah 🎯• 2,650

@0xabdul

Posted about 1 year ago

@GHNetCode it's our duty ❤️

Muhammad Abdullah 🎯• 2,650

@0xabdul

Posted about 1 year ago

@GHNetCode the testimonials section is awesome ❤️🤩

GHNetCode• 170

@GHNetCode

Posted about 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.

Eileen dangelo• 1,600

@Eileenpk

Posted about 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!

Let's connect on LinkedIn! - @Eileenpk

Please log in to post a comment

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