Random Quote Machine - Help Needed

Hello FCC,

I am just about finished with this project… but am having a weird issue I can’t seem to peg down. I want to understand why I cant move the twitter icon closer to my quote container. If you inspect you wont see any margins on the quote container or the twitter icon that would account for the 30px gap between. Fortunately it doesn’t look bad so I will probably leave it, but for the sake of clarity, could somebody point out where that space is coming from?

The link to my page is here - https://codyflynnnc.github.io/randomquote/index.html
Code is here: https://github.com/codyflynnNC/codyflynnNC.github.io/tree/master/randomquote

Thanks everybody!

Using the chrome console I unticked the margin-left on your #tweet-quote and it moved 10pxs closer.
That being said I would update your CSS-rule #tweet-quote and remove the margin-left.

The rule is located in your randomquote/css/custom.css.

Sorry, I don’t want to move the tweet icon to the left. I want to move it down so it touches the quote container. Admittedly I understand that it won’t look good, but for the sake of understanding why that gap exists I want to move it. Here is another screen shot which should it make it more clear.

Furthermore, It can be done very easily with the New Quote button by removing the ‘margin-bottom’, just not the tweet icon, as seen below.

Aha, I see, misunderstood you then :slight_smile:

I think this is as the fact that FontAwesome is a “text”, and it aligns with “New Quote” text, this is a guess though.

One way of solving this would be to look into modifying the wrapping <div class="row"> and specifically looking at using a display:flex on it! I cleared out some margins, applied display: flex on the wrapping <div> and adjusting the margins on the <div> to align the row (and the content below) properly, and voila!

‘Display:flex’ did the trick. Now I gotta do some reading on the flex property… lol. Thank you for the assist.

Flexible box model will soon be your new best friend when it comes to alignment!

1 Like