Here is a link to the codepen in question.
I’m not exactly sure how to go about doing some things:
-
I’d like the author to be in the bottom right of the containing div.
-
I’d like the buttons to be in the bottom left of the containing div.
-
I’d like things to not shift around when you press ‘new quote’ and the quote and/or author is longer than the previous one.
-
I’d like it to keep it’s general shape when the window size scales down - i.e. responsiveness for mobile.
Any insight would be appreciated, thanks in advance!
If you’d like to align the author to the right, I’d take a look at How To Center In CSS.
I decided to go with the bootstrap method. I’ve got the buttons and the author aligned, but things are still shifting around when you press new quote. So I could add some margin or padding to the buttons and get them in the lower left like I want, but then if the quote length changes, they’re suddenly out of the box.
EDIT: So, I played around with bootstrap a bit more and I think this is as good as it’s gonna get. The buttons and author shifting around are something that it appears I’ll have to deal with, but I at least got the buttons and author where I want them. Thanks for your help!