
Design comparison
Solution retrospective
This was fast! Really fast!
What challenges did you encounter, and how did you overcome them?None really!
What specific areas of your project would you like help with?Not sure! Depends on who is looking.
Community feedback
- @skyv26Posted about 2 months ago
Hi @davistar21,
Overall, great work! 😊 Your HTML structure is clean and well-organized. 👏
However, I have a couple of suggestions for improving the design:
-
To center your card both vertically and horizontally, you can use the following CSS:
body { place-content: center; display: grid; min-height: 100vh; font-family: Outfit, sans-serif; background: hsl(212, 45%, 89%); }
This will ensure your card stays centered on the screen, regardless of the viewport size.
-
Regarding the image, since you're fixing its width and height, it tends to overflow on smaller screens. To make it responsive, try removing the fixed height and using
width: 100%
instead:img { width: 100%; border-radius: inherit; }
This way, the image will scale properly without overflowing the card. 📱
Hope these tweaks help!
Best, Aakash
Marked as helpful1@davistar21Posted about 2 months ago@skyv26 thanks so much Aakash. They really did help. All the best to you as well!
1@skyv26Posted about 2 months ago@davistar21, you are welcome. I am glad my suggestion helped you 🤠
1@mkalkandevPosted about 2 months ago@skyv26 I need feedback on my Fylo landing page. Can you help me make it better with your comments?
https://www.frontendmentor.io/solutions/mobile-friendly-landing-page-using-flexbox-and-grid-2Qhk36Hs8Z
1 -
- P@Islandstone89Posted about 2 months ago
Hey, here is some feedback :)
HTML:
-
Every webpage needs a
<main>
that wraps all of the content, except for<header>
andfooter>
. This is vital for accessibility, as it helps screen readers identify a page's "main" content. Wrap the card in a<main>
. -
The image has meaning, so it must have proper alt text. Write something short and descriptive, without including words like "image" or "photo". Screen readers start announcing images with "image", so an alt text of "image of qr code" would be read like this: "image, image of qr code". The alt text must also say where it leads(the frontendmentor website). A good alt text would be "QR code leading to the Frontend Mentor website."
CSS:
-
Including a CSS Reset at the top is good practice.
-
I recommend adding a bit of
padding
, for example16px
, on thebody
, to ensure the card doesn't touch the edges on small screens. -
Remove the margin on the card.
-
To center the card horizontally and vertically, I would use Flexbox on the body:
display: flex; flex-direction: column; justify-content: center; align-items: center; min-height: 100svh;
-
Remove all widths and heights in
px
. We rarely want to give a component a fixed size, as we need it to grow and shrink according to the screen size. -
We do want to limit the width of the card, so it doesn't get too wide on larger screens. To solve this issue, give the card a
max-width
of around20rem
. -
On the image, add
display: block
,height: auto
andmax-width: 100%
- the max-width prevents it from overflowing its container. Without this, an image would overflow if its intrinsic size is wider than the container.max-width: 100%
makes the image shrink to fit inside its container. -
As the design doesn't change, there is no need for any media queries. When you do need them, they should be in
rem
orem
, notpx
. Also, it is common practice to do mobile styles first and use media queries for larger screens.
Marked as helpful0@davistar21Posted about 2 months ago@Islandstone89 Now this is beyond helpful! This is golden! Thanks a bunch for leaving this reply here. I will most definitely implement these corrections next time. I really do appreciate.
1@mkalkandevPosted about 2 months ago@Islandstone89 I need feedback on my Fylo landing page. Can you help me make it better with your comments?
https://www.frontendmentor.io/solutions/mobile-friendly-landing-page-using-flexbox-and-grid-2Qhk36Hs8Z
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