Larger Breakpoints?

General Discussion
1

I love how Bloc works with the breakpoints for mobile, tablet and desktop. But I have been asked more and more often to design sites for HD or larger sizes.

Are there any plans on adding larger breakpoints like 1200px 1800px and even 1900px?

Is there a way to do that currently with bloc and I just haven’t figured it out? Or would I need to do the breakpoints post bloc?

Thanks,

2

Hi @ukindesigns,

Blocs presently does not have a way to add custom breakpoints through it’s UI, not sure if that will change in future versions.

I assume you wish to do unique layout and design related things at those higher break points you mentioned. Blocs 2.+ is based upon Bootstrap 3.+, so these are the current Media Queries (Breakpoints).

Bootstrap 3:

/*
Default Media Queries in Bootstrap 3.3.5 which Blocs 2.X.X currently uses
*/
@media only screen and (min-width : 320px) {
}
@media only screen and (min-width : 480px) {
}
@media only screen and (min-width : 768px) {
}
@media only screen and (min-width : 992px) {
}
@media only screen and (min-width : 1200px) {
}

Blocs:

/*
These are the custom Media Queries used by Blocs 2.X.X
Which are found in the "style.css" at the following locations:
*/
/* = NavBar ---------------------*/
@media (min-width: 768px){
}
/* = Mobile adjustments ---------*/
@media (max-width: 1024px){
}
@media (max-width: 992px) and (min-width: 768px){
}
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {}}
@media (max-width: 991px){
}
@media (max-width: 767px){
}
@media (max-width: 400px){    
}

So you can additionally define and build your own custom Media Queries (Breakpoints).

  • You can add them either as a post-export edit to the “style.css”
  • Or add them in Blocs via: Page Settings → Add Code → Header
<style type="text/css">
/* Your Custom CSS */
</style>

Simply create and add the ones you need. Hope that helps you effects.

:wink:

You may also find interest or use in this:

Bootstrap Big Grid – Larger Grid Dimensions for Bootstrap
http://benwhitehead.github.io/bootstrap-big-grid/

You can discet and and take out the media queries in its “bootstrap-big-grid.css”

They are as follows:

@media (max-width: 767px) {
}
@media (min-width: 768px) and (max-width: 991px) {
}
@media (min-width: 992px) and (max-width: 1199px) {
}
@media (min-width: 1200px) and (max-width: 1365px) {
}
@media (min-width: 1366px) and (max-width: 1919px) {
}
@media (min-width: 1920px) and (max-width: 2559px) {
}
@media (min-width: 2560px) and (max-width: 2879px) {
}
@media (min-width: 2880px) and (max-width: 3839px) {
}
@media (min-width: 3840px) and (max-width: 4095px) {
}
@media (min-width: 4096px) and (max-width: 8191px) {
}
@media (min-width: 8192px) {
}

Good luck with your HD & Large Screen projects

Make sure you test thoroughly and often to ensure you don’t cause conflicts across the sizes you use.

:smile: