Results summary component

Community feedback

• 

  jetskeeter•180

  @jetskeeter1Posted about 1 year ago

  A lot of it requires a container div as far as I can tell and in my own experience. Without having a container that spans both height and width, then you would more likely have to hard code it using transform: translate, margin, and etc... but hard coding are never really good and is not really responsive. The easiest solution would be having to have a container that span both width:100%, height: 100vh, and display the container to flex and then you use justification-content: center; and align-items: center;. It will display the contents to the center of the screen.

  Here is a video that I like that I found in youtube made by @Fireship: https://www.youtube.com/shorts/njdJeu95p6s

  1

  ---

  

  Karl Davis•270

  @TKD5Posted about 1 year ago

  @jetskeeter1 thanks for your advice. I'll check out that YouTube video.

  0
• 

  Nikhil Tanwar•260

  @NikNTPosted about 1 year ago

  Hey @TKD5

  Nice work.

  There is a very easy and optimal way to center a div.

  <div class = "container"> <div class = "wrapper"> </div> </div>

  Let's say we want to center the 'wrapper' div.

  Simply, we can give <container> a height of 100vh and a width of 100vw. This will span the container to the entire screen.

  Now, give these properties to <container>

  display: flex; justify-content: center; align-items: center;

  And, voila! your <wrapper> div will be centered!

  Let me know, if you need any other help.

  1

  ---

  

  Karl Davis•270

  @TKD5Posted about 1 year ago

  @NikNT thanks for your advice. I'll definitely try out that method.

  0