Have you ever set up a design like this in the editor where you want the #2 content to show on the right in Desktop view but then have it show on top in Mobile view?
The normal behavior you’ll get from Bubble (as shown below) is typically what you need. But how can you change this behavior when you really need to reverse the element positions on the small screen?
One way to change this behavior is to add another element with the content of group 2 and use conditionals to hide/show the correct group based on screen size. But then you have to maintain two identical elements which can be a pain
Fortunately, it can be easier than that! Here’s how
Step 1 - Make sure the #1 and #2 groups are grouped together and nested inside a single parent group.
Step 2 - Add a unique ID to the ID Attribute property in the parent group’s property editor.
Step 3 - Add the following code to the page HTML header. Make sure the ID is the same as the ID of your parent group!
Great tip! Do you have any idea how to do this with 3 items - specially the problem is that the 3 items must transition from being on the same row to being in a single column at the same instant.
Bubble’s native behaviour appears to be that the last element will move to the next row, then as the screen is resized, the 2nd element will move to the next row, pushing the last element to the 3rd row.
And when collapsing the page it looks like this. The collapse is as expected since the groups left and right have min width set to 300px each and the page is 599px in the screen shot below (the moment the break lines).
I was expecting that utilizing the code wouldn’t force them to break lines immediately and would just reverse their position when the lines break. That was the experience I had with the code you shared for the original responsive engine.
What seems to be happening because of the min-width of 100% setting on the elementcontainer div it is stretching to fit the entire viewport width. Also seems like the new responsive engine is reversing the position immediately.
To fix for this I put a conditional onto my HTML to only use the code after the page width has passed the ‘line-break’ point.
Previously this was not needed. Do you think it is an issue with the new responsive engine that causes it to reverse immediately?
This is actually correct behavior. Setting the the flex-direction (i.e. column-reverse) will impact the elements regardless of the screen width. In this particular case, it is the same as converting the group layout to ‘column’ at the wider width (which is why the elements are stacking) and reversing them (why the positions are reversed).
When writing CSS you would use media queries to specify which CSS should be used at different screen sizes. We can apply that to this code like this:
<style>
@media only screen and (max-width: 800px) {
#elementContainer {
flex-direction: column-reverse;
}
#elementContainer > div {
min-width: 100%!important;
}
}
</style>
The max-width is telling the browser to only use the styling from this CSS code when the page width is < 800px.
Your conditional is a visual alternative to the @media query that would be used in a stylesheet. It all looks good!
Initially I couldn’t get this to work with the new responsive engine or after upgrading. However, through a process of trial and error I managed to find a solution that worked. But if anyone can shed light on why there is a discrepancy between the responsive editor and rendered page I would love to hear your thoughts.
On another forum Matt Neary provided a little insight. He said:
The reason it doesn’t fold upwards in Bubble’s native responsive viewer is that the custom CSS styling which creates the reverse behaviour is only injected into your page when it loads. Bubble’s native viewer doesn’t pick up on this code. The custom CSS essentially overrides the CSS that Bubble generates, but only when your page loads in the browser.
This does not seem to be working for me. I’ve tried all solutions on this thread, including using HTML element vs. in header, conditionally setting the HTML or the ID Attribute based on width, etc.
Is this still functioning for anyone on the newest version of responsive? Or does anyone have a currently working solution?
