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

CSS

Posted by Aurelian Spodarec
Aurelian Spodarec
10,801 Points

A weird gap between collums or something

HI,

I don't know why, or what i did, as this was just fine before.. but if you look on this site, and you overlay images, there is this gap of the images everywere that the image is like not 100% height, even though i set max-height and such..

How can I solve that problem?

Aurelian Spodarec
Aurelian Spodarec
10,801 Points

Kevin Korte : d Hi, could you help me on this please, I have absolutely no idea on what's happening. I never had this before, but now there is this gap between my columns or whatever. I put just static images, and images with some effects, and the gap is still there, I can't figure this out and I'm running out of ideas on what can be wrong. This usually worked, but now it doesn't uhh. Or maybe it's just the image that for some reason won't expand to 100% i don't know.

3 Answers

martinjones1
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
martinjones1
Front End Web Development Techdegree Graduate 44,824 Points
martinjones1
.a{fill-rule:evenodd;}techdegree seal-36
martinjones1
Front End Web Development Techdegree Graduate 44,824 Points

Hi,

I think it may have something to do with your clearfix, if you add "line-height: 0;" to your CSS, you should see what I mean.

Does look like it would then need some further tweaking to add the line-height back for example, better solutions might also exist, but think it does come down to the clearfix,

http://ryansechrest.com/2012/11/css-clearfix-leaves-space-below-container/

Hope this helps

Aurelian Spodarec
Aurelian Spodarec
10,801 Points

Let me check that, but the weird thing is that all my other projects, e.g. https://aurelianspodarec.github.io/hcHomeRent/ had no problem what so ever.

I tried that solution but it didn't work. What happened is that all disappeared .

Aurelian Spodarec
Aurelian Spodarec
10,801 Points

Also, that's funny, because i just disabled my grid system and layout, so there is no classes assigned to it and there is still a gap. i don't think it's the clearfix problem.

Aurelian Spodarec
Aurelian Spodarec
10,801 Points

Heck, white line without any css code

http://codepen.io/Aurelian/pen/zKbxbg?editors=1010

martinjones1
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
martinjones1
Front End Web Development Techdegree Graduate 44,824 Points
martinjones1
.a{fill-rule:evenodd;}techdegree seal-36
martinjones1
Front End Web Development Techdegree Graduate 44,824 Points

Thats Interesting, I'm using Safari on Mac and updating the CSS below does get rid of the spacing for me:

.row, .row:before, .row:after { content: ""; display: table; clear: both; width: 100%; line-height: 0; }

I'll keep looking to see what else it could be

Aurelian Spodarec
Aurelian Spodarec
10,801 Points

Look at this, space below without any cdoe, and i check that again http://codepen.io/Aurelian/pen/zKbxbg?editors=1010

Aurelian Spodarec
Aurelian Spodarec
10,801 Points

Oh right, i did put that on my clearfix class xD but yes, this works if i put it on the row BUT, the text is then collapsed on top of each other, but agian, on my previous project i never had this problem : d

martinjones1
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
martinjones1
Front End Web Development Techdegree Graduate 44,824 Points
martinjones1
.a{fill-rule:evenodd;}techdegree seal-36
martinjones1
Front End Web Development Techdegree Graduate 44,824 Points

Yeah, you could then add the CSS below to put the line-height back:

.overlay-content { line-height: 150%; }

It doesn't get to the crux of the issue really and starts to get a bit messy, but we have an idea where to look.

Looking at the CSS for the other website, I think you may have come across the same issue, but are using slightly different CSS in some case, 380px height for images instead of the auto that you have on this site.

The other thing is that you are including the clearfix classes at the top of your CSS files, right before normalize, this browser reset should be right at the very top before any other CSS, at the moment your clearfix is above this.

Hope this helps

Aurelian Spodarec
Aurelian Spodarec
10,801 Points

The problem is that the whole page needs line height. The overlay is a feature that is going to be only on imagees. if i reset the line height every single text wrapped around row, which is the entire page, will go down. That's a bad practice and it will get messy.

Well, the other site, it doesn't matter if it's 380px or not, that has nothing to do with the spacing as you can see on this page https://aurelianspodarec.github.io/hcAsite1/about.html as well as I tried it on the project I'm working on.

And that's interesting lol but that shoudn't be an issue because it work on the other projects.

But then agian, here you got no CSS as i mentioned previously and the gap is still there lol http://codepen.io/Aurelian/pen/zKbxbg?editors=1010

But thank you : p