Our website has 4 major breakpoints. Components behave differently at different breakpoints, but consistently within a breakpoint range.
- X-large desktop breakpoint: 1441px and above
- Desktop breakpoint: 1025 - 1440px
- Tablet breakpoint: 641 - 1024px
- Mobile breakpoint: 320 - 640px
Leveraging Foundation 5’s framework, targeting these breakpoints with specific CSS is possible by using the built-in media queries in SCSS.
Examples:
@media #{$small-up} { /* target 0 and up */ }
@media #{$small-only} { /* target 0 to 640px only */ }
@media #{$medium-up} { /* target 641px and up */ }
@media #{$medium-only} { /* target 641px to 1024px only */ }
@media #{$large-up} { /* target 1025px and up */ }
@media #{$large-only} {/* target 1025px to 1440px only */ }
@media #{$xlarge-up} { /* target 1441px and up */ }
@media #{$xlarge-only} { /* target 1441px to 1920px only */ }
Also check media queries content in Foundation.