Responsive-stats-Preview-Card-Component

Community feedback

• 

  Ahmed Bayoumi•6,740

  @Bayoumi-devPosted over 2 years ago

  It looks great Zienab,

  My suggestion:

  The scrollbar appears on the page that because the body element has a default margin --> margin: 8px;, I suggest you reset all margins & padding.

  * {
  margin: 0;
  padding: 0;
  }
  

  This has become a very popular technique. It removes all default margin and padding for every object on the page.

  I hope this is useful to you... Keep it up👍

  Marked as helpful

  0

  ---

  

  Zienab Mohammed Abdelmonaem•400

  @zenab12Posted over 2 years ago

  @Bayoumi-dev Yes, I know this but I forget to set css Normalization for Page,

  • any tip to use image and fit content more accurate ??

  0

  

  Ahmed Bayoumi•6,740

  @Bayoumi-devPosted over 2 years ago

  @zenab12 in my opinion.. always when using the image create an element as a wrapper for it and give the image these properties Width: 100%, height: 100% and its wrapper overflow: hidden;, and control the image through its wrapper this gives me more control and more responsively,

  in this challenge I styled the image like the following:

  <div class="img-wrapper">
              <img src="images/image-header-desktop.jpg" alt="image header">
           </div>
  

  .stats-preview__img-wrapper {
    flex-basis: 48.648%;  
    background-color: var(--colors-soft-violet);
    overflow: hidden;
  }
  .stats-preview__img-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* to resize it to fit its wrapper */
    mix-blend-mode: multiply;
    opacity: 75%;
  }
  

  I don't know if it is a perfect way or not but this gives me more control... Good luck!

  Marked as helpful

  1

  

  Zienab Mohammed Abdelmonaem•400

  @zenab12Posted over 2 years ago

  @Bayoumi-dev Thanks so Much It's very Helpful

  0