Forum Academy Marketplace Showcase Pricing Features

Change group/text alignment for different screen sizes in Responsive viewer

@emmanuel, I want to center align elements when the screen is at the Portrait Mobile size (375px), but left or right align elements at the other larger sizes. It doesn’t look like it’s possible to specify different alignments at different screen sizes in the responsive viewer.

Elements right and left align at large size.

Now I would like to center align at the Portrait Mobile size, but if I change them, then it also changes all of the other sizes.

Isn’t this doing what you want?

1 Like

No, he wants:

  1. On desktop, the logo to be on the left with the buttons on the right.
  2. On mobile, the logo to be centered with the buttons centered below it.

Can Bubble do this?

When screen width > desktop width cutoff, show desktop logo.
When screen width <= desktop width cutoff, show mobile logo.

Thanks Scott, and what if you want a whole page to have left and right elements on desktop, which all become stacked and centered on mobile. Do we need a separate mobile page for that?

You don’t need a separate page, you can show/hide a different group that looks exactly the way you want it to, using the tactic Scott recommended

Okay, thank you. Are people preferring this over css media queries?

Under the hood, it probably is using queries of some sort. We don’t have access to write CSS directly, so this is the way it gets handled for now.

Okay, I’ll see what I can do with it. Thanks again.