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

four-card-feature-section-master / Css grid

Rai_Sama 380

@raisama21

Desktop design screenshot for the Four card feature section coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


Hello guys, I completed this challenge but there is a problem with my 2 cards, I don't know why but I failed to align it properly. Please leave a feedback, Feedback are highly appreciated. Thank you in advance :)

Community feedback

@tesla-ambassador

Posted

Hey Rai_Sama, I am impressed that you managed to figure out what was wrong with the cards, I was actually going to point out that it was the max-width property but it seems like you were already working on it. This is a very great solution, it is really smooth with it's responsiveness... I like it. Heres a thing or two:

  • You might want to include a <main> landmark and you might also want to contain your divs in landmarks. In your case, you could just enclose all your divs in the <main> you'll be hitting two birds with one stone. This will improve your website's accessibility and resolve most of your accessibility issues! Happy coding! 💪

Marked as helpful

1

Rai_Sama 380

@raisama21

Posted

@tesla-ambassador I replaced the .container <div> with the <main>, I hope it works . Thanks for your feedback.

1

@tesla-ambassador

Posted

@raisama21 I have seen it! You should separate the <header> from the main. The header shouldn't be a child of <main> it should look more like this

<header> #header-content </header>
<main> #main-content </main>
<footer> #footer-content </footer>

Let me know how it goes!

Marked as helpful

1
Rai_Sama 380

@raisama21

Posted

@tesla-ambassador How do I update the challenge here in frontend mentor I updated the code in github nut it is still showing the accessibility issue?

1

@tesla-ambassador

Posted

@raisama21 You should ask for an update on your report and that should fix it

0
WandoCode 840

@Wandole

Posted

Hey! I think the problem you have with cards alignment is because of the gap between rows and columns of your grid.

Try to put the 2 cards on the same row then to move them with a translateY(+50%). It should work.

Tell me if it works!

Marked as helpful

0

Rai_Sama 380

@raisama21

Posted

@Wandole it work like a charm, thanks for your feedback.

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