Responsiveness approach: start wide or small

Need help Responsiveness
1

Hi looking over some threads I tried different approaches to manage responsiveness of for example the groups next to each other

I tried a) starting small (320px) wide and use “wrap to previous line when stretched”. And I tried to start b) wide (1200px) to make it responsive on small screens.

For me both approaches has it problems. Method a) causes the left group gets too big on large screens. Method b) causes the left group to be to narrow on small screens.

Both approaches don’t have exactly the wanted behavior on smaller screens like 667px/768px.

I am now thinking to devide each page in separate group containers for each breakpoint I want to support, but that implies duplicate work on each page.

What is your approach and do you have some examples to look at?

Thanks

2

You need to start at 1200px. You can definitely make it look good. Can you show me an example of a page where it doesn’t work properly? You can share editor link and I will show you how to do it.

1 Like
5

Abusive user has been permabanned.

6

Agreed with @nocodeventure of a start point of 1200px. You’ll really need to utilize groups (using things like min. Width and max. Width as well as collapse etc.) to achieve the responsiveness you’d like to see, as you’ll have more control of where elements stick on the page.

1 Like
7

I agree with starting out wide and using groups. The hard mental hurdle to get over is that you will need to use groups whose sole purpose is for responsiveness. Probably, it will seem like you are using an excessive amount of groups, but really they will be necessary.

1 Like
8

Thanks. Wide as starting point it will be. I don’t mind using extra groups. But I rather don’t want to duplicate dynamic elements like repeating groups or regular groups with data objects binded to it. Or is that exactly what I do need to do?

For example: a profile page on 1200px has a group (width: 250px) with user object binded to it.

On mobile I want to have this group to be full screen width (320px). Should I create separate group for this and also bind it to the user object? Then show/hide each group conditionally based on current screen width?

9

You can collapse the width of smaller groups on certain page sizes. That option is available in the responsiveness editor.

10

Collapse width or collapse margins? The latter does not always work for me until now. I will try this out once more.

11

Yes, collapse margins should work. It won’t work if it’s inside a group that has a fixed width or max width. So, be sure to collapse the main group.

1 Like