Design comparison
Solution retrospective
My problem in coding lies with rendering my webpage appropriately in mobile view. Is there anything I need to know specifically to solve that?
I have always been having a kind of feeling of not having enough knowledge of any language before embarking on another one even if I can answer or practice any damn concept on it. Please is there a cure to this kind of syndrome?
Please, don't forget to criticize this project as well. The last one helped me to improve on some things like designing for Screen Readers.
Thanks!!
Community feedback
- @correlucasPosted about 2 years ago
👾Hello Daud Ismail, congratulations for your new solution!
🎨 Here’s some tips to improve your component design:
Make the shadow smoother reducing its
opacity
, see a good value for this shadow:box-shadow: 9px 4px 9px 4px rgb(0 0 0 / 4%);
To improve the solution responsiveness, make a media query to break the elements in the
pricing section
afterwidth: 350px
and make every content in a different row, saving space for low resolution devices.@media (max-width: 350px) { .details { display: flex; justify-content: space-between; align-items: center; padding: 4px; border-bottom: 2px solid hsl(215, 32%, 27%); flex-direction: column; } }
✌️ I hope this helps you and happy coding!
Marked as helpful0 - @IllusiveCoder1101Posted about 2 years ago
Congrats on completing the challenge, about the mobile display issue, I think you should look into css media queries which is responsible for display on different screen sizes. Keep up the great work!!!!
Marked as helpful0@EminentdioPosted about 2 years ago@IllusiveCoder1101
Thank you, boss. It's helpful.
0 - @talha-007Posted about 2 years ago
Use divs and h1 tags only instead of span. you can use a div to overlay on the image which shows that eye icon. give it styling of hidden and when you hover give it a display. and you'll learn by the time don't worry it's good.
Marked as helpful0@EminentdioPosted about 2 years ago@talha-007
Thank you, boss.
It's helpful.
0
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