Responsive feature works differently in Chrome on different computers

Need help Responsiveness
1

My website when checking on Chrome & Firefox is fully responsive and when I change the dimensions using the responsive slider, it looks exactly how I want.

Preview of what it looks like for my desktop pc:

broserProbs.JPG1182×610 18.3 KB

However, weirdly enough, when running in Chrome on a 17 inch asus laptop, it looks like the image below (about & login messed up + other elements throughout the site are misaligned):

problem.png1916×818 53.6 KB

Even stranger, on Firefox it looks exactly how I want (how bubble’s responsive editor shows it) on the laptop. On mobile it looks exactly like I want as well. It’s literally just Chrome on the laptop that doesn’t display it like it’s showing in the bubble responsive editor. Not sure if this is on my end or bubble’s. Any help? Am I doing something wrong or did I most likely find a corner case?

p.s. both Chrome and Firefox are fully updated to the latest version.

2

This is where you need to change how the objects are positioned and spaced using hidden shapes that are set with minimum width 0.

It takes some getting used to, but once you get there it is easy to spot where and when to use them!

I had the same problems when first starting with the responsive engine…

1 Like
3

Is there a video tutorial on doing this? Where would I position the hidden shapes? Bubble is showcasing to me in the way that I want. It’s just in one browser where it’s off.

4

One way to try is to place the About and Login buttons in a group that is fixed-width (to prevent the Login button from going to the next line). Then to set that group to be fixed margin: right, so the left margin (the space between the logo and the two buttons) decreases. Are those the settings that you have in place now?

1 Like
5

Yep. That’s the current settings.

6

Are the buttons within the group, fixed-margin: left?

7

Nope fixed margin is to the right, here’s a video with the settings: http://sendvid.com/fmbn2zq5

This video showcases how it looks on my main computer, which is how I want it to look, on the laptop in Chrome is where that second image (original post) it’s messed up. Across all my other devices it looks exactly how I want it to. It’s strange.

8

Hmm, that is odd. Just previewed the app in debug mode and replicated your setup; for some reason it’s not happening in my test app (in chrome). I bet Dave’s solution works great; I haven’t used shapes for responsive purposes before. Is it okay if I view the app in the editor?

9

Yeah it’s fine, you can look at it: https://bubble.io/page?name=index&id=fartbox&tab=tabs-1

10

I removed the outer group (Group C) which was containing the fixed-width button group (Group X). I think this fixed it, but let me know if it does for you as well? Here is the change on a test page (I didn’t alter anything on your index page)

11

I’ll check it in the morning. It’s on my gf’s laptop where the problem is so I’ll have to skype with her to check. Thanks for the help!

12

Sounds good! No problem!

13

If you look at the stock bubble footer, it using this approach.

1 Like