Main area stretched in mobile portrait mode

Hi everyone.

I have a web app where the index area is set to the present page width ‘Mobile’. This works great in PC browsers and mobile browsers in portrait mode. Take a look:

http://www.activateenglish.com

On PC browsers the index area is fixed width and the blank space is filled with background colour. This is the way I want it to be.

The problem is when the web app is rotated on a mobile device. It stretches the main index area to fit the width of the device. This means that on mobile devices in landscape mode the visual elements are impractically enlarged, and the app scrolls vertically which I don’t want it to do.

Please, can anyone give me some advice? I hope I’m not missing an obvious solution, but I can’t figure it out.

Is the app using responsive or not? If it does, this should go away.

I thought the same but I’ve never had the responsive box ticked, it still isn’t.

That’s the expected behavior then.

OK great, that looks much better in responsive mode, thanks for the help!

However, it’s stretched my icon containers and has made the lines in my repeating groups disappear after a few. Is there a way to set fixed widths to visual elements?

Ah never mind, just found the responsive viewer. I’ll have a play and see if I can fix it. Thanks again, Bubble really is an awesome service!

1 Like

Let us know how the experience is with the responsive settings and viewer. We’re still polishing the experience so the timing would be perfect :slight_smile:

Ok, it’s looking really good so far and I’m doing a lot of tweaking, but I’m finding it hard to get some group containers centred relative to the index page. In the builder they’re definitely centred, then in the responsive viewer when I apply a max width % they’re more right-aligned.

Are you sure they’re truly centered? F the page gets wide, one pixel will lead to a bigger difference. Use the right click menu to center them.

Yep, I’m definitely using the centre function in the right click menu. But when in responsive viewer, one is misaligned to the left, another misaligned to the right.

I’ll check the exact pixel width of the group and see if it’s uneven relative to the parent. I’ll let you know (tomorrow).

Don’t hesitate to share a link here, it’ll be helpful to help

Oh wow, you were so right Emmanuel. For example, my index width is 340px, and I had a group that was 310px width. It was offset slightly to the right, until I changed it to 320px, then it was perfectly centred. I guess the responsive engine needs a nice even number of pixels to divide and multiply between the container edges and the index limit.

I’ll let you know if there’s anything else! Thanks again, Richard.

1 Like