Design comparison
Solution retrospective
All feedback is welcome
Community feedback
- @correlucasPosted about 2 years ago
πΎHello Aviral, congratulations for your new solution!
Your solution is fine but if you note after
max-width: 350px
the pricing content start to pop out the container, to fix that you can use a media query to make the price content goes to different rows@media (max-width: 350px) { .price-tag { display: flex; align-items: center; flex-direction: column; } }
βοΈ I hope this helps you and happy coding!
Marked as helpful1@AkunamoPosted about 2 years ago@correlucas Hey Lucas Thanks for pointing that out, as i am not really good at testing my CSS. I had no idea that there might be devices smaller than 350px. Well but as I want to be a better Front-end Developer, I also want to make my website as responsive as it can be no matter the screen size. Thank you.
Oh and i wonder how you use that V sign emote?
0 - @luigi-peronePosted about 2 years ago
Hi Aviral, and welcome to the Frontend Mentor community!
You've a great solution here but there are some tags you can consider changing in the html,the first div should be wrapped with a main tag and div with class attribution should be wrapped with a footer tag. These changes don't change the design but improve the accessibility and semantic.
Hope it helps, happy coding π
Marked as helpful1@AkunamoPosted about 2 years ago@luigi-perone Thanx for feedback luigi. I am really bad with accessibility and stuff and that's why i am specifically working on the accessibility and trying to use sementic tags as much as possible.I greatly appreciate your feedback (English is'nt my native language so sorry for my bad English)
1
Please log in to post a comment
Log in with GitHubJoin 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