Input Data field and Button positions are not responsive

Dear Bubblemates,

I’m trying to create a Book recommendation site. I created this using few input data fields and buttons. However, the entered data positions are being altered when we open the app in a phone mode, this making it look non-professional site. Below is the screenshot for reference. The same behaviour is noticed while viewing the site on internet explorer full screen. Not sure if this is a bug. Any help here is really appreciated.

Did you design your app to be responsive?
If you just pick and drop elements they’re not going to be responsive.
You should use groups and the responsive setting to specify how you want your ui to behave when screen size changes.
If you haven’t already done so view the video lessons on responsive.

Happy bubbling :smiley:

@seanhoots I designed the app to be responsive. The video helped to reach where I got now. However, still couple things are not looking perfect as I highlighted above. Is it something that you can help? Thanks.

you’re app is set to private so no one is able to view to offer help. make it public so members can take a look and see how they can assist

Can you try the following app link one more time and see if its opening. I see the app status as Public.

just tried and i can’t still access it

Understanding from the picture…

I would suggest to make paddings on the text elements and if there are two elements in the same row don’t over lap and put it inside a group… The responsive reviewer in the UI will help you a lot.

It’s acting a little weird Sean. It is showing it to me as public, unsure why its not opeing for you.

For whatever reason, sometimes pasting editor links corrupts the url parameters, so you need to copy the link address, paste, and manually remove.

It will do the below which will then redirect and make it seem like a private app… if you remove the “amp;” then you’ll be good to go.

bubble.is/page?name=index& amp; id=stashmade& amp; tab=tabs-1

2 Likes

Ain’t that true @romanmg Gaby!

Well played!

Have a great weekend!

Thank you @romanmg for pointing me to the issue.

@seanhoots @veshoe23 the link was breaking when we copy pasted the app URL. As @romanmg suggested, fixed the app link. I was still not able to figure the fix the lack of responsiveness on few elements, could you please try to access the app link one more time and see if you could help.

hey @rams419,
i was able to access it now.
realized you didnt have a lot of responsive settings going on. most of your elements were just laid out there without any groupings.
You need to put things into groups for example field names and values. and you may want to make some of the labels fixed width so they don’t break onto next line.
e.g. book author and the associated book author name should be in a group and you can make the book author fixed width.
always test how things will look in the responsive settings. i’m kind of busy now but i’m sure some of the group members might help fix some of the issues for you.
simple way to group things since you already have your elements laid out is to select multiple elements and right click and choose “Group elements in Group”.

1 Like

@rams419 ua located in india ryt… buzz me 8742972915 anytime.

Well for now I can advice you to go through the video tutorials on the dashboard couple of times. alignment, positioning, padding are the fundamentals… fixed - stretched are the parameters so just play with it. Making a sketch before laying the elements will be very helpful and easy.

Best Regards

Hi

Send the editor’s url here… and please mention the page.

Best Regards

Hi @veshoe23 @seanhoots @romanmg. I really appreciate all your inputs, they were helpful especially the grouping elements solved most of the responsive issues.

There is only one BuyButton element which I’m not able to fix yet. I tried to select the BuyHardCover and AudioBook Buttons on my app in the Responsive viewer to make the necessary property changes but it is only selecting the Parent Repeating group. Thus I was not able to view the button properties and unable to fix it.

I like to seek your help in figuring this out. Below is the link to the public app:

“bubble.is/page?name=index&id=stashmade&tab=tabs-1”

Hi @veshoe23. Below is the public URL to the app. The page is Index.

“bubble.is/page?name=index&id=stashmade&tab=tabs-1”

hey you there

yes, I’m here @veshoe23

there are lot of things to be done

i just made few change in the Founder section… did u see it… the button and alignment of the header