Responsive card using SASS and HTML

Community feedback

• 

  Melvin Aguilar 🧑🏻‍💻•61,140

  @MelvinAguilarPosted over 1 year ago

  Hello there 👋. Good job on completing the challenge !

  You have used many media queries, even in this challenge it is not necessary to have a media query. I can give you some tips to create the component responsive without using a media query.

  • The component is a bit small. Note: all values will adjust to the size of your component.

  • Setting the width of the component with a percentage or a viewport unit will behave strangely on mobile devices or large screens. You should use a max-width of 204px to make sure that the component will have a maximum width of 204px on any device, also remove the width property with a vw value. Additionally, add padding to avoid border touching the image.

  .card {
      max-width: 204px;
      padding: 12px;
      background-color: #fff;
      border-radius: 20px;
  
       /* NOTE: Later you can remove all these media queries.*/
        @include responsive($Small) {
          // height: 52vh;
          // width: 83vw;
        }
        @include responsive($Mobile) {
          // height: 51vh;
          // width: 75vw;
        }
        . . . 
  }
  

  • Update the image selector to make responsive images and remove all the media query:

  .image {
      max-width: 100%;
      /* NOTE:  All of this is unnecessary, you can remove it so that your image doesn't shrink like in the screenshot.*/
      @include responsive($Small) {
        // margin: 1.5vh 5vw;
        // height: 30vh;
        // width: 73.5vw;
      }
      @include responsive($Mobile) {
        // margin: 1.5vh 4.5vw;
        // height: 30vh;
        // width: 66.5vw;
      }
  }
  
  /* NOTE:  All of this is unnecessary, you can remove it so that your image doesn't shrink like in the screenshot.*/
  .qrImage {
      // margin: 0;
      // padding: 0;
      @include responsive($Small) {
        // height: 34vh;
      }
      @include responsive($Mobile) {
        // height: 34vh;
      }
  }
  

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

  Happy coding!

  2
• 

  José Alfredo Mário Dos Santos•160

  @Josemario17Posted over 1 year ago

  Good job, for this solution my suggestion is the following: increase the height of the container or decrease its width, to make it as square as possible, I hope I helped.

  enjoy the code

  0