Mobile First Results Summary Component | Vanilla HTML & CSS

Community feedback

• 

  hitmorecode•6,680

  @hitmorecodePosted over 1 year ago

  Congratulations well done, good effort. I took a look at your markup and css and there a few things you can do to fix some issues.

  • Because the width and height of the wrapper is set to 100hv and 100vw. This will create some problems with your page. The height: 100vh; creates a problem when the screen size is less than 100vh, part of the content will overflow outside the card in desktop mode. Either give the height a fixed value or set the height to auto. For the width remove 100vw and also add a value to the width.

  • The circle in will stretch and shrink because you used % to define the circle. For best practice, give it a width and a height of 200px and after set the border radius to 100%. This will create a nice circle.

  • You can add this to the body to center the card.

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

  • Your break point is set to high make it smaller. Right now when switching from mobile to desktop. The card is stretching really wide

  You can take a look at my solution. I'm not implying that my solution is the best, there is no wrong or right. This is just to give you an idea how I solved it.

  Results Summary Component

  Marked as helpful

  0

  ---

  

  Guilherme Campina•100

  @guilhermecampinaPosted over 1 year ago

  @hitmorecode Thanks for the feedback man I will definitely check it out and also study your solution. Thanks again!

  0

  

  Guilherme Campina•100

  @guilhermecampinaPosted over 1 year ago

  @hitmorecode got it! My screen only reaches 1366x768 resolution so when it goes to full hd everything stretches.

  0

  

  hitmorecode•6,680

  @hitmorecodePosted over 1 year ago

  @guilhermecampina that shouldn't be a problem. What you can do is check what the width of you card is. For example if the card is 740px wide, then you should set the min-width to 740px. When the screen size is lower than 740px, it switches to mobile.

  I've created a simple layout, in the media query play with the min-width and see what works best for you.

  summary layout

  If you still have questions, let me know

  Happy Coding 👍😀

  Marked as helpful

  0