All comments

• 

  Kunjamin-1• 130

  @Kunjamin-1

  Submitted 3 months ago

  

  Social Links Profile Solution

  2

  40

  

  Fortune Iyoha• 280

  @fortuneiyoha

  Posted 3 months ago

  @Kunjamin-1 Congratulations on completing the challenge! 🎉

  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;
      ...
  }
  

  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; */
      }
  }
  

  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
• 

  mihkelal• 10

  @mihkelal

  Submitted 3 months ago

  

  QR code component

  2

  40

  

  Fortune Iyoha• 280

  @fortuneiyoha

  Posted 3 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 helpful

  0
• 

  jopascensao• 40

  @jopascensao

  Submitted 6 months ago

  

  Frontend Mentor QR Code

  1

  30

  

  Fortune Iyoha• 280

  @fortuneiyoha

  Posted 6 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.

  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! 🎉

  0
• 

  Roxana Valeria Solernou• 20

  @RoxxVS

  Submitted about 1 year ago

  I'm having trouble getting a truly responsive background-image. Any tips for me?

  

  Responsive Product reviewer card

  2

  50

  

  Fortune Iyoha• 280

  @fortuneiyoha

  Posted about 1 year ago

  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

  0

  This comment has received 1 replyShow