I used React for the first time to build something, I decided to take it step by step and first get more comfortable with React and not use Redux, I also wanted to use SASS to make my CSS cleaner, but I forgot (lol), maybe I will rewrite it and clean it up.
I also wanted to make an animation that will play when quotes change, sort of like this test I made, but I ran into some problems implementing it. I’m curiuos if you have any ideas on how you would do it.
It looks good @Wanela. Maybe revisit and look at responsiveness.
I’m attaching a screenshot of one of the quotes that gets cut-off at the top. You’ll also want to get rid of that horizontal scroll bar.
I would recommend that you always start by styling for narrow view port width first and make that your base CSS, then add additional styling for wider view port widths (using media queries if necessary). It is almost always easier to go from narrow to wide than vice versa. But since this layout is so simple, it shouldn’t be too hard to get it to behave nicely at narrow widths.
A few hints:
Don’t set widths on things that don’t need it. For example, you don’t need to set width: 100% on the <body> because body is a block level element and will automatically take up all width available. Setting its width to 100% actually causes the horizontal scroll bar in this case. I always strive to use as little CSS as possible to achieve what I want.
Use max-width to keep things from getting too wide. Right now you have width: 50% on the quote box. This is fine if the view port is wide, but if it is very narrow this is not good. So get rid of that. Instead, use max-width to keep it from growing too wide (and use em units as well). And then to keep it from getting too close to the browser edge, you can either give it some side margin or put some side padding on its parent.