Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
Gina Bégin
Courses Plus Student 8,613 PointsLots of unnecessary space between... divs?
In the footer of the site I'm working on for my family, there are three social media feeds and then a lot of extra space before the text ("We're Social!" — which is going to be changed). It wasn't like that until I added the Instagram feed. I tried to look up div names to see if there were any large margins or paddings, but I'm not able to figure out where it's coming from. I tried opening up Chrome's inspector, too, but not having any luck.
This is the page: http://kgshowroom.com/test/about.html (Edit: Not sure why it's adding weirdness to the end of that URL. Should end in ".html")
4 Answers
Paul Ogden
7,709 PointsHuh weird it cut it out, maybe I need to wrap it in the code tags. Lets try this again:
I just played around with it in chrome dev tools and it looks like if you change the section at the bottom where it says "We're Social" from an hr to a div it gets rid of that big chunk of space
Paul Ogden
7,709 PointsI just played around with it in chrome dev tools and it looks like if you change the section at the bottom where it says "We're Social" from an <hr> to a <div> it gets rid of that big chunk of space
Gina Bégin
Courses Plus Student 8,613 PointsHey Paul Ogden — thanks for the reply. Could you clarify "an to a"? I'm not seeing that... the only tags I'm seeing for "We're Social" is that I've made it <h3>.
Paul Ogden
7,709 PointsHuh weird it cut it out, maybe I need to wrap it in the code tags. Lets try this again:
I just played around with it in chrome dev tools and it looks like if you change the section at the bottom where it says "We're Social" from an hr to a div it gets rid of that big chunk of space
Paul Ogden
7,709 PointsWell from there it gets a little tricky because the left column above it is an iframe with a fixed height. I think your best bet would be to add a new class or id to that "We're Social" div, then target that class or id with CSS and start setting the top margin as a negative number... something like -80px
Paul Ogden
7,709 PointsWell from there it gets a little tricky because the left column above it is an iframe with a fixed height. I think your best bet would be to add a new class or id to that "We're Social" div, then target that class or id with CSS and start setting the top margin as a negative number... something like -80px
Gina Bégin
Courses Plus Student 8,613 PointsThanks, Paul! Appreciate the super quick responses. :)
Codin - Codesmite
8,600 PointsI did a quick inspect with Firefox Dev Tools and noticed your iFrame that contains your twitter feed is getting a min-height value of 600px from the class iframe.twitter-timeline. It looks like this is what is causing your whitespace, reduce the value or remove the value and it should fix the problem for you.
Gina Bégin
Courses Plus Student 8,613 PointsHey Ashley Skilton — thanks for the response. I tried changing it to 500px in my stylesheet, but it looks like it didn't budge. Are you seeing the same on your side?
Codin - Codesmite
8,600 PointsI set it to 0px and it moved the footer directly under the feed with no gap.
Gina Bégin
Courses Plus Student 8,613 PointsMaybe I'm changing the wrong thing... I just cut it in half, and it still isn't moving. Are you moving this part:
iframe.twitter-timeline { min-height:250px!important; }
Codin - Codesmite
8,600 PointsYou're changing the correct value, change it to 0 or delete it all together and it will remove the gap.
Codin - Codesmite
8,600 PointsLooking at your website now and the gap is gone, make sure to full reload the page incase it is cached in your browser.
Codin - Codesmite
8,600 PointsOh and side note changing the <hr> tags to <div> tags just removed
a content seperator, like the two lines you have above the first names on meet the team.
Change them back to <hr> and the lines will come back and
it shouldn't break the layout size if you removed the value in my answer :)
Hope this helps.
(sorry had to code block my comment, treehouse forums are being weird and removing html tags in posts.
Gina Bégin
Courses Plus Student 8,613 PointsHi Ashley Skilton — are you talking about the <hr> that was under "We're Social" on the About page? I ended up taking out the div and the hr entirely — I'm not seeing lines above the names on the About page other than the lines in the navigation bar — in Chrome, at least!
Gina Bégin
Courses Plus Student 8,613 PointsGina Bégin
Courses Plus Student 8,613 PointsThat definitely did move it up, Paul Ogden, much appreciated! Thinking I might like to move it up even a little more; any idea of getting it tighter?