Design comparison
Community feedback
- @ecemgoPosted over 1 year ago
Some recommendations regarding your code that could be of interest to you.
However, I couldn't view your Github repository, but I try to help you through the live site.
HTML
- If you want to use the recommended font-family for this project, you can add the following between the
<head>
tags in HTML file:
<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@400;700&display=swap" rel="stylesheet">
CSS
- After adding them to the HTML, you can add this font-family to the
body
in CSS file: - In order to center the card correctly, you'd better add
min-height: 100vh
to thebody
- For the color of the screen, you can use the recommended color in the
body
body{ font-family: 'Outfit', sans-serif; // google fonts which is suggested min-height: 100vh; background-color: hsl(212, 45%, 89%); }
- If you use
max-width
instead ofwidth
andheight
, it makes the card responsive.
max-width: 300px; /* width: 300px; */ /* height: 400px; */ /* position: relative; */
Hope I am helpful. :)
Marked as helpful0 - If you want to use the recommended font-family for this project, you can add the following between the
- @apah-devPosted over 1 year ago
I noticed there is no set margin between the container and the body making it look clogged up. Just setting a margin-top in the div containing the image and texts would fix this. Or setting some default margin in the body element would also work.
Marked as helpful0 - @francescomerighi1202Posted over 1 year ago
Hi there!
I can't see the code of your solution (GitHub gives me a 404 error).
From what I can see from the live site, you haven't perfectly centered the card on the screen, I suggest you use flexbox or grid for that.
Another thing I seem to have noticed is that you have set a fixed height to the card, please don't do that, let the card adjust to the content automatically.
Sometimes setting a fixed height does more harm than good, believe me!
Hope I helped, if so, please mark this comment as helpful.
In any case, don't hesitate to look at my solution if you need to ;)
Marked as helpful0
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