Question regarding CSS and responsiveness


Here is a link to the codepen in question.

I’m not exactly sure how to go about doing some things:

  1. I’d like the author to be in the bottom right of the containing div.

  2. I’d like the buttons to be in the bottom left of the containing div.

  3. 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.

  4. 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.


For positioning the author and buttons, use the Grid System we learned about in the Bootstrap challenges. It will also help with scaling down for mobile since all grids have a percentage-based width:

To prevent buttons from shifting around, use a fixed height for your quote box.


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!