Weird padding/margin/gap issue in column #3051

Closed
RideTheTides opened this Issue Aug 19, 2013 · 5 comments

Comments

Projects
None yet
3 participants
@RideTheTides

Hello,

Currently prototyping out a website with foundation 3. Can't seem to find where the this 2px gap is coming from.

The image of the girl is 422 px tall. The row/column is then is adding 2 px to make it 424 px tall for some reason.

I can't seem to find where these two pixels are coming from? Any help would be greatly appreciated as I've searched through and can't find a similar issue. Before I had the image at 420px tall and that made the column 422px tall, so 2px are being added.

Live site: www.ridethetides.com/contract/

screen shot 2013-08-19 at 11 41 10 pm

screen shot 2013-08-19 at 11 44 01 pm
screen shot 2013-08-19 at 11 43 19 pm

@Motifsky

This comment has been minimized.

Show comment
Hide comment
@Motifsky

Motifsky Aug 19, 2013

perhaps because of this foundation row rule ?

.row::before, .row::after {
content: " ";
display: table;
}

perhaps because of this foundation row rule ?

.row::before, .row::after {
content: " ";
display: table;
}
@RideTheTides

This comment has been minimized.

Show comment
Hide comment
@RideTheTides

RideTheTides Aug 19, 2013

Thanks for the quick reply. I guess its hard to tell as I'm not really sure what that code means, but when I turn that CSS off in Safari inspector it breaks the entire website.

If that is the cause, I guess my next question would be: Is there a way to shift that image down 2px to compensate? Would really like there to be no gap

Thanks for the quick reply. I guess its hard to tell as I'm not really sure what that code means, but when I turn that CSS off in Safari inspector it breaks the entire website.

If that is the cause, I guess my next question would be: Is there a way to shift that image down 2px to compensate? Would really like there to be no gap

@Motifsky

This comment has been minimized.

Show comment
Hide comment
@Motifsky

Motifsky Aug 19, 2013

You have a class of ".bottom" applied to the image, simply modify that to--> margin-bottom: -2px;

On Aug 19, 2013, at 8:16 AM, RideTheTides notifications@github.com wrote:

Thanks for the quick reply. I guess its hard to tell as I'm not really sure what that code means, but when I turn that CSS off in Safari inspector it breaks the entire website.

If that is the cause, I guess my next question would be: Is there a way to shift that image down 2px to compensate? Would really like there to be no gap


Reply to this email directly or view it on GitHub.

You have a class of ".bottom" applied to the image, simply modify that to--> margin-bottom: -2px;

On Aug 19, 2013, at 8:16 AM, RideTheTides notifications@github.com wrote:

Thanks for the quick reply. I guess its hard to tell as I'm not really sure what that code means, but when I turn that CSS off in Safari inspector it breaks the entire website.

If that is the cause, I guess my next question would be: Is there a way to shift that image down 2px to compensate? Would really like there to be no gap


Reply to this email directly or view it on GitHub.

@RobertinoValue

This comment has been minimized.

Show comment
Hide comment
@RobertinoValue

RobertinoValue Aug 19, 2013

Specify display: block; on the <img> tag.

Specify display: block; on the <img> tag.

@RideTheTides

This comment has been minimized.

Show comment
Hide comment
@RideTheTides

RideTheTides Aug 19, 2013

Thanks RobertinoValue, that fixed it. Really appreciate it!

Thanks RobertinoValue, that fixed it. Really appreciate it!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment