Submitted over 1 year ago

Responsive site using Grid and flex

Mahendran-C•130

@Mahendran-C

Preview site View code

This is a solution for...Testimonials grid section

HTML
CSS

2junior

Design comparison

SolutionDesign

Solution retrospective

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

Already completed this challenge.

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

gird system

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

need more practice on grid system

Community feedback

Panji•2,090

@pperdanaPosted over 1 year ago

Hi there ! 👋

My solution are

In desktop view

Inside you styles.css inside contentContainer selector

.contentContainer{
    max-width: 1440px;
    height: 100vh;
    margin: 100px  ;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 2rem;

}

remove or comment the height property

.contentContainer{
    max-width: 1440px;
    margin: 100px  ;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 2rem;

}

In mobile view

Inside you styles.css inside body

body{
    width: 100%;
    height: 100vh;
    font-family: 'Barlow Semi Condensed', sans-serif;
    background-color: var(--lightGrayishBlue);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}

remove or comment the height property

body{
    width: 100%;
    font-family: 'Barlow Semi Condensed', sans-serif;
    background-color: var(--lightGrayishBlue);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}

I hope you find it useful! 😄

HAPPY CODING 👾

Marked as helpful

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