Stats preview card component

Community feedback

• 

  Henry•340

  @devhnryPosted over 1 year ago

  Hello there 👋. Good job on completing the challenge !

  I have SOME suggestions about your code that might interest you.

  • As regards your solution giving errors on the accessibility reports. This as a result of not having a Landmark. To solve this issues, add a <main></main> just outside the <div class="content"></div> and this will fix the issue. More on LandMarks

  • To help with the effect on the image, Try adding a <div class="overlay"></div> element just right before the <div class="image" ></div> container or <img> element. Now put both <div class="overlay"></div> container and the <div class="image" ></div> container inside a <div class=image__box ><div> .This will serve as the Parent Element of both . Then add the following styles below... Example

  HTML

  <div class=image__box >
      <div class="overlay"></div>
      <div class="image" > ... </div>
  <div>
  

  CSS

  .image__box{
      position: relative;
  }
  
  .overlay{
       position: absolute;
       top: 0;
       left: 0;
       width: 100%
       height: 100%
       background: ... ;  // Color goes here
  }
  
  .image {
      background-image : url(...) ; // If used a url instead of placing it directly in the HTML
      mix-blend-mode: multiply;
      opacity: 75%;
      object-fit:cover;
  }
  

  • TIP : Check out the <picture></picture> element as this can help with switching between two images based on viewport.

  I hope you find these comments helpfull! 😄 And I was able to answer your questions

  Happy coding!

  Marked as helpful

  1

  ---

  

  Bárbara Damasceno•320

  @barbaradamasdevPosted over 1 year ago

  @devhnry Thanks, you helped a lot. I'll the effect like you said. I really appreciate it. 😍

  0
• 

  Abdul Khaliq 🚀•72,560

  @0xabdulkhaliqPosted over 1 year ago

  Hello there 👋. Congratulations on successfully completing the challenge! 🎉

  • I have other recommendations regarding your code that I believe will be of great interest to you.

  ---

  HTML 🏷️:

  • This solution generates accessibility error reports, "All page content should be contained by landmarks" is due to incorrect usage of semantic markup, which causes lacking of landmark for a webpage

  ---

  • So fix it by replacing the wrapper <div class="content"> element with the semantic element <main> along with <div class="attribution"> into a <footer> element in your index.html file to improve accessibility and organization of your page.

  ---

  • What is meant by landmark ?, They used to define major sections of your page instead of relying on generic elements like <div> or <span>. They are use to provide a more precise detail of the structure of our webpage to the browser or screen readers

  ---

  • For example:
    • The <main> element should include all content directly related to the page's main idea, so there should only be one per page
    • The <footer> typically contains information about the author of the section, copyright data or links to related documents.

  ---

  .

  I hope you find this helpful 😄 Above all, the solution you submitted is great !

  Happy coding!

  Marked as helpful

  1
• 

  Benjamin B.•240

  @benjaminbilgehanPosted over 1 year ago

  hi there,

  when i was checking the page on 550px i see that the image is not covering all div. so i added .rightColumn { background-size: cover; }

  under @media screen and (min-width: 470px) and (max-width: 1140px)

  upi can also add .rightColumn height:40%;

  anyway please check the code below this is a really quick fix for you to understand media rule. Overall is a good job but you have to have a good understanding for media rules. https://www.w3schools.com/cssref/css3_pr_mediaquery.php

  @media screen and (max-width: 470px) { .data { flex-direction: row; }

  .content {
      height: 70%;
  }
  .rightColumn {
          background-size: cover;
      height:50%
  
  }
  

  }

  @media screen and (min-width: 780px) { .data { flex-direction: row; }

  .content {
      height: 50%;
      border:1px solid red;
  }
  
    .rightColumn {
          background-size: cover;
          height:100%;
  }
  

  }

  @media screen and (min-width: 1140px) { .data { flex-direction: row; }

  .content {
      height: 40%;
      border:1px solid blue;
  }
  

  .rightColumn { background-size: cover; height:100%; } }

  pay attention to the .rightColumn class in the media rules for each device screen sizes.

  for the backgroudn image please use below

  background-image: url('../images/image-header-desktop.jpg');

  that works !!

  It is kinda late here and these are my humble opinions for you. ;) good luck. also

  Marked as helpful

  1

  ---

  

  Bárbara Damasceno•320

  @barbaradamasdevPosted over 1 year ago

  @benjaminbilgehan Thank you Benjamin, you helped a lot. I'll try everything that you recommended and definitely study more about media rules.

  About the image ('../images/image-header-desktop.jpg') worked fine here, but when I push to github do not worked, this is why I changed the link to fix that. But I'll look again and thy the original file. Again, thank you so much!

  0

  

  Benjamin B.•240

  @benjaminbilgehanPosted over 1 year ago

  @barbaradamasdev i tried the image on chrome dev tool and it worked. Try again

  0