Statistics page design using Flexbox

Community feedback

• 

  Lucas 👾•104,400

  @correlucasPosted over 2 years ago

  👾Hello Semi-Square, congratulations for your solution!

  Your solution layout is already done, but there's some work to do about the component details.

  1.Note that for a 1440px resolution your component is a little bit too big, this is due the percentage width you gave, to avoid your component growing too much, set a max-width to contain this component, for example the code below:

  .container {
      display: flex;
      max-width: 1110px;
  }
  

  2.The image isn't resizing with the correct proportions, this is due the percentage you've applied to these img width, to fix this you can use display: block; max-width: 100%; and object-fit: cover; there's no need to set the hight the img height will be the container height.

  3.To write less lines of code and don't have to use media query for the image switch between mobile and desktop, you can use the tag <picture> inside the html and determine when it should change. See the code below with your image with the picture set applied:

  <picture>
    <source media="(min-width:650px)" srcset="assets/image-header-mobile.jpg">
    <img src="assets/image-header-desktop.jpg" alt="office workers" style="width:auto;">
  </picture>
  

  Hope it helps, happy coding!

  1

  ---

  

  Semi_Square•80

  @Semi-SquarePosted over 2 years ago

  @correlucas Hey, thanks a lot man. I was wondering about the resizing thing. It helped a lot!!

  1

  

  Lucas 👾•104,400

  @correlucasPosted about 2 years ago

  @Semi-Square You're welcome, happy to hear that was helpful!

  0