Responsive stats preview card component

Community feedback

• 

  Vanza Setia•27,775

  @vanzasetiaPosted over 2 years ago

  Hi! 👋

  For the tint color or I would call it as the purple overlay, you can use mix-blend-mode to create the overlay.

  This is not completed yet. Also, if you find this challenge is too hard then I recommend doing the easier ones first. My recommendation is to do the QR code component challenge first. It doesn't require any media query for the site to be responsive.

  For this challenge, you need to at least know the basic flexbox to make the card into the two-column layout and align the list horizontally. So, if you want to keep doing this challenge then I recommend learning CSS flexbox.

  As far as the HTML markup.

  • If you want to add alternative text for the image then use the alt attribute (e.g. alt="Jade Smith"). There's no text attribute as far as I know.
  • I recommend using ul element for the statistic. If the site has no styling then this would more likely be a list.
    • 10k+ companies
    • 314 templates
    • 12m+ queries

  For the media queries.

  • I recommend keeping it simple. So, just use one condition at a time. In this case, the site only needs one media query to be responsive. If you write the initial styling for the desktop design then use a max-width media query once the two-columns layout is no longer looking good.
  • The breakpoint for the media query doesn't have to be 375px or 1440px. I assume you get these numbers from the style-guide.md. The truth is those sizes on the style-guide.md have nothing to do with the media queries. They are telling you that "this is how your website should look like at these screen sizes". As frontend developers, we should keep making your website looks good in between those screen sizes.

  That's it! Hope this helps. Happy coding and good luck! 👍

  Marked as helpful

  0
• 

  favour Aniogor•275

  @PhantomOzPosted over 2 years ago

  Hello Cveller16, you should read about flexbox check w3schools on google

  0