@media min-width value on ...-responsive.css

[vonscriptor]

unsemantic-grid-responsive.css and the like...

@media screen and (min-width: 767px) {

• change to - @media screen and (min-width: 768px) {

I believe this bug is there because a tablet grid would fill the gap, however this grid is only for desktop to mobile.

P.S. - Loving the grid so far!

P.P.S. - I read your reasoning behind the default padding on grid-x. I either don't understand it (probably because I haven't used push/pull), or I don't agree. :p

P.P.P.S. - I know this could be said for any grid-x, but I really wish there were (*-)grid-1 - 4.

[ajk1982]

I just discovered this as well, I don't think there should be any overlap with the media query widths as it causes odd display issues.

My new favourite grid system!

[nathansmith]

Can you elaborate on the "odd display issues?"

The reason I have it at 767px and not 768px is because the iPad's narrowest is at 768px.

So, everything below that is considered to be "mobile."

You'll notice that other grid frameworks, such as Zurb Foundation, also use 767px…

https://github.com/zurb/foundation/blob/master/scss/foundation/components/_dropdown.scss#L125

[ajk1982]

If you slowly resize the screen when it gets to the break points you have the css from both media queries come into effect.

@media screen and (max-width: 767px) { and @media screen and (min-width: 767px) and (max-width: 1025px) { or

@media screen and (min-width: 767px) and (max-width: 1025px) { and @media screen and (min-width: 1025px) {

Skeletons http://www.getskeleton.com/ media queries don't overlap:

/* Tablet Portrait size to standard 960 (devices and browsers) */ @media only screen and (min-width: 768px) and (max-width: 959px) {}

/* All Mobile Sizes (devices and browser) */ @media only screen and (max-width: 767px) {}

[nathansmith]

Ah, gotcha.

So, I'm dumb.

Yeah, that needs to be fixed.

:)

I'll try to get to that today.

[nathansmith]

Alrighty, pushed a fix…

https://github.com/nathansmith/unsemantic/commit/a3ffa5aa3015bcf3980f43b6e3cc29fdd1cbecd4

Thanks for bringing this to my attention.

[vonscriptor]

Thanks Nathan!

[nathansmith]

You're welcome.

By the way, if you don't want padding on the grid units, you can do a Sass build with $gutter-half set to 0.

That will keep any padding-left or padding-right from being emitted to the compiled CSS.