Feedback if you can! Random quote!

Hey all!

Love some feedback on this!

Also love to know about my css. I hate trying to figure out how to line up items in a row so they fit nice and neat and use something other than padding, if there is a better way?

Anyways, here it is and thanks in advance!

https://codepen.io/tmacmcgraw/pen/qwNPRR

Link to challenge:
https://learn.freecodecamp.org/front-end-libraries/front-end-libraries-projects/build-a-random-quote-machine

1 Like

Use flexbox:

#tweet-div{
  // padding-top: 5px; <--- remove this
}
// add this
.col-2 {
  align-items: center;
  display: flex;
}

@thevolk

Here are the parts of the fCC curriculum that might help with lining up items:

CSS Flexbox

CSS Grid

I digg your design! Although I have a couple of concerns: 1) when your background color is too dark your title becomes very hard to read. I would either leave it white and change the color of div where you have the quotes or select a smaller range of colors where it is proven your title would read fine. 2) I would leave the tweet and new quote buttons at the bottom outside of the quote’s div. And 3) I would try to align leave some margin to the bottom so the content isn’t pushed on the bottom. I think you could do this either by leaving a margin which I think it isn’t the “proper way” or playing around with percentages.

Great job!:+1:

1 Like

Thank you very much for that. I feel like I always try to use flexbox or a vast number of things and end up getting bogged down in trying to make different things work. this worked beautifully.

Thanks! I was thinking that about the color as well, but didn’t think about changing it to white. That works well.