Skip to content
OverviewSolutions
19
Comments
4

Fortune Iyoha

@fortuneiyohaEdo, Nigeria310 points

👨‍💻 Frontend Dev | 🌐 Building Web Wonders | 🎓 Self-Learning Enthusiast | ✨ Exploring the WebVerse | 🚀 Let's Code & Connect!

Latest solutions

View more solutions

Latest comments

  • Fortune Iyoha•310
    @fortuneiyoha

    @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! 🚀

  • Fortune Iyoha•310
    @fortuneiyoha

    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 helpful
  • Fortune Iyoha•310
    @fortuneiyoha

    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.

    1. 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%);
}
    1. 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! 🎉

  • Fortune Iyoha•310
    @fortuneiyoha

    Congratulations 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 helpful