Skip to content
Submitted about 1 year ago

Landing page using GRID in css

Jesse Adjomo•130
@Bahbah89
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

What did I learn?

  • Learning how to use diplay: grid, grid-template-columns / rows (repeat)
  • Using grid-column and grid-row for the necessary items in the container
  • using float and clear: both
  • Using position absolute and relative

What did I find difficult while building the project?

  • Making the same layout for smaller screens, my simple solution was to just add @media and use flex-direction: column. Any feedback on solving this is welcome :)

Community feedback

  • Zubair Adham•400
    @atmahanaPosted about 1 year ago

    Hi there. Good job on finishing the project.

    I'd suggest you to use the mobile-first approach. You can find this topic being discussed on Google and YouTube. Example below 👇

    /* Write your mobile styling here */

@media (min-width: 640px) {
  /* Write your desktop styling here */
}

    Also, since you initially specified a fixed width for the card, it won't adapt well to smaller screens. To make it responsive, consider replacing the fixed width with a max-width and set the width to 100%.

    .card {
  max-width: 500px;
  width: 100%;
}

    This approach ensures that the content adapts to different screen sizes and devices while providing a maximum width to prevent it from becoming excessively wide on larger screens. Hope this is helpful.

    Marked as helpful
    0
    Jesse Adjomo•130
    @Bahbah89Posted about 1 year ago

    @atmahana

    Thanks for the feedback :), I will take this knowledge to the next projects!

    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