Advice Generator app

Hello Kam,

Congrats on finishing the challenge!

Regarding the button centering, you can use bottom: -Mpx;, where M is the necessary number of pixels required to centre the button horizontally.

Few points to note:

• Advice API caches the the data for 2 seconds, so please put { cache: "no-cache" } as the second argument inside the fetch statement. This is necessary because without this, the app doesn't work in Firefox and in other browsers we need to wait few seconds to get new advice.
• For advice and adviceId, you don't need to use span element, you can give those ID names to the parent elements themselves.
• Also, <br> is not necessary here, since h1 is already a block element and next element comes under it.

Good luck on your next projects.

Hi Kam, good attempt at working on this challenge! About centering the dice icon, the way to set it is firstly to give it a declaration of left: 50%, and then a negative margin that is half the width of the dice, which gives 27.5px (55px / 2):

button {
  left: 50%;
  margin-left: -27.5px;
}

I made the changes via the inspector and I can see it fairly centered in desktop view, but in mobile view it looks like the divider line is not centered, and so the dice also looks off center. I see you using a position: absolute on the divider; I would just remove that and use margins instead to position it. You can have a look at my solution here for ideas: https://www.frontendmentor.io/solutions/responsive-component-with-api-and-data-fetching-acBCRNQ6R9. Good luck!