Responsive Stats Preview Card

Community feedback

• 

  Natasha Pierre-Louis•280

  @natashaplPosted about 2 years ago

  Hi Casey. Your solution looks nice! I have a couple of suggestions per your question:

  1. I recommend that when you upload a solution, you click the "View Reports" button if it shows any Accessibility or HTML issues. This report gives valuable insight on things you can fix or improve.

  2. For the article class="image", I recommend you add the source image as a background image using CSS rule in your index.css stylesheet rather than adding the source in the markup. That source tag causes your HTML to be invalid.

  Here's an example of how that would look:

  .image { position: relative; background: url(./images/image-header-mobile.jpg) no-repeat 0 0; height: 100%; }

  3. It's not valid HTML to place a p tag inside an h2. Use a span instead and if you want you want the element in its own line apply display: block; to the span.

  4. Consider changing the width of .container to width: 1080px; for desktop and then adding an overflow: hidden; to keep the content from flowing outside the rounded corners. I also suggest you change the height of .container to height: 68vh;.

  I hope this is helpful. :)

  Marked as helpful

  1

  ---

  

  Casey•80

  @casey-botPosted about 2 years ago

  @natashapl Thank you!! This is super helpful

  1
• 

  Lucas 👾•104,400

  @correlucasPosted about 2 years ago

  👾Hello Casey, Congratulations on completing this challenge!

  You need to fix the container size that is a bit off, this challenge uses the standard container size that is max-width: 1110px.

  To make the image have a better fit inside of it, make the component image responsive with display: block and max-width: 100% (this makes the image fit the column/div size) and respect the component size while it scales down. To make it crop while scaling use object-fit: cover.

  img {
      display: block;
      object-fit: cover;
      max-width: 100%;
  }
  

  The way you’ve applied the purple color is fine, but if you want the exact color tone of color of the challenge designs, you need to use mix-blend-mode to make the color blend between the image and the background-color of the container. See the steps below to apply to the img or picture selector:

  img {
  mix-blend-mode: multiply;
  opacity: 75%;}
  

  ✌️ I hope this helps you and happy coding!

  0