Design issue: Visual elements

Hi. I met a big problem with my design. Visual elements are not at the places they should be. I tried to figure out by myself with no success.
e.g: Input element is far right when it should just be on the right. Sometimes, only a part of the element are in present on my screen.

Please help :blush:

Thanks in advance

You’re going to have to give us way more information for us to actually help you (screenshots, workflows, conditions, etc.)

Seems like a responsive issue, but there’s no way to tell without actually seeing what’s going on.

This would be my guess.

This doesn’t make sense. You can only explain so much with words. Share screenshots. As @Nocodify mentioned we’ll need more information to help.

Here are the screens (backend and front end). As you can see, elements are not displayed as it should be.

Thanks for your help guyz :wink:

What I would do in this situation:

Place each form label and input field into their own group (ie: select Description text and the input field below → right click → Group elements in a Group). Then, make each of these groups (for all label+input pairs, + button group) the same width. In the top left of your editor screen, click on Responsive

9e51d7a34a19119dd2bedd99456ff10d

Click on each of your groups and set Fixed margin to left:

7cd7fd5e06c891326c26ddf0b6bd543f

I’d recommend toggling off Fixed width and instead set a min and max width depending on how you’d like them to display on the front-end.

Keep Wrap to previous line… toggled off if you want to force these groups to stack on top of each other.

1 Like

@philip Thank you :sunny: It seems to work. I hope, it will fix it definitely.

Hi @philip Help please. The problem still.

Can you help me to fix it please? I don’t know why the elements doesn’t appear as they should be.
Thanks.

I could not access the app editor. In Settings -> General -> Application rights -> change to “Everyone can view”

I should be able to test changes (that won’t be saved) in order to help debug.

Settings is done https://bubble.io/page?name=index&id=lulushop&tab=tabs-1

Where can I find a page with the inputs you shared above:

I changed the page and the inputs field. But as you can see here, the inputs fied and the button are not as they should be. They must be align

It could be an issue with your browser… somehow, I’m not sure. The page I previewed looks left aligned:

Weird! My browser is already updated. :frowning: I didn’t have that problem when I’ve started using Bubble.
By the way, do you know can I set my header to be on full width?

The thing you’re getting spun by is responsive settings. Note that visual elements have a width, but we can allow that to shrink and grow with page width. And defaults for these options when an element is created can be kooky. Look at this input:

This input is currently styled as 309 pixels wide (RED PEN), but this will only be true when the viewed page is viewed at the same width as your design in the editor (this is called the “original width”… because…

We are allowing the element to grow to as much as 150% of that value if the page is wider than the “original width” (BLUE PEN)… and further…

We are allowing the element to shrink in width to 97% of that value if the page is narrower than the “original width”.

OK, so this input can get a lot wider and a bit narrower depending on browser width.

Now, how does it align itself when viewed on the page? We see that in the responsive tab. Let’s go look. Here’s how it positions at the original width:

Messing with the page width in responsive, we can see how it responds:
responsive1

Play around with the options here and note what happens as you drag the page size wider and narrower. You can also use groups to contain visual elements and control how your page lays out. A complete discussion of this is impossible. Just work with it and you’ll start to get the hang of things.

(There are also many many posts here about achieving various layouts in responsive view. And often folks just say: “Give me access to your damn editor and I’ll fix it for you.” Because it’s just one of those things you go and do. It takes way too long to explain.

There’s also a video linked in the manual that is SORT OF helpful: https://manual.bubble.is/building-a-user-interface/building-responsive-pages.html)

2 Likes

BTW, if the responsive stuff is just a distraction to you right now, making your page fixed width will defeat any responsive settings. You’ll have to come to grips with that at some point though, so just learn it now and build your pages with that in mind.

(Despite various grumbles here in the forum and desires for a this or that odd feature that would help achieve a desired result more rapidly, there’s little that cannot be achieved using the existing features. I used to bemoan the lack of a built-in breakpoint system [though you can build your own using the page width condition], but it’s just better to design for fluid response from the outset anyway.)

1 Like

@keith Thaaaank you. I really appreciate it. Thanks again et thanks @philip