Stat Preview Project Using CSS and HTML5

Community feedback

• 

  P

  Patrick•14,265

  @palgrammingPosted over 3 years ago

  you should play Flexbox Froggy https://flexboxfroggy.com/

  then you can do Grid Garden https://cssgridgarden.com/

  1
• 

  Raymart Pamplona•16,100

  @pikapikamartPosted over 3 years ago

  Hey, good job on this one. Both layout in desktop and mobile is fine, just that reversed order.

  To fix that, in the mobile state, in your row selector, instead of using flex-direction: column use flex-direction: column-reverse. This will reverse the order of the elements inside the element.

  Other suggestions would be that:

  1. I think you are using the wrong font in here. Maybe checking if you are rendering the right.

  2. To get that purplish effect, since you are using the image as img, you could add a background-color to the image selector, add background-color: rgb(170, 92, 219) this is the purplish one, then adjust the opacity of the img tag inside it. Adjust until you get the desired color effect.

  3. Adjust some spacing. You could see that is this huge white space on the left container right, between the 3 list at the bottom and the p tag above it. Adjusting them will be awesome.

  4. Resizing your layout, the image somehow doesn't respond very well. To address this, simply add

    height: 100%;
    object-fit: cover;
  

  This will allow the image to take the full height of its parent and the object-fit will make the image somehow responsive based on the size (really thanks to APG^).

  Aside from those, awesome job, if you need more help just drop your query here okay^

  0
• 

  Jamie Moore•230

  @jamiem89Posted over 3 years ago

  Hey Edosa.

  I achieved it by using flexbox, and setting the order when switching to the desktop view.

  Hope this helps!

  0