Bloc width setting per breakpoint?

General Discussion
1

Can you set the right sidebar ‘appearance’ width control for a bloc to be different on different device sizes?

I’m looking to use margin and centering in the larger breakpoints, but on the smallest breakpoint have the same elements be full screen with no margin.

Thanks!

2

Yes (if I have understood your question correctly) you can do this by creating some classes and defining the margin, padding etc per breakpoint and making use of columns.

Worth reading…

https://help.blocsapp.com/knowledge-base/custom-classes-basics/

https://help.blocsapp.com/knowledge-base/column-control/

1 Like
3

Thanks. My question was wondering if you can do this directly using the sidebar, and not make a custom class, so that blocs is doing the work for you. I do understand column controls, and classes basics…but I appreciate the effort of pointing towards the User Doc.

4

Oh right. You can use the default Bootstrap classes in the side bar, it may not be exactly what you are after, but will give you control over your design at breakpoints.

Bootstrap uses {property}{sides}-{breakpoint}-{size}

So you could put the following in the class box

pt-md-2

Which would be padding-top on MD breakpoint with a size of 2 (Bootstrap has a range of default sizes from 0 - 5

Putting the following 3 classes in the class box…

p-sm-0 p-md-2 p-lg-4

Would give you no padding at the smallest breakpoint and unto 4 at the large.

5

Got it. The answer is the same…use custom classes…yep! That’s how blocs was made. :slight_smile:

1 Like
6

pretty much, there are a ton of bootstrap classes already, its work getting to know them, saves duplicating a lot of stuff. I use the PY and MY class a lot for example for consistent horizontal spacing.