Unstacking icons?

I’ve been redesigning my landing page. So far so good, until this. As designing in mobile, I have stacked icons beneath each other, along with the brief text.

I’ve been screwing around with responsive settings. The desired outcome is to get the groups to line up next to each other.

See pictures:

Excuse the drawing, using a mouse lol.

^Desired

I struggle a lot with responsive design and getting things to look exactly how I would like them to “naturally” with using only one version.

Something that I have started to do just to get through the process and have the outcome I’d like is to create different versions.

So in your case I’d have a group created with the icons next to each other as you desire and then add conditionals on the group element to make it visible or not depending on the current page width.

For me personally, this is the only way I can get it to work without banging my head on my desk.

This I suspect may cause my page load speed to increase as there are more elements on the page, but they aren’t all set to visible on page load, so I think it may not since those elements not visible on page load may not cause a slower page load.

1 Like

Cheers mate,

I’ll give it a shot.

How do you do that? I always have problems with getting an element ( like a group with width 360px ) that I create on a page ( width 1200px ) to expand when the page is 1200px…this is because the page I create everything on is 1200px…

do you create your pages in the beginning with a mobile width and allow all elements including the page to expand out?

In the past I’ve read through some discussions on responsive best practices between build large and respond to decreases in width and build small and respond to increases in width; it seemed like there wasn’t one answer ( as with most things ) and it came down to personal preference.

I’ve been building large and responding to decreases and still struggle.

This is not impossible to do it both way.
If you go from mobile to desktop, you need to use min/max width and wrap to previous line.
If you go from desktop to mobile, you need to play with min width and max width and in some case, collapse margins when container width. All of this can be found on responsive tab.

Example here from mobile to desktop (didn’t use group, but you could to avoid too much space between element on desktop)

You can also go over 100% for max-width. In some case, this is what you need to do. (example, if a group is 300 px, and you need to use full width on mobile screen, you may choose to put width over 100% or remove the max width. This all depend of the behavior you expect.
Example of this setting: https://bubble.io/page?type=page&name=test3&id=sandboxjc&tab=tabs-1
In this example, I don’t use max-width and choose to keep proportions (not available on all element). So on some screen (tablet) one shape will be very big, taking all the width, while the two other can stay on the same line and respect the min width set to 99%.

2 Likes

Could you help using an example with my elements as I’m still struggling? :slight_smile:

I suggest you to first place all your “box/icon” group into a group. This group will be min width 99 (uncheck max width except if you want it not to strech too much, in this case you can juse like 300%). This will avoid your first box to wrap with the previous line (group B with red button). If you select wrap to previous line on all box/icon and you should be good.

Hi, I’ve done as you said. The wrapping issue is now fixed. But still having a problem with the third box.

The issue I think is that all your box doesn’t have the same height. Be sure to set them to the same height and readjust position

1 Like

Thank you so much! :slight_smile:

I had to group all boxes to one bigger box.
Set all min width of this bigger group to 99px, without min width.
Each box has center align, 99px min width and 100% max width, wrap to previous line if stretched is ticked.

I was using an index width of 375px.

Thanks to @Jici for solving this issue with me!

2 Likes

Thanks for sharing that. I’m going to take a closer look at this and it might become the way I build for responsive design.

1 Like