Skip to content

Instantly share code, notes, and snippets.

@franz-josef-kaiser

franz-josef-kaiser/col-s.less

Created January 21, 2015 10:29
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save franz-josef-kaiser/620adc8a4bad1f15a855 to your computer and use it in GitHub Desktop.
Save franz-josef-kaiser/620adc8a4bad1f15a855 to your computer and use it in GitHub Desktop.
Download ZIP
Twitter Bootstrap: The missing Column for the phone & tablet - with @media queries - Fixes the gap between XS and MD columns with a new `col-s-[1-12]` column that spans between 480px and 768px
Raw
col-s.less
/* In your variables.less after the boostrap/less/variables.less were included */
// New width/colums: `col-s-[1-12]`
// Fixes the gap between XS and MD
@screen-s-min: 480px;
@screen-s-max: (@screen-sm-min - 1);
@screen-xs-max: (@screen-s-min - 1);
/* After the bootstrap/less/grid.less was included */
// XS Breakpoints
@media (max-width: @screen-xs-max) {
.make-grid(xs);
}
// S Breakpoints
@media (min-width: @screen-s-min) and (max-width: @screen-s-max) {
.make-grid(s);
}
@franz-josef-kaiser
Copy link
Author

Keep in mind that this will change the behavior of your col-xs-n columns. Those are then downsized and get used only for up to 480px screen width.

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