Skip to content
Submitted over 3 years ago

Responsive Order Summary Card

Cecil Kipchirchir•20
@CEC-IL
A solution to the Order summary component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

The cancel order anchor tag doesn't take padding or margin. how should I have handled that better ?? Any suggestions or help will be much appreciated

Code

Please log in to post a comment

Log in

Community feedback

  • Martin Eliáš•890
    @martinelias1312

    Hello @CEC-IL, you have to change anchor element from inline to display: block/inline-block. Then you can use margin and padding.

    Also you should only use <a> element without <button> element.

    Another accessibility issues can be fixed like this:

    • wrap main content in <main> element. E.g. instead of <div class="content"> use <main class="content">.
    • alternate text can be left blank if images are only for decoration
    • this <div class="attribution"> can be wrapped in <footer> element for better accessibility too

    Hope this helps a bit :)

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