Skip to content
Submitted about 3 years ago

HTML and CSS

BADHRI KESAVA RAJA S M•515
@Badhrikr
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

Any suggestions are very much welcomed.

Community feedback

  • Clément Creusat•1,655
    @ccreusatPosted about 3 years ago

    Hey!

    Some quick fixes:

    • don't use height: 100vh on the <body> but min-height:100vh. I did the same mistake on a challenge but it won't break your design :)
    • don't use # to style your components (ex:id="dark"), use .dark because you can't have the same ID in your DOM. (Look the HTML issues in your report)
    • I would give your Grid Container more control to have a more fluid layout (no fixed width but max-width:1080px; grid-template-rows: auto; to avoid break rows) and I would play with margin-left/right when necessary (mobile for example).

    Hope it helps :)

    Marked as helpful
    0
    BADHRI KESAVA RAJA S M•515
    @BadhrikrPosted about 3 years ago

    @ccreusat thanks for the suggestions.I'm always had some problem in setting up the heigth for the body.So i blindly set the heigth to 100vh to use display:flex;align-items: center.Can use suggests some better method to set the height and width of the container(i.e vh or percentage or px)?

    1
    Clément Creusat•1,655
    @ccreusatPosted about 3 years ago

    @Badhrikr with the min-height: 100vh (could be 100%), will work like a charm!

    Marked as helpful
    1
  • Dharmik_487•1,740
    @Dharmik48Posted about 3 years ago

    Hey👋,

    Great job with the solution! Looks really good, but.. I have a couple of suggestions:

    • First, I think you should change the value in media query to 900px instead of 768px as around 850px screen width, there seems to be an horizontal scrollbar.
    • And a minor thing, in your solution there is lot of empty white space at the bottom of the cards.

    Apart from these, it is really good, Keep it up👍

    Marked as 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