Responsive behavior

Hello

If I arrange several elements (brics) such as images or texts in several columns, it looks very nice on the desktop. In the mobile view, however, everything is small and compressed. Is there an attitude here that applies to this? I have now copied the one bloc and only used it for desktop and then manually adapted the copied one for mobile. It must be somehow possible that with smaller displays the elements are automatically instead of next to each other or not?

Thank you for your feedback

Id say learn how to us classes. Its alot eadier to adjst a few classes at each breakpoint than it is to manually change everything.
They’re such a powerful part of Blocs.

Okay yes, so arrange everything via CSS classes. So your own CSS, right? That wouldn’t be a problem, I thought there was another possibility. I haven’t dealt with CSS in Blocs yet, CSS itself is not a problem I just don’t have the experience with Blocs yet.

1 Like

Classes are easy and great for size, style, transitions etc

Good luck on it!

1 Like

Once you get your head around the settings, it all becomes second nature in the class manager.
I’m not a coder, and I know I don’t make full use of the classes, but small steps gives huge results in the long term.
Bast of luck.

1 Like

Also check out this post on column controls, as you may find these are enough to reflow your content how you would like it.

The column settings and a few custom interactions a generally enough to get the layouts you require across all breakpoints. :smiley:

3 Likes

I don’t really understand this with the column control. Is there any further information here? I didn’t really find a video. Does anyone possibly have a screenshot on which I can orient myself. It sounds very interesting and I would like to look at how I have to proceed.

The classes and individual CSS is clear but the possibility of controlling columns sounds exciting.

Thank you

Hi @Grischabock

I was going to type, but @Norm has done all you need to know on the link he has posted above.

Good luck.

1 Like

Hello

As mentioned, I have seen the link and also used it. I don’t understand it exactly and I can’t find the right attitude for it. That was the reason why I asked for a screenshot for the appropriate setting.

I’m concerned that I have 4 pictures in a row next to each other on the desktop and want to have them on the mobile devices but with each other.

Via Custom CSS it is easily possible but I am interested in blocks and the possibilities why I ask for it.

That really does sound like it’s down to your column settings.
There’s not really much more anyone else can offer here apart from play with them and it you’ll eventually get there without seeing how you have constructed the offending item.

Hi @Grischabock

It’s explained in great detail showing on that link above, but let’s try to help here.

What do you mean by the above?

So what do you want to see - 4 images on desktop in a row….then 2 on next break point with 2 below….then mobile : single images?

Can you show some images of what you are seeing or a link to it live etc?
Or even send me the project in a DM.

Exactly what I want to achieve. Currently I have created a mobile view (duplicated) so it will be difficult to see what I have done. I think I can change these tonight at the earliest. The link would be https://geyer.swiss

Thanks so much

Hi @Grischabock

I have done 2 examples here - nice and easy. One breaks into 2 on next break point, the other keeps it as 4 but drops to 2 on next.

Just remember columns total 12
4 in a row = 3+3+3+3 = 12
3 in a row = 4+4+4 = 12
2 in a row = 6+6 = 12
1 in a row = 12 = 12

Use this and see what I have done and apply it to yours.

example.bloc (59.9 KB)

2 Likes

Hello

Sorry for the late response, I was a bit busy and couldn’t take care of it. Thank you very much for the example and the explanation, so it makes sense to me and I know how it is implemented. I will test and implement this for myself. Thank you