Design comparison
Solution retrospective
.
What challenges did you encounter, and how did you overcome them?.
What specific areas of your project would you like help with?.
Community feedback
- @DarekReposPosted 7 months ago
Greetings, You did great job! I'd like to suggest one small improvement.
If you want the text "Our Artificial Intelligence..." to be wrapped under the heading and displayed on two rows instead of one, you can use max-width.
@media (min-width: 576px) { .content-info { max-width: 50%; } }
I hope you find this helpful. Keep coding (and happy coding too!)
Marked as helpful0 - @TemceoPosted 7 months ago
Good effort. A few areas for potential improvement.
-
Avoid using inline CSS as it can be difficult to maintain. For the card borders you can an extra class for each card - eg for the first card - ''' class="card supervisor" ''' in the html and then in the styles page set the top border colour using ".supervisor"
-
I recommend having an interim media query at about 700px where you can have 2 cards per row and then at the 1200px break out into the desktop design. Below is an example using grid:
@media (min-width: 700px) { .container { display: grid; gap: 2rem; grid-template-areas: "one two " "three four"; } .card { max-width: 340px; } .card:nth-child(1) { grid-area: one; } .card:nth-child(2) { grid-area: two; } .card:nth-child(3) { grid-area: three; } .card:nth-child(4) { grid-area: four; } } @media (min-width: 1200px) { .container { grid-template-areas: "... two ..." "one two four" "one three four" "... three ..."; } }
Marked as helpful0 -
Please log in to post a comment
Log in with GitHubJoin 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