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
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

3column-preview-card-component using flexbox

Abhinay674 130

@Abhinay674

Desktop design screenshot for the 3-column preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


iam finding difficult with media queries.. i will master them

Community feedback

@VCarames

Posted

Hey @Abhinay674, some suggestions to improve you code:

  • To center you content to your page, add the following to your Body Element:
body {
    min-height: 100vh;
    display: grid;
    place-content: center ;
}
  • The car images/icons serve no other purpose than to be decorative; They add no value. Their Alt Tag should left blank and have an aria-hidden=“true” to hides it from assistive technology.

  • The headings are being use incorrectly. For this challenge, each heading is equally as important. So best option, is to use <h2> Heading, because it will give each card the same level of importance and it's reusable.

  • Remove the height from the cards. It is not needed, your content itself will create the height.

Happy Coding! 👻🎃

Marked as helpful

0

Abhinay674 130

@Abhinay674

Posted

@vcarames thank you..please review the last solution

0

@jake4369

Posted

If you push the new code to Github again and redeploy the site you can just generate a new screenshot and your solution should be up-to-date then.

Marked as helpful

0

@jake4369

Posted

Hey! Awesome attempt. I found a really good short video on media queries on Scrimba

https://scrimba.com/scrim/cast-1595

Hopefully this show help you master them!

Good luck ☺️

Marked as helpful

0

Abhinay674 130

@Abhinay674

Posted

@jake4369 can we upload our solution once again

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