responsive Stats preview card component using HTML, CSS

Community feedback

• 

  Melvin Aguilar 🧑🏻‍💻•61,140

  @MelvinAguilarPosted almost 2 years ago

  Hello there 👋. Good job on completing the challenge !

  • It is not necessary to repeat styles when using a media query; the base styles will always remain, and the styles within the media query only apply when the conditions are met (e.g. when the screen width is within a certain range).

    The common approach is to define the main CSS rules outside of the media query, and then override them with specific styles inside the media query.

    body {
        background-color: #0A0C1B;
        display: flex;
        justify-content: center;
        align-items: center;
        min-height: 100vh;
    }
    
    .footer {
        display: flex;
        justify-content: space-between;
        margin-top: 50px;
    }
    
    @media (max-width: 680px) {
      /* NOTE:  Nothing of this is necessary.*/
      body {
        /* background-color: #0A0C1B; */
        /* display: flex; */
        /* justify-content: center; */
        /* align-items: center; */
        /* min-height: 100vh; */
      }
    
      /* NOTE: Only use the ones you are going to overwrite.*/
     .footer {
        /* display: flex; */
        flex-direction: column;
        /* justify-content: space-between; */
        /* margin-top: 50px; */
        gap: 20px;
        padding-bottom: 10px;
     }
    }
    

  • Consider adopting a Mobile First approach in your next project. This means designing for the smallest screens first and then scaling up as needed. This helps to create a more user-friendly and accessible experience for all users.

  • The <div> tag can be useful for styling and positioning, but it doesn't convey any semantic meaning. Instead, consider using more semantic elements like <p> to better describe the type of content. e.g.:

    <p>Discover the benefits of data analytics and make better decisions regarding revenue, customer experience, and overall efficiency.</p>
    

  I hope you find it useful! 😄

  Happy coding!

  Marked as helpful

  0
• 

  Hassia Issah•50,650

  @HassiaiPosted almost 2 years ago

  Use the colors that were given in the styleguide.md found in the zip folder you downloaded

  Give the main a max-width of 1440px a width of 80% . instead of a min-width, max-width value of none and a width value.

  in the media query give the main flex-direction: column-reverse , give .right and .right a width of 100% and change the flex-direction of the .footer to row.

  For the color of the image, add background-color of soft violet, background-blend-mode of multiply and opacity of 0.8 to .right.

  .right{
  background-image: url();
  background-size: cover;
  background-color: hsl()
  background-blend-mode: multiply;
  opacity: 0.8;
  }
  

  Use relative units like rem or em as unit for the padding, margin, width values and preferably rem for the font-size values, instead of using px which is an absolute unit. For more on CSS units Click here

  Hope am helpful.

  Well done for completing this challenge. HAPPY CODING

  0