Abdallh hatamleh

Latest comments

• 

  Emmanuel Moolongawi•110

  @EMLzmileSubmitted 10 months ago

  What are you most proud of, and what would you do differently next time?

  I really enjoyed using the CSS Grid to complete this challenge, I learned a lot from it. Next time I will try to do it using flexbox. Oh, I had fun making a tablet version of the page I hope you will see it 😊

  What challenges did you encounter, and how did you overcome them?

  The layout of the cards on desktop confused me a little at first but I quickly knew what to do, I first used the flexbox but I didn't like the result so I opted for the CSS Grid

  

  Four card feature section use CSS Grid

  2

  30
  

  Abdallh hatamleh•110

  @Abdallh-hatamlehPosted 10 months ago

  Great job I was struggling with how the drop shadows are done but yours looks quite good.

  0
• 

  Ghassen Ben Hamida•140

  @rbhgastonSubmitted 10 months ago

  What specific areas of your project would you like help with?

  If i want the page to be inscrollable, how do i make the content fit only 100% of the viewport port without exceeding it. Because even though I set the body height to 100 vh, the page still scrollable.

  Another question, how can I make an element be pushed back to the bottom inside a parent with flexbox display.

  Thank you for your help.

  

  Responsive website using css flexbox

  1

  20
  

  Abdallh hatamleh•110

  @Abdallh-hatamlehPosted 10 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