search

cobyism / gridism

A simple responsive CSS grid.
http://pages.cobyism.com/gridism
MIT License
658 stars 85 forks source link

one-third using a margin that messes it up? #36

Closed dcolumbus closed 7 years ago

dcolumbus commented 9 years ago

I'm trying to use the "one-third" class, but there seems to be a margin-left rule that messes it up. When I turn off the rule, the grid responds the way it should:

media="all"
.five-sixths, .four-sixths, .one-fourth, .one-half, .one-sixth, .one-third, .three-fourths, .three-sixths, .two-fourths, .two-sixths, .two-thirds {
    float: left;
    margin-left: 2.564102564102564%;
}

With "margin-left" left in tact:

screen shot 2015-07-27 at 10 32 40 am

When the "margin-left" is turned off:

screen shot 2015-07-27 at 10 32 57 am

cobyism commented 9 years ago

That margin shouldn’t be there if the .unit is the first child of your .grid row, so my first instinct would be to check that you’re using separate .grids for each horizontal row (i.e. instead of having all of the fields in your screenshot within a single .grid). Can you share what the markup is you’re using to implement your screenshot, perhaps in a gist?

dcolumbus commented 9 years ago

I'm using one grid DIV to house the three one-third units: https://gist.github.com/dcolumbus/d022f31f8b8e28c83b9f#file-gistfile1-txt

cobyism commented 9 years ago

Thanks for the Gist. I’ve had a bit of a play, and I can’t seem to replicate the issue from your screenshot. Here’s a link to a demo on CodePen with gridism.css included in the <head>, and markup as you describe: http://codepen.io/cobyism/pen/eNxMoQ?editors=110

2015-08-06 at 8 48 am

I also note that at the top of your issue description, you pasted some CSS containing:

margin-left: 2.564102564102564%;

… which seems odd to me because if you search through the current gridism.css file, the only values ever specified for margin are margin: 0 auto;. All other spacing is done using padding attributes.

Are you sure there’s nothing else in your site’s CSS providing that extra margin?