Responsive login

Need help Responsiveness
1

Hi,

I am trying to build a login screen based on the attached example.

pinterest
pinterest1070×720 76.7 KB

I am struggling what approach to take to make it responsiveness and keep the same look & feel. For example put a small blue section (which is originally on the left), on the top.

What is the best approach in this?

  • try to make it responsive using the the responsiveness engine
  • make a desktop and a mobile form group in one page, which shown/hidden based on screensize?
  • duplicate it to a mobile page.

If anyone has a example made earlier to have a look at that would be great.

1 Like
2

You need to create a main group and 2 inner groups. Same size. Both minimum width 99% and the main group would have a minimum width of 20 - 30% max.

Now you can create a sub group containing the log in input fields and sign in button. Group them together and set them to fixed width or 99%, whatever looks better.

A great idea would be to hide the left part on mobile screens and add those social signup buttons to the right section.

2 Likes
3

You can also add a hidden group above the Get Started text on the left side to collapse it on mobile view to prevent the big gap from top to bottom.

1 Like
4

Thank you both. I will try to combine both approaches.

One question about the graphics though.

Can I use overlapping groups with svg background images?

Or should I divide the background in separate areas that can be positioned in groups edge to edge.

Or use edge to edge groups with overlapping images (svgs) in it?

Thanks again

5

Here a nother example of a login form I try to build in Bubble

rippple
rippple1065×763 78.2 KB

I came close: I am having 3 records in my database and I use a repeating group to show to image backgrounds and text content on the right section.To cycle through the images I used a Chevron left/right icon and to show next/previous item.

image
image1464×846 98.2 KB

But Instead of a next/prev button, I would like to get closer to the design. So I want have a number of small buttons/ single bar icons that equals the records in my database which are also centered in this right section. Clicking on each should show the contents of the corresponding record. How should I do this?

  • I would also like to have a sliding/scrolling effect. I tried a horizontal scroll layout. But that does show a scrollbar which I don’t want and makes it scrollable without using the buttons. I only want interaction using the buttons.

Is this possible without for example an image slider plugin?