Respinsive Product Preview Card using HTML and CSS

Community feedback

• 

  Fidel Lim•2,775

  @fidellimPosted about 2 years ago

  Hi @Petabyte,

  Congrats on finishing the project!

  To remove the white background color below your image, you could just set your image tag as a block.

  .image img {
      display: block;
      width: 300px;
      border-radius: 10px 0px 0px 10px;
  }
  

  The code above should fix that issue.

  If you are also interested in removing the warning on your accessibility report, you can add this block of code:

  <div class="attribution">
      Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>. 
      Coded by <a href="https://www.frontendmentor.io/profile/peta-8-bit">Petabyte</a>.
    </div>
  

  inside a <footer> tag.

  Let me know if it works!

  Marked as helpful

  1

  ---

  

  Petabyte•190

  @peta-8-bitPosted about 2 years ago

  @fidellim Thanks. I made the image as grid and it worked . You think maybe if i changed flex-shrink or flex-grow or some other flex property, i could achieve the same with flex-box or grid is the only way to do it?

  0

  

  Fidel Lim•2,775

  @fidellimPosted about 2 years ago

  @peta-8-bit I believe it is possible.

  .image img {
      display: flex;
      width: 300px;
      border-radius: 10px 0px 0px 10px;
  }
  

  Even with this, it should work. You can also resubmit the project so that it is updated.

  0

  

  Petabyte•190

  @peta-8-bitPosted about 2 years ago

  @fidellim I don't really know how to update changes in git and github yet(without deleting and creating a new repo🤡), i think i will do it later.

  0

  

  Fidel Lim•2,775

  @fidellimPosted about 2 years ago

  @peta-8-bit that's alright! Once you are comfortable with learning them, go for it! Best of luck!

  1
• 

  Amal Karim ✅•1,290

  @amalkarimPosted about 2 years ago

  Instead of using "picture" element like code below

  <div class="image">
    <picture>
      <source media="(max-width:600px)" srcset="image-product-mobile.jpg">
      <img src="image-product-desktop.jpg" alt="image of product">
    </picture>
  </div>
  

  Try this

  <div class="image">
    <img class="img-desktop" src="image-product-desktop.jpg" alt="image of product">
    <img class="img-mobile" src="image-product-mobile.jpg" alt="image of product">
  </div>
  

  Then in your css, give those two images styling that will show and hide them at the right condition

  .img-desktop {
    display: block;
  }
  .img-mobile {
    display: none;
  }
  
  @media screen and (max-width: 600px) {
    .img-desktop {
      display: none;
    }
    .img-mobile {
      display: block;
    }
  }
  

  Some advice: Give your "main" element min-height: 100vh; instead of height: 100vh;, to avoid some parts of the page hidden when the height of the page is taller than the browser (mainly in mobile view). I also recommend display: grid for "body" element, it could give you more flexible, simple, and robust layout. Read this article in Css Tricks to gain basic understanding about CSS Grid. Last but not least, wrap your <div class="attribution">...</div> inside <footer>...</footer> to get rid the warning message in Accessibility Report.

  Hope this helps!

  Marked as helpful

  1

  ---

  

  Petabyte•190

  @peta-8-bitPosted about 2 years ago

  @amalkarim Thank you for the response, at first i was actually trying to do something like 1 image and 1 background image and then change opacity, but layout was complicated for responsive design like that. I completely forgot about display:none too. Your method is so easy to code and understand.

  0
• 

  Frank Ruiz•410

  @fruizoteroPosted about 2 years ago

  I think they already helped you with some solutions, but in case you want to try it some other way.

  The white space you see below the image is due to line-hieght.
  You can fix it by adding the following

  .card {
      line-height: 0;
  }
  
  .cardtext {
      line-height: normal;
  }
  

  Here you can read more about it
  line-height

  1

  ---

  

  Petabyte•190

  @peta-8-bitPosted about 2 years ago

  @fruizotero Thanks i will look into line height. I was going to try changing the line height but for some reason after i changed the image to display flex(since i changed it to block earlier), the background is gone and looks fine🤷‍♂️

  0