But on smaller mobile view I want to stack the logo, company name and company type below each other and align them centered at the screen. This is the thing I am not able to accomplish. It looks like this:
I tried to use different group setups, now I have:
Group: Company Details
** Group: Company Logo, (Company name and Company type)
*** Group: Company name and Company type.
I have 2 separate groups. When screen width is larger than XXX resolution, show Group 1. When the screen width is smaller than XXX resolution, show Group 2. This helps me avoid the alignment headaches altogether.
I think that should be doable, but honestly, I often have to fiddle quite a bit to get the desired behavior. Bubble’s responsive functionality is, IMO, not particularly intuitive or simple to master. Something that has helped me, though, is designing the mobile layout first and then using the responsive editor to get it right on desktop. YMMV though.
I tried building from a mobile first design, and my conclusion is that for this specific scenario I do need duplicate groups. One fully stacked and centered, the other with logo and company name left aligned on the first line and company type below.
One advantage is that I do understand the behavior of the responsiveness engine a bit better now.
Just another question regarding responsiveness in addition to the things mentioned above.
Is was testing out building my UI from Mobile first perspective. It goes quite well, but something bugs me a bit.
I created a container group of 375px in width. In there I stacked a couple two child groups. The yellow group is setup to “wrap to previous line when stretched”. I tweaked the minimum width a bit and it works, but the first group (green with red group as a child) is a bit too wide for my taste. I would like to have it around 200px.
I thought to manage this to give it a maximum width around 70% but that’s not working. According to the docs this value should be more than 100% and that I don’t understand actually. Why can’t I set a width less than 100%. Goes this against the minimum width setting perhaps that must be less than 100%?
Below there is a screenshot of my responsive behavior when stretched. There a two layout examples. The layout above is mobile first. The layout below is desktop first, but looking more the way I want it. A smaller left group/“sidebar”.
So is it possible to make the first group smaller in width while working from a mobile first perspective? Because besides my issue I really like to build from this perspective.
The black group is the Mobile Container which is centered on de 1200px wide page. It is set to collapse margins when screensize <= 4100px (got that method from a youtube video).
Responsivess - Desktop (stretched)
Problem is the left margin of black mobile container, off which I can’t get rid off. This margin makes the red/green “sidebar” group being misaligned to the right.
But I want this layout only from Tablet size (portrait) and wider. On this screen size I want to have it the same way as mobile (portrait): stacked, centered and with the small left/right margins.
So I increased the minimum width. But that causes the following effect on mobile (portrait) mode.
Just checked some templates and other apps. My conclusion is that I just let the mobile (landscape) mode the way it is, with he groups next to each other.
Next step is a mobile and wise screen responsive menu.
