Mobile-first responsive solution

Community feedback

• 

  Adriano•38,290

  @AdrianoEscarabotePosted about 2 years ago

  Hi Francisco, how are you?

  I really liked the result of your project, but I have some tips that I think you will like:

  1- Page must contain a level 1 header click here

  I noticed that the content was not centered, always prefer to center with flex-box or grid.

  For example:

  removed this one:

  .container { /* margin: 150px 10px 0; */ }

  I added this:

  body { min height: 100vh; }

  The rest is great!

  Hope it helps...👍

  Marked as helpful

  1

  ---

  

  Francis Faniku•70

  @fanifrancsPosted about 2 years ago

  @AdrianoEscarabote Thanks🎉

  1
• 

  Ken Zimny•200

  @K-ZimnyPosted about 2 years ago

  For the button you can use
  .btn-div { left: 50%; translate: -50%; } This will center your button in the middle of your div

  Marked as helpful

  1

  ---

  

  Francis Faniku•70

  @fanifrancsPosted about 2 years ago

  @K-Zimny Thanks a lot.

  0

  

  Francis Faniku•70

  @fanifrancsPosted about 2 years ago

  @K-Zimny Could you please simply explain the translate property?

  0
• 

  Elaine•11,400

  @elaineleungPosted about 2 years ago

  Hi Francisco, I think @K-Zimny gave you some good advice there for centering the dice. You'll also need to make sure the divider has a width: 100% so that the two marks in the divider line up with the dice.

  By the way I think how you wrote your data fetching is really great. Right now I'm viewing this on Firefox and it doesn't load the next advice due to caching. If you have Firefox, you can test it out as well. To fix that, add a request header object in fetch, like this:

  fetch(url, { cache: 'no-cache' })
  

  Hope some of this can help you out!

  Marked as helpful

  0

  ---

  

  Francis Faniku•70

  @fanifrancsPosted about 2 years ago

  @elaineleung Thanks for the observation. I'm going to do the fix ASAP.

  0