Responsive results-summary-component-main webpage on all devices

Community feedback

• 

  Rebecca Padgett•1,860

  @bccpadgePosted over 1 year ago

  Hello @Y-aburob. Congratulations on completing this challenge!! 🎉

  To answer your question, website should not be responsive under 200px because people don’t look at screen that size.

  Here are a few tips to improve your solution.

  To center your result summary component you can use Flexbox or CSS Grid

  Flexbox

  body{
  display:flex;
  justify-content:center:
  align-items:center;
  min-height: 100vh;
  
  }
  
  

  CSS Grid

  body{
  display: grid;
  place-content: center;
  min-height: 100vh;
  }
  
  

  You can add a box shadow to result summary component container.

  • box shadow generator

  Hope this helps you and don’t hesitate to reach out to me if you have any questions

  Marked as helpful

  1

  ---

  

  yanal abu alrob•160

  @Y-aburobPosted over 1 year ago

  ty for your help :).

  what does the 100vh mean, and is it important to use it as a height? @bccpadge

  0

  

  Rebecca Padgett•1,860

  @bccpadgePosted over 1 year ago

  @Y-aburob,

  No problem 😌

  • 100vh takes up full viewport of the screen. (vh means viewport height)
  • if you want to define a element of how tall something is you use the CSS height property.

  Here is a link explaining the difference between height vs min-height.

  Marked as helpful

  0