Greetings, all! Still getting acquainted with Bubble’s responsive engine and cannot figure out why buttons set to align right won’t align right when an element is hidden on page load.
Editor:
Any suggestions on how to fix this? I thought right-aligned objects would fill in the empty space automatically, but I guess not.
I’m also learning but I think it’s because you have your text container set to align right and not your text itself.
Expand your text container so that it touches whatever you want it aligned too. Such as the edge of the page or a button.
Then for your text itself make sure it’s right aligned.
That should make it where the container expands and contracts with the right margins and the text inside aligns to the right side of the container.
Hope that helps
Also you should click on “explain box margins” so you can see a visual representation of how your content will move.
Thanks for the reply, @AustinAllen. Those are actually all buttons but with different styles. I used the Explain Margins, but it shows the margins as still being defined by the hidden button element. I want the Home and Blog buttons to shift right and fill in the gap when the “Sign Out” button isn’t visible.
Have you tried adding a hiding rule for the sign out button? So it disappears when the page reaches a certain width.
Here’s a great video by Gregory on responsiveness in bubble. Skip to 1:08:17. I think it’s relevant to your question.
After watching that whole video I don’t think I’ve ran into many responsive issues in bubble. Highly recommend you watch it all once you get time.
@AustinAllen, thanks for the suggestion. Unfortunately, the hide condition has to be log-in status as opposed to screen width, so it shouldn’t even take up space if the user isn’t logged in.
I was under the impression this would be accomplished if it was hidden by default and would only display if a user is logged in, but I haven’t gotten that to work.
Add a ‘signup’ button and have it overlap the ‘signout’ button and make the ‘signup’ button visible when the user is not logged in.
Not only will it ‘fix’ the issue in terms of look, but it will also add an important call to action for any application.
