4 default breakpoints in Blocs?

Yes for those people that are using small screens it might seem pointless. But the large breakpoint sets max-width: 991px inside a container (class=container). Almost anyone on a Full desktop or using an alternate display with a notebook is using at minimum a 21.5-inch monitor (1920px) 27" (2600px) iPad Pro landscape( 1366px). That leaves a lot of space on each side.
I think if it were pointless Bootstrap(Twitter) would have dropped it.

1 Like

Blocs lets you set the max container in site settings so you can have widths larger than 991px without the need for the larger breakpoints.

The large breakpoint obviously exists in blocs sites, just Blocs doesn’t expose it in app for custom classes and the visibility features.

I’m always trimming fat from the UI hence the reason I don’t include this, however, if folks make enough noise and want the XL desktop breakpoint I’ll add it.

Also I live on a 27” iMac and never a use full screen browser, so I have the screen space but rarely give it to a web browser ( but of course I’m not everyone)

3 Likes

@Norm - FANTASTIC! When do you think the next major update to Blocs may come out? Warm Regards, Randy

@Norm, I develop on an iMac also and test my Blocs projects at full screen, down to as small (narrow) as my browser will allow me. FYI, I typically test on Chrome, but have found that Firefox allows me to go narrower than Chrome. (400px wide min on Chrome - vs - 335px wide on Firefox). My thinking is that while mobile phone use is increasingly becoming the norm, there are still MANY (including myself) who routinely surf the web on my desktop computer. (In my case, an iMac or 24" PC monitor). I feel that for a professional developer, creating websites that look great on ALL devices is mandatory.

I can of course, export my Blocs project as HTML then go in and edit the CSS and add all the breakpoints I want in Adobe Brackets (or any text editor) but the whole point of what I LOVE about Blocs is that it SIMPLIFIES the coding process and - best case scenario - ELIMINATES the need to manually code ANYTHING. At least I hope that’s your end game with Blocs.

Because I routinely find that Blocs cannot - AS YET - do everything I need it to do natively, I am CONSTANTLY updating in Blocs, exporting as HTML, modifying the code in Adobe Brackets, then going through that whole process again and again and again as the website evolves. It’s a major headache. Oh what joy if Blocs were able to do everything natively. Some of my frequent issues are things like not having a photo with captions option (like I do with carousels), z-index (not accessible in Blocs), more/better modification of the header area (the main issue I have problems with is controlling the size/location of the header logo) and find it very time-consuming to modify the nav/sub-nav elements (position, size, etc).

All in all, I’m committed to Blocs and love many of it’s strengths. I see it getting stronger and stronger over time and appreciate all your hard work. I look very much forward to the next update(s)!!!

Warm Regards, Randy

1 Like

Any idea of when you will be adding this to 3.0? This is a must for some of us

Sorry what are you referring too?

The xl breakpoint. This is becoming an issue not having it Since 3.0 the layers sidebar doesnt’t allow to edit in a larger screensize. Can I disable the layers sidebar?

I agree that being able to design within Blocs in larger breakpoints (even custom breakpoints all the better!) would be a much needed addition to the toolset. What looks good at 1200px does NOT always (or even often) look good on large desktop monitors. I’ve designed plenty of websites in the past year and without exception, I’ve had to export my Blocs projects back and forth continually while building and edit them in Adobe Brackets where I can create and edit the css files and view my web page as it evolves. Perhaps I/we don’t understand the complexity of providing that functionality in Blocs. But if it’s possible, I can assure you, it is necessary and would be very well-received by Blocs users.

1 Like

Custom Breakpoints is a big task and one I think goes against the point in using a product like Bootstrap and Blocs. If that was added, it would be at a major mile stone.

There is no need to export and edit, just write your custom breakpoint code and add it to any of the many code input areas available in Blocs.

Are you aware that since Blocs 2 the default site width container by default is set to less than 1200px?

Blocs v2
43

Blocs v3
03

I’m interested to know how this is an issue since most sites created with Blocs do not expand beyond 1200px unless edge to edge is used. Once the browser goes beyond that size the main content will float in the center of the screen.

I’d also like to see some good examples of this XL breakpoint being used to provide a substantial improvement to the layout of sites on XL screens.

Hiding the layer tree has nothing to do with the XL breakpoint. BTW hiding both sidebars is something that is coming later in the year.

I wasn’t too bothered about the XL breakpoint initially, but I am starting to wonder now and glad it’s being discussed. A few months back I had a client telling me that a header image done on a draft website was cropped and in discussion it turned out he had the browser open full screen on a 27" display. At the time I said few people did this, but I could make the images wider.

Fast forward to more recently and I wanted greater working space, so I moved to a 32" display. Some of those earlier sites suddenly demonstrated problems both vertically and horizontally on the new display. Very simply, a larger display makes me more inclined to open the browser wider than with a smaller display. These days I think 27" is the standard for desktop and anything less is almost considered small. I wouldn’t be the least bit surprised if future iMacs are bigger.

If you are building websites there is also a decent chance you’ll be working with others in this area who have large displays and I’m finding full width header images particularly fiddly to manage. That may be partly owed to the new fluid image resizing.

Should we just just be setting a wider width in the project settings? I know this can be done at a percentage, rather than specific pixel width. I tried it once before using percentage, but it produced some odd results.

I understand, so whatever breakpoint that shows in my preview browser, doesn’t match what breakpoint I am building in. Does that make any sense? It’s hard to explain. Even choosing a large breakpoint to edit , it doesn’t reflect what I see in preview mode. Only When I shrink my preview screen size down it hits the breakpoint that I am building on and can see it correctly but with my browser at full width there is a breakpoint that I cannot edit

I think due to the size of your screen you are unable to see your design full width due to the apps user interface.

Did you try zooming out?

FYI - Didn’t they change the default in Bootstrap 4, from 1170 (BS3) to 1140 (BS4).

@teefers & @Creative here is your opportunity for discussion in a new thread …

1 Like

Oh yes they did :flushed:

1 Like

At 1140 its now cleanly divisible by 12. I’m surprised you didn’t spot that :thinking:

3 Likes

:joy::joy::joy::joy::joy::raised_hands:

touché

1 Like

This will be fixed up ( default max width ) in todays patch update.

4 Likes

I would like to add to the chorus for an XL (larger than 1200px) size/breakpoint.

I need to embed variously sized photo galleries (created with JuiceBox) where ideally the largest gallery (and slowest to load) would only be accessed by browsers larger than 1200px and medium and small sized versions of the same gallery would be enabled at the large & medium breakpoints and small & x-small breakpoints, respectively.

This would optimize page load speeds according the available real estate in the browser.

1 Like