stats-preview-card-component-main

Community feedback

• 

  Elaine•11,400

  @elaineleungPosted over 2 years ago

  Hi Kipo, what you need to do is: In img, add height:100% and change object-fit:contain to object-fit:cover so that the image won't be distorted when you add the 100% height. Contain means the container will contain the entire image even if there is white space showing, and cover means the image will cover the entire container even if parts of the image may be cropped.

  In terms of cleaner code, I think if your class names are clear and descriptive enough in terms of their function, half the work is done. The other half is just in how your structure your CSS and how you group containers using the appropriate elements, especially semantic HTML elements. I think it's not absolutely necessary to name every single element, but it's important to make sure you can easily find what you need just by looking at the selector. Sometimes I'd stop working midway just to rename half my classes because I find myself getting confused due to similar names.

  I might structure everything like this:

  <main class="container">
     <article class="card">
  
        <div class="image">
           <img>
        </div>
  
        <div class="content">
           <h1 class="title"></h1>
           <p class="body"></p>
           <ul class="stats">
                 // I wouldn't give individual class names to the items here
                 <li><span></span></li>
                 <li><span></span></li>
                 <li><span></span></li>
           </ul>
        </div>
  
     </article>
  </main>
  
  

  For the children in card I might even change them to BEM names, like card__image and card__content, as this would be helpful if I'm using Sass.

  Hope this helps!

  Marked as helpful

  1

  ---

  

  Kipo•80

  @rezokipPosted over 2 years ago

  @elaineleung Yes indeed it was because of the height... thank you for the detailed reply. Appreciate it

  1

  

  Elaine•11,400

  @elaineleungPosted over 2 years ago

  @rezokip No problem, glad I could help 😊

  0
• 

  Joel•590

  @JoelLHPosted over 2 years ago

  Hey there, for the image, what you can do its remove object fit and use height 100% that will make the image strech to the size of the parent Also you are using the image for mobile version there's another image for the desktop version that will fit better. It has to change when you move from mobile to desktop.

  Good job, happy coding

  Marked as helpful

  0

  ---

  

  Kipo•80

  @rezokipPosted over 2 years ago

  @JoelLH Hey thank you for your reply. youre right its because of the height... Yea i saw the image for the desktop version but wanted sort of a "mini-challenge" to use the mobile version for the desktop version.

  0