The bottom image is how it looks in the editor, which is how I want it. The top is how it looks in preview. I feel like I have tried everything, even grouping things. Please help!
It looks like the preview mode has a screen width that is smaller than the width of the page in the editor.
Responsiveness is tricky…takes trial and error to get things right
Sometimes need to group the elements, change the width of that group to expand the page, or possibly set a collapse width in the responsive editor, sometimes need to add spacer groups etc…there are a lot of possible issues.
If you want quick help you should open your editor at least for people to view to maybe diagnose the issue.
Ok. How do I open my editor?
In the editor go to settings tab on left side, then general tab at top of settings and then at top of general see the drop down on far right for Application Rights and change from Private App to Everybody can view…then share the link to your editor
https://bubble.io/page?type=page&name=pricing&id=scrimmage-scheduler&tab=tabs-1 Let me know if this works!
When I preview it looks fine to me
So what is your goal? To have them remain this way as the page width minimizes?
Hmmm. Thanks for testing! My screen width is 1280px, that might be screwing it up.
You should select each of the three groups and group them together into a group. Make that group fixed width and ensure in responsive settings it has a centered alignment.
To make it so that the three elements remain the same size until they would be forced to change positions, make the group you place them into fixed width. Go further and add about 20px to each side of that group and make the left margin 20px and right margin 20px so as the page resizes the main group stays the same and there is a 20px margin on both sides of the main group.
Then you can make a second group where all 3 black groups are vertically aligned and show it when the first group is not to be shown.
Woohoo! Thanks for all your help man, this worked! 