Responsive layout (beta)

Announcements
81

Is the horizontal floating relative to removed in responsive view?

82

I tried with Floating groups but the horizontal relative to in responsive seems to be missing

Normal Floating group

Responsive

1 Like
83

seems like there is still an issue with repeating groups in responsive mode (not only on native but also desktop version) even when making them fixed width they get distorted. Some other elements too don’t render correctly even with fixed width.

84

like @cakeheke with Responsive layout (beta)
Can’t go further without Floating Group - Horizontal Relative To LEFT / RIGHT

Typical use case for a header

  • make the logo strick to the top left
  • make the user picture stick to the top right
85

It’d be helpful to have a link there.

86

@josh, have you considered Flexbox? I noticed within the last few days, many apps are integrating it into their editors.

Webflow as of today( https://webflow.com/ )
Kube Framework ( https://imperavi.com/kube/ )

Here’s a nice article as well as resources ( http://designmodo.com/flexbox-snippets/ )

Cheers!

87

We just pushed a fix, which is a better behavior. Check it out!

88

Awesome, I’ll check it out soon and let you know what I think.

89

That is much better than before.
There is still a glitch.
Here is another screen-recording of what it looks like now.

1 Like
90

good catch, we’ll check

91

Take note - there’s two glitches.

  • One with the end buttons shifting sporadically.
  • One with the grouped buttons at the top, with which one button in the group resizes seperately from the other buttons. To me - buttons in a group should always be the same size as each other.
92

@emmanuel is there a reason why LINKS haven’t any responsive parameters available ? or just it’s a matter of days ?

93

Just made links responsive.

2 Likes
94

@cakeheke – thanks for testing:

-the flickering is definitely a glitch, will fix!

-the button getting larger when it breaks to a new line is by design… in general I think it’s better than when something breaks to a new line, it should expand to take up space, if it’s been getting compressed on the previous line. To avoid the buttons becoming different sizes, there are two things you could do:

  1. stop them from breaking independently. If you put them all in a group, and set a min-width on the group that’s as big as the min width of all the buttons next to each other, the buttons will move as a chunk… they’ll still get compressed, but all of them will break, or none of them will break.

  2. make them fixed width. this will let them break independently, but it’ll keep their sizes from changing.

2 Likes
95

@cakeheke just pushed a fix that should help with the flickering.

also, any windows users on this thread – are you able to reproduce the issues kfawcett mentioned above: Responsive layout (beta) ? I’ve been trying unsuccessfully for a few days to track it down… interested on what computers / browsers different people are seeing it on.

1 Like
96

Here’s what kfawcetts page looks like on my end…
Responsive test 3
I’m on Windows 7, using Firefox.

97

Here is another screen-recording after the latest fixes…
ScreenRecording
Notice how the Image at the bottom does not move in conjunction with the other elements around it.

Here is the developer page.

98

Oops, looks like the forum app got modified since I posted the link originally. Here’s a cleaned up version of that page: https://responsive.bubbleapps.io/version-test/responsive_sidebar

1 Like
99

Yup, that shouldn’t do that… am looking into it

100

When I shrink that forum app down to around 50%, the sidebar on the left disappears completely.