Forum Documentation Showcase Pricing Learn more

Stretch to Max Width

I am trying to use the minimum width and maximum width settings to help with responsive design on groups. This is my first attempt and finding something a bit confusing.

My idea was to set the minimum width of a container group to be equal to the smallest mobile device viewport width (on apple products it is 360 px). Also, I want to set the maximum width percentage to be equal to 1024 px so that the container group would stretch to fill the page on larger devices no matter what the viewport width is.

In my mind this would enable me to create container groups that stretch and shrink from a “base” size equal to the smallest viewport.

What I attempted was the following:

  1. Set my container group to have a minimum and maximum width

  1. Set a group to width of 1024 to test visually the responsivness of the container group and it’s ability to stretch to the max width percentage set.

  1. Set the page width to be 1024

The problem is that when I test this I don’t see the container group stretching to it’s maximum width percentage. (375 px multipled by 272% would be 1020px) Visually it is clear because the blue of the container group is not as wide as the red of the group with set width of 1024.

Any help would be appreciated.

My goal is to minimize the need to hide and show different groups of various sizes according to current screen size width; this is especially important for the repeating groups because as each container group is shown and hidden based on current screen width all the data is reloaded and causes serious time lag issues.

Cheers

Should I perhaps be doing this in the opposite way?

Should it be that I set a container group width to the largest size and then set minimum width equal to the smallest viewport?

So, if I set container group to 1024 with a minimum width of 36.76% to get a minimum width of 375?

Would think so, yes. The group you call “container” has a width of 375px, that is, not 100% of your page width. When the page is stretched, elements (and margins) stretch proportionally. So, your group “container” will be something like 375*1.72 =645px at its max width. There is a tool to help out with such problems, “Explain box margins”

02

@jaos.pcl

Thanks for the reply. I am still a bit confused after spending a decent amount of time trying to figure this all out.

Is the best approach to design all elements to fit on a small screen (phone) and then set my conditionals to change the behavior when on a larger screen (tablet or computer)?

From what I have been seeing so far is that there is a lot more control over making things larger rather than making things smaller based on spacing between elements and margins. Also, seems like easier to set the max width percentage and do this for all elements and allow them to naturally expand or for case of text set a conditional to enlarge.

What have you found to be your general approach? Are you designing for larger or smaller screens first?

Cheers

When I first started with bubble it was easier to build for mobile and then responsive to larger screens. But now I work with the larger screens and make them responsive from there. It is easier to see everything on the larger screen size.

Just cut things into portions evenly to get started, like cut the page in half, in 3’s or 4’s. Maybe make the page width 990 so you can easily cut each part into a width of 330. Try something like that, use groups a lot to help things stay together and also as spacers. Line up everything exactly.

Just some ideas to help get you started.

Thanks for the tips. I think I’m going to need various strategies depending on the intended use of the app I’m building.

If it is intended for mobile I will build small first…on the other hand things like SaaS products, I will start large.

yes :slight_smile:

I’m always designing for larger screens first. I’ve found the other way around a bit more complicated, and as @J805 said, it’s easier to see everything on a larger screen size. Have you gone through the responsive tutorial? I think Coaching Bubble got a tutorial covering responsive design.

I typically have 2 designs on each page: one for mobile-to-tablet sized, one for various laptop-sized screens. It’s more work, but I find leads to a better user experience in the end.

2 Likes

Thanks for all the input guys. I have come across some pretty useful forum threads that shed light onto the topic in an interesting way.

First thing I found was a thread:

It had a post from @Lucien with a link to his editor (awesome examples)

https://bubble.io/page?type=page&name=full-height-sections&id=testingenvironment&tab=tabs-1

With this it seems possible to stretch the height of elements according to the view port height.

To find the actual value of the view port height I found through the above thread another thread with a great bit from @dambusmedia

Combining these I am able to dynamically change the height of elements to fit a larger view port height on page load using a conditional in the workflow on page load.

This is a strategy I will be using tomorrow (spent the last 12 hours searching, learning, testing, failing and then finally succeeding at some things) to be able to not only responsively design for the width but also the view port using the same elements on the page and not needing to have too many elements on page.

By the way I also believe that a portion from @Lucien that shows as “transform”,“translateY(100vh)” will enable us to change the x and y coordinates of an element dynamically.

And another thought is that it would be possible to design the page to be a proportional design based on view port height. So, if I design a square page of 600 x 600 and have a square element inside of 100 x 100. I could say when view port is 732 or 824 or 827 (three different view port heights for the same view port width on apple products) that the inner square element is a percentage of the view port height.

I think this might make it possible to set conditionals to adjust the same elements to any view port dimensions. If the idea works, then it would make a user experience in a mobile browser very similar to the user experience of an downloaded app.

Just cut things into portions evenly to get started, like cut the page in half, in 3’s or 4’s. Maybe make the page width 990 so you can easily cut each part into a width of 330. Try something like that, use groups a lot to help things stay together and also as spacers. Line up everything exactly.

A multiple of 12 would be best mathematically.