Responsive website using css flexbox

Community feedback

• 

  Abdallh hatamleh•110

  @Abdallh-hatamlehPosted 5 months ago

  Great job!

  To answer your question: When you add padding by default it increases the elements width and height so for your body has 100vh and 10vh padding this makes it 120vh high,

  this is rarely the desired output so we use box-sizing: border-box; this makes it so padding and border count from the given width to the element so on the above example the body's height will become 80vh with a padding of 10vh(because the padding is done at the bottom and the top it's counted twice).

  and for consistency we do this at the start of the css file like so:

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

  I've heard people call this a fresh start though I am unsure what exactly it's called, worth noting that we set margin and padding to 0 because some elements have a default margin (body has an 8px margin that usually misses with how we want the site to look).

  and for your second question I am unsure exactly what you mean if you elaborate further I might be able to help you!

  I hope I have been helpful.

  1

  ---

  

  Ghassen Ben Hamida•140

  @rbhgastonPosted 5 months ago

  Thank your for your response @Abdallh-hatamleh . Actually, I set the height of the body to 100vh and the padding to 10vh.And to be sure, i set the card (the only component inside the body) to a height of 80vh. but the screen is still scrollable.

  As for my second question, if i dont use justify-content: space-between and i want my button to be at the bottom not just after the price. how do i do that in a flexbox?

  0

  

  Abdallh hatamleh•110

  @Abdallh-hatamlehPosted 5 months ago

  @rbhgaston you could use position absolute on the button and relative on the main container and just adjust its position with bottom and left. Although I am not sure this is the best practice here I hope I've been helpful.

  0