Responsive design using SASS

Community feedback

• 

  Lucas 👾•104,340

  @correlucasPosted about 2 years ago

  👾Hello Ryan, congratulations for your new solution!

  🎯 Your solution its almost done and I’ve some tips to help you to improve it:

  1.The NFT image is not displaying. Here's the correct import <img src="./images/image-equilibrium.jpg" alt="" class="image"> you've used ../ to import the image as it was in a subfolder.

  2.Make the container responsive with max-width instead of width:

  .card {
      border-radius: 20px;
      padding: auto;
      max-width: 375px;
      color: white;
      margin: 50px auto;
      background: #14253d;
  }
  

  3.The best to way to have this image and every image responsive and easy to work, its by creating a general property adding display: block and max-width: 100% to make it fits the size of the container the image is inside and also respect the container width while scaling, add alsoobject-fit: cover to make the image auto-crop when resizing inside the column:

  img {
      display: block;
      object-fit: cover;
      max-width: 100%;
  }
  

  .card .image {
      border-radius: 20px;
      width: 22.2em;
      margin: auto;
      display: block;
      max-width: 100%;
      padding: 10px;
  }
  

  ✌️ I hope this helps you and happy coding!

  0