Simple question about responsive design for iPad

Hey guys, I’m having a problem figuring out what field to change to make my app look good on an iPad.

Here’s what it looks like on the desktop

Seems like it should be simple to move it to an iPad. there isn’t a lot going on. Here’s what it looks like.

For some reason, the content seems to be moving to the right in the mobile version and I’m not sure why.

Here’s what I’ve tried.

  1. Moving the content to the left on the page.
  2. Making the content “fixed width”
  3. Changing the width of the content.
  4. Changing the “minimum width %”

None of these seem to help. The next button is also always pushed down.

Any ideas of what else I can change?

Can you share a link to your editor? There are a lot of ways that this could be happening, so it’s a bit tough to tell without seeing how it’s done.

Sure. How do I share a link to my editor?

When you’re in the bubble editor for your app, simply copy and paste the URL from the browser. The app needs to be set to “public” or “everyone can view,” though. That can be done in the Settings tab.

@potentialthings Thanks.

This work? https://bubble.io/page?type=page&name=call_source&id=callbosstest&tab=tabs-1

Yeah, I’m thoroughly confused on the logic of what changes what for mobile optimization.

Are there any resources I can read about this?

There’s a really good video in the documentation about how to design for responsive. In short, it has everything to do with how you group your elements and how you set their constraints.

Looking at your site, I think watching the video will help you get a picture of how to structure it. There are some areas where changing how things are grouped will make a big difference, and changing fixed width vs max width behaviors, too.

1 Like

Thanks. I’ll check it out.