a not responsive Stat Preview Challenge

Community feedback

• 

  P

  Alper•1,010

  @adonmez04Posted almost 2 years ago

  Hi, @meantoes. It's a good solution. Keep coding. I have some suggestions for you.

  1 - I see this coding style a lot in others. I don't know why, it's a new style? If you use the basic global reset, everything will be easy for you. To be honest I wrote this comment to other coders and copy them to you because you are in the same situation.

  margin: 0;
  padding: 0;
  box-sizing: border-box;
  }
  

  box-sizing: border-box; is so important. This topic is related to the box-model. It is one of the most important topics in CSS. Be sure to understand the fundamentals of CSS. This will make you feel more comfortable. Please check the resources.

  The box model

  The box-sizing property

  Learn CSS Box Model In 8 Minutes

  I think you can focus on the fundamentals of CSS and try to solve the problem again and again. It'll improve your coding skills.

  2 - Another common problem is not using Flexbox and CSS Grid with all of ability. You touched on the solution with position properties, it's okay for us because we are here as newbies but we don't want to be newbies forever, right... That's why we should push ourselves for different styles. Check your Flexbox and CSS Grid knowledge and try to solve this problem without position properties again. You can check these resources:

  Flexbox Froggy

  Grid Garden

  Learn Flexbox in 15 Minutes

  This learning process will be hard but if you catch the big picture one time, everything will be easy for you, trust me.

  I hope these will help you to improve your perspective. Keep coding. All the best.

  Marked as helpful

  0

  ---

  

  Hanana•170

  @meantoesPosted almost 2 years ago

  Hi, @adonmez04! I'll reply your suggestions one by one. umm yea I do global reset but only for margin😅 because I thought I only needed to reset it and I thought border-box didn't do anything🥲 I'll use your suggestion from now on⭐⭐

  for this code I used trial and error method and I'm so done with it...

  yup!! I don't wanna be newbie forever🥲 thank you soo much for the resources!⭐⭐ I'm trying to learn grid and flexbox and their properties, but there are just a lot of resources and it made me kinda overwhelmed, so thank you so much⭐🙆🏻‍♀️

  have a nice day☀️

  1
• 

  Hassia Issah•50,650

  @HassiaiPosted almost 2 years ago

  To center the main on the page using flexbox, replace the height in the body with min-height: 100vh.

  For the color of the image , change the class name of the div containing the picture. give .image a background-color of soft violet and add height of 100%, object-fit: cover; mix-blend-mode : multiply and opacity:0.8.

  <div class="stat-image"><picture><img></picture></div>
  .stat-image{
  background-color: hsl();
  }
  img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  mix-blend-mode: multiply;
  opacity: 0.8;
  }
  

  Hope am helpful.

  Well done for completing this challenge. HAPPY CODING

  Marked as helpful

  0

  ---

  

  Hanana•170

  @meantoesPosted almost 2 years ago

  @Hassiai Hi! thank you soo much for your feedback! I'll use this method to blend the color of the image from now on!⭐⭐

  have a nice day🙆🏻‍♀️

  1