
Please log in to post a comment
Log in with GitHubCommunity feedback
- @renitam
For screen responsiveness, you'll want to make the width and height of the page something like 100vw, 100vh, versus the exact dimensions of your device resolution as it's stated in Figma. That will account for differences between viewing device screens.
Make sure your card meets the dimensions specified in your design, as when you view the website in mobile, it's all over the place.
A good way to keep track of styles throughout your html, especially for larger projects, is to use classes vs applying styles to html tag selectors directly. That way, you don't have to do the math on what to update later. More on css selectors here: https://www.w3schools.com/cssref/css_selectors.php.
Make sure you're following the design carefully. In your stylesheet, the QR code image width is 348px, but if you check Figma you'll see the width at 288px. 320px is the width of the entire card, so your image width exceeds that.
Try a mobile-first method when putting the finishing touches on your card. You'll get the hang of it in no time!
Pro-tip: Semantics in HTMl refers to the HTML tags search engines use to make your page show up in search results and screen-readers. You'll want one <main></main> to replace the card block and the <footer></footer> tags for your attribution at the bottom. Hope this helps!
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