Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Failed to decode param 'SarahBl%E9'
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

HTML and CSS

@Badhrikr

Desktop design screenshot for the Testimonials grid section coding challenge

This is a solution for...

  • HTML
  • CSS
2junior
View challenge

Design comparison


SolutionDesign

Solution retrospective


Any suggestions are very much welcomed.

Community feedback

P

@ccreusat

Posted

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

@Badhrikr

Posted

@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
P

@ccreusat

Posted

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

Marked as helpful

1
Dharmik_487 1,740

@Dharmik48

Posted

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
Discord logo

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