Forum Academy Marketplace Showcase Pricing Features

Cannot scroll or view my full page's contents when in responsive or preview mode

This is a shoot in the dark, but I’m trying to view the entire contents of a page in “responsive” or “preview” modes; however, I do not see any horizontal scroll bar (at the bottom of my browser window) and when I maximize the browser window, the problem isn’t solved.

At the risk of this being the most noob-est question, is anybody else having the same issue? Or is it just my own laptop’s resolution settings that needs changing? Or my browser settings?

Note: I do have a vertical scroll bar, just no horizontal. Below is a screenshot:

Thanks!

Jp

Not sure what the problem is. You’d want the responsive viewer to be wider? The way I personally do it on my MacBook 13 is by dragging the browser window a little bit on the left, hiding some part of it, and then make the browser wider…

There won’t be a scroll bar since the page is responsive (that’s he whole point of responsiveness).

But maybe I didn’t get your question…

@emmanuel, yes okay now that does make sense: “there wouldn’t be a scroll bar because it’s responsive…”

Is there a way of making the page elements (while in edit mode) fix themselves to the width and/or height of whatever device or window the app is displayed in? As opposed to making the elements a certain width based on the original when in responsive mode?

The reason why I’m asking is because I’m certain that my Acer laptop isn’t exactly a “normal” screen as the resolution is set to 1366x768 and it’s more a widescreen.

While we’re on the subject of the responsive viewer, can I not make the side bar disappear (talking about the side bar with "design, workflow, data, styles, plugins, settings, & logs buttons)?

Thanks!

Jp

I actually don’t get what you mean here, sorry.

The bar is only 60px wide, so I’m not sure that buys much, and that makes the UX more painful to switch…

I’m asking about Bubble’s version of something like this:

Example
Get the total width of your screen:

var x = "Total Width: " + screen.width;
The result of x will be:

Total Width: 1366
Try it Yourself »

Link to page: Return the client’s screen size

So while the page is loading, the script would check the client/user’s available screen size, the width and height, in pixels. Once the available screen size is returned, the rest of the elements would adjust their element sizing accordingly.

Well that’s how responsive works… That’s how we do it.

Well if that’s the case, then why does the view of the app page (and the alignment of all elements within) look perfectly fine on my laptop’s browser screen but when viewing the same app page on my smartphone (which obviously has different screen sizes), some of the elements are out of place, scrunched up, or overlapping? For clarification, when viewing an app page in responsive mode, with the smartphone selected, is this solely based on iOS or iPhone’s? Because my smartphone is a HTC One android…

Have you watched the tutorial video? It seems that you didn’t configure your page properly, that’s why you’re seeing this.

Okay I’ll watch it again…and see if something’s missing. Thanks so much!!

Best way to get help here is to try something, and then open the app and have other users come and see what you did and help you fix it.

@emmanuel 10-4! I watched the tutorial and from what I can tell, I’m thinking my margins are what I need to fix. I’m gonna tweak things around and see what I can do. (Note: I’m deaf, so I have no idea what any of the videos’ narratives say. LOL!)

@emmanuel I have not been able to find this:

Horizontally floating relatively to
Pick in this field whether the element floats relatively to the right, left of the screen, or doesn’t float horizontally. This option is less common than the vertical reference, but if useful if you want an element to be on the screen no matter how wide the page is

Yeah sorry we have some of the videos with the script available, but not that one :frowning:

The best to help here would for you to share a link to your app in the editor, after making sure the app is modifiable by others (check settings). Then others can help you in situation.