Media querrys and flex box

Community feedback

• 

  Bernardus•1,095

  @BernardusPHPosted over 1 year ago

  Hey UZAINMALIK123

  For the height and width I would recommend mostly playing with the width more than the height since the content in the card will sort out the height mostly. I see that you can remove the height of the card and just by adding a padding-top and padding-bottom of 1rem fixed the height problem(you can tweak this). Its generally a bad idea to mess with height except if you have a specific goal in mind.

  If you really want to play with width and height a lot then I recommend using clamp. clamp can be used when want a min-max setting but want to work in between the min and max. Sorry for the terrible explanation but here is an example: width:clamp(500px,80%,700px) Here the item will be 80% the parent's width but it cant be greater than 700px or smaller than 500px this helps when resizing the screen.

  Also Don't use height:100dvh on the body rather use min-height:100vh and min-height:100dvh the min-height makes your body's height as big as the screen but it can then increase based on the content. But put the vh before this as some browsers cant read dvh.

  body{
  min-height:100vh;
  min-height:100dvh;
  }
  

  I see that you did not add a box-sizing:border-box; to your * like:

  *{
  box-sizing:border-box; 
  }
  

  This makes working with margin and padding easier as they wont increase the width of your containers easily.

  Lastly please don't use a div as a landmark without reason(like a framework). What I mean is, the DIRECT children of the body. There are a few landmarks like

  • nav
  • main
  • footer
  • aside etc. For your project I would just replace the direct children of the body into main since you just have a card. The reason for this is for the developers so we don't get easily lost in the code and also screen readers use the landmarks.

  Hope this helped.

  Marked as helpful

  1

  ---

  

  uzainmalik123•150

  @uzainmalik123Posted over 1 year ago

  @BernardusPH Thank you for all the advice, I did not use clamp that much because I was not planning to make this a serious project I know clamp pretty well but I like to play around with it use different measuring units, I did not use landmarks because it seemed a small project to me if I do make a big project like a practice website I do it in React so I do not really consider using them, Classes like card, container were all I could think because again it seemed a small project to me.

  1