Responsive QR Page first challenge using only HTML and CSS

Community feedback

• 

  Daniel 🛸•44,270

  @danielmrz-devPosted 11 months ago

  Hello @EduardoSaavedraQ!

  Your project looks great!

  I see that you already got help, but there's a point that wasn't covered yet. It's just a little suggestion:

  • That div.attribution is supposed to be a footer on yuor page, it isn't part of the main content, so you can place it outside your card so it does not occupy unnecessary space, specially on mobile version.

  Other than that, you did an excelent job!

  Marked as helpful

  0

  ---

  

  EduardoSaavedraQ•50

  @EduardoSaavedraQPosted 11 months ago

  @danielmrz-dev. You were absolutely right. I've already corrected the html code. Thank you very much!

  1

  

  Daniel 🛸•44,270

  @danielmrz-devPosted 11 months ago

  I'm glad I could help 😊 @EduardoSaavedraQ

  0
• 

  Melvin Aguilar 🧑🏻‍💻•61,140

  @MelvinAguilarPosted 11 months ago

  Hello there 👋. Good job on completing the challenge !

  Regarding your question I have some suggestions about your code that might interest you.

  • Wrap the page's whole main content in the <main> tag.

  • The styles look good overall. I noticed a couple of things related to the Box Model of the .container in the mobile view:

    • While you've used mobile-first, indicating a good practice, this challenge has identical designs for mobile and desktop. Therefore, it may not be necessary to use a media query. You can set a max-width of 320px to the container, allowing the element to resize on mobile devices and ensuring it doesn't exceed 320px on larger screens.
    • align-items: center; may not be applying because the element is not a flex container.
    • Avoid defining heights, especially using vh (height: 75vh;), as it's not recommended. Let the content of the element determine its height.

    Here's an example:

    @media screen and (min-width: 376px) {
      .container {
        /* width: 350px; */
        /* height: 530px; */
        /* padding: 15px 15px; */
      }
    }
    .container {
      /* align-items: center; */
      /* width: 85vw; */
      /* height: 75vh; */
      /* padding: 2vh 2vw; */
      background-color: white;
      border-radius: 20px;
      max-width: 320px;
      padding: 15px;
    }
    

  • As mentioned, using a mobile-first design approach with media queries using min-width is a good choice. It simplifies the development process, starting with the mobile view and then adding styles for larger screens

  I hope you find it useful! 😄 Above all, the solution you submitted is great!

  Happy coding!

  Marked as helpful

  0

  ---

  

  EduardoSaavedraQ•50

  @EduardoSaavedraQPosted 11 months ago

  @MelvinAguilar, thanks so much for your feedback! I followed your advices and my css code is now simplier and with great results. I just wanted to ask you whether there was a reason for the 320 pixels you suggested or it was an arbitrary quantity.

  0