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

3 Column Preview

sansarj17 180

@sansarj17

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


This was an easy one. But i still struggled with sizing it perfectly. It just doesn't look as it was designed on larger viewports such as 1440px. It looks fine on my laptop but I don't know what goes wrong at 1440px. Any suggestion?

Community feedback

@migsilva89

Posted

Well done!

In order to fix accessibility issues:

  • Document should have one main landmark: https://www.w3.org/TR/wai-aria-practices/examples/landmarks/main.html

  • All page content should be contained by landmarks: Wrap your card in a main element to fix accessibility issues by placing it just after the body element and draging your content inside.

About the size looks ok to me.

Hope it helps, and keep going!

Regards, Miguel Silva

Marked as helpful

1

sansarj17 180

@sansarj17

Posted

@migsilva89 Thanks for the accessibility issue. The sizing is done after adjustments in margins and all, so can really say much. Thanks for the help

0

@migsilva89

Posted

Perfect! @sansarj17

keep going!

Marked as helpful

1

@migsilva89

Posted

Perfect! @sansarj17

keep going!

0
sansarj17 180

@sansarj17

Posted

@migsilva89 Thanks Miguel

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