Design comparison
Solution retrospective
This was the first project that I timed myself on and even when I had forgotten things and had to google answers it still only took me a few hours.
What challenges did you encounter, and how did you overcome them?I had apparently forgotten everything I knew about media queries and had to google it again.
What specific areas of your project would you like help with?How is the responsiveness?
Community feedback
- @Jaimealicante83Posted 3 months ago
Hi Joanna. I've noticed that the body has margin-left: 8px and margin-right: 8px, which affects the title width on mobile devices. That makes the h1 to be displayed on two lines when it should be on a single line. I would recommend implementing a CSS reset or normalize. Specifically, you might want to consider adding the following to your base styles: body { margin: 0; padding: 0; font-size: 62.5%; } This will remove default margins and padding, and set the base font size to 62.5% (which equates to 10px if the user hasn't changed their browser's default font size). This approach can help ensure consistent styling across different browsers and devices.
I also suggest applying box-sizing: border-box to all elements. This prevents padding and border from increasing an element's total width and height, making layout calculations more intuitive:
*, *::before, *::after { box-sizing: border-box; }
That's the only things I found to improve, the rest of the card look identical to the design.
Cheers!
0
Please log in to post a comment
Log in with GitHub
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