Advice generator using vanilla css and js with semantic HTML

Good evening !!

The button is going out of place because you used a percentage value. Percent value is always relative to parent value;

When the text on your main card gets too big, the button moves down too much, because the margin value is based on it.

You can prevent this using Rem, rem is relative to the font-size of the root element (html element). Then the button stops dancing !!

I suggest this change: @media (min-width: 31.25rem) .btn-container { bottom: -1.875rem; }

Have a nice day, happy coding !! :)

Hi Kevin!

Love your solution. Before reading your code, I didn't realise I could use document query-selectors to update the DOM; I was using jQuery to achieve the same thing but slower page load due to CDN. You also taught me how to properly import Google Fonts.

Can offer what I did to get the button in the right position. I placed the button directly below the card div.

1. In the buttons parent I use text-align: center
2. In the button I applied position: relative; top: -27px;

I used the inspector to see how high the button was, then I moved it up half that amount. This is a little hacky but it works.

Your app looks and functions great!

There are several ways you could align/center the button.

One way I prefer/suggest is using 'position: absolute' on the button, and 'position: relative' on the parent container (assuming its the div surrounding the advice/qoute)... by doing this, the button will always position itself RELATIVE to the parent container.

Look into 'position relative/absolute', AND "transform: translate" ... a combination of these CSS properties would definitely help in vertical and horizontal alignment, consistently every time.

Hope this helps!