I don't understand the use of breakpoints

How To
1

Hello beautiful people! :wave:

I am coming from Oxygen and I don’t understand the breakpoints in Bricks, I hope someone can help me.

On Oxygen I have one for “Full screen” another for “Page container”, “less than 992”, “less than 768” and finally “less than 480” (meaning that I have four breakpoints).

On Bricks I am missing one, the “Page container one” (in this case the container is set to 1366px) so I only have three breakpoints. This means that from Desktop to 991 I can’t do any adaptation, so the webpage I am building breaks on Tablet landscape, and I don’t have any way to fix it.

How do I adapt the site to the container width 1366px?

I have read the article about Responsive edit on Bricks builder academy.

  1. Breakpoints on Oxygen
    image

  2. Breakpoints on Bricks
    image

  3. Tablet portrait with broken layout I can’t fix

    image
    image1559×1087 65 KB

Love!

2

Responsive Editing – Bricks Academy (bricksbuilder.io)

3

I already read that article. It doesn’t make me understand how it works yet. I guess the only possibility to make it work similarly to Oxygen is to add a custom breakpoint.

4

Yup, just add another breakpoint for the one you’re missing.

5

How could I do that without loosing what I have? I am trying to create a higher breakpoint, and when doing that, all the css disappears.

image
image1920×959 46.7 KB

6

I did it! Crazy! :rofl: I was using the wrong approach.

image
image1920×959 67.9 KB

7

Wasn’t 100% sure what you were asking but I think this should answer it:

3 Likes
8

Exactly what I was doing while you were recording the video!! :rofl::rofl::rofl: Thank you for that, for taking your time to explain it to me step by step. And yes, I was doing the mistake of leaving the old one in the middle, and of course, everything was breaking, because then in Desktop you have no styling at all :rofl:

It would be good to have “breakpoints presets”, and you can have the one called Oxygen :smiling_face_with_three_hearts: that middle container width breakpoint is super helpful to target smaller laptops zoomed 150% and also tabled Landscape.

2 Likes
9

If I wanted to use a “Mobil First” approach and have the tool bar break point icons reflect that, what are the steps to re-configure the break points to work that way?