Single Price Grid Component Using CSS Flexbox
Design comparison
Solution retrospective
I have completed the single price grid component and it looks completely fine and responsive while I check it on PC by squeezing the screen size. But when I open the link using my mobile phone the result is not as expected.
Please tell me how can I improve. Thanks.
Community feedback
- @siddtheonePosted over 4 years ago
Main card missing rounded corners. Also add top margin. Please upvote if helps.
0@aashish-cloudPosted over 4 years ago@siddtheone Thanks, I have rounded up the corners of the main card now.
0 - @rfilenkoPosted over 4 years ago
Hello, you can add <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"> to your html page in the head. Study what this metatag does :). Apply some additional styles on mobile with mediaquiries.
Roman
0@aashish-cloudPosted over 4 years ago@rfilenko https://serene-lamport-298fbf.netlify.app/ I added <meta name="viewport" content="width=device-width, initial-scale=1"> tag in the head. Can you please check it again ? Thanks :)
0@aashish-cloudPosted over 4 years ago@rfilenko Sorry , the tag you mentioned has not showed up in the comment somehow. I will be really grateful if you can specify it again. Thanks.
0@rfilenkoPosted over 4 years ago@aashish-cloud sorry, apparently it's not allowed here to paste code directly. Read here - https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag, viewport metatag
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