Fortune Iyoha
@fortuneiyohaAll comments
- @Kunjamin-1Submitted 5 months ago@fortuneiyohaPosted 5 months ago
@Kunjamin-1 Congratulations on completing the challenge! π
Improve Spacing and Width on Desktop Screens
To enhance the spacing and width of your card container on desktop screens, you can use the following CSS settings:
.container { ... padding: 2rem; width: 35vw; ... }
Improve Width on Mobile Screens
For better width adjustment of your card container on mobile screens, use this media query:
@media only screen and (max-width: 600px) { .container { width: 70vw; /* min-height: 72vh; */ } }
Improve Social Link Responsiveness
To ensure the social links are responsive across all devices, set the width to 100%:
/* Update the lines below */ .work { width: 100%; } /* Delete the lines below */ @media only screen and (max-width: 600px) { .work { min-width: 80%; } }
Great job on your project! π Keep up the fantastic work and happy coding! π
0 - @mihkelalSubmitted 5 months ago@fortuneiyohaPosted 5 months ago
Congratulations on completing the challenge! π
Improve Accessibility
To enhance accessibility, it's important to structure your page content using semantic landmarks and tags. One suggestion is to use the
<main>
tag to wrap your primary content. Here's an example:<!-- index.html -- > <main class="card"> ... </main>
Improve Styles
To ensure your content fits well on the page, it's a good idea to remove default margins. Using a CSS reset is a comprehensive solution, but for this case, removing the body margin and setting a minimum height will do the trick. Here's how you can update your CSS:
/* index.css */ body { ... min-height: 100vh; margin: 0; ... }
Great job on your project! π Keep up the excellent work and happy coding!
Marked as helpful0 - @jopascensaoSubmitted 8 months ago@fortuneiyohaPosted 8 months ago
Hey there @jopascensao! π Huge congratulations on wrapping up your first frontend mentor challenge! Your effort really shines through, but I've got a little tweak that could make your project even better.
- Heading Color: Your
h2
color doesn't quite match the design. No worries though, here's a quick fix for you:
h2 { color: hsl(218, 44%, 22%); }
- Box Shadow: Noticed the card's box-shadow is a tad too dark? Here's how you can brighten it up:
#card { box-shadow: 0px 15px 50px hsl(212, 15%, 72%); }
Overall, you've done fantastic work! Keep that coding spirit high and keep rocking it! π Happy coding ahead! π
0 - Heading Color: Your
- @RoxxVSSubmitted about 1 year ago
I'm having trouble getting a truly responsive background-image. Any tips for me?
@fortuneiyohaPosted about 1 year agoCongratulations on completing the challenge! π
Picture Tag πΈ:
- Noticed you're using media queries to swap images? Consider the
<picture>
tag, perfect for responsive images and art direction. - Example:
<picture> <source media="(min-width: 900px)" srcset="large-image.jpg"> <source media="(min-width: 768px)" srcset="small-image.jpg"> <img src="fallback-image.jpg" alt="Example image"> </picture>
-
It allows different images for various screens without CSS, improving load times by serving optimized images.
-
Questions? Check my submission or reach out anytime.
-
For more information, you can Learn More about the <picture> element on W3Schools.
Great job! π
Happy coding!
Marked as helpful0 - Noticed you're using media queries to swap images? Consider the