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

Order summary card | HTML & CSS

Tonsz 30

@tonsz

Desktop design screenshot for the Order summary component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


im not sure of what i did with the media query and i didnt know how to make sure the size was appropriated for mobile devices. also, added a :hover in one of the anchor tags (cancel) to alter the opacity in active state (0.5 initial opacity to 1 in hover state)

tried to use flex hehe, feedback and comments on what else i need to work on are welcome~

Community feedback

@Mohamed-Waled

Posted

Hello @tonsz, I hope this comment finds you well you have done marvelous work!! I saw the report that the website provides to you and the code, and I do you think about making some small changes to your code to fix the Accessibility issue : That issue means that you need to put the heading elements in numerical order (i.e. h1, h2, h3, h4...) why is that? because when people use screen readers the screen reader starts by reading the heading from h1 to h6 assuming that it contains important information about what is on the page so you just use them in order and you can change the size with CSS (i.e. h1 { font-size: 24px;} it makes the h1 looks more like h2) and that is it about the report edit this one on GitHub and wait two minutes and generate a new report. about the media query, you wrote it right 100% and I think it does its work perfectly as the website is totally responsive. about mobile devices, you can use chrome dev. tools to make sure that the size is appropriate (i.e. press F12 on the keyboard when you need to open chrome dev. tools and after that in its header there is an icon that looks like a mobile phone and a tablet click on it, it will show you what it will look like on mobile devices if you could not find the icon just after opening chrome dev. tools press Ctrl + Shift + M it does the same) and after all, you have done excellent work keep up the good work and do your best 💖.

1

Tonsz 30

@tonsz

Posted

@Mohamed-Waled thank you!! i will try to learn more about the dev tools next and how to use it generally. i appreciate the help and comment, have a nice day :)

0

@Mohamed-Waled

Posted

@tonsz You are mostly welcomed! 💖

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