Rendering issue on mobile

I’ve discovered an oddity that I’m having difficulty solving, where what is rendered on the production mobile site for a record page is different than what I’ve specified (and is previewed) in the app.

I have several elements (section > column) all configured to “fill width”, and the interface renders it as such:

10%20PM

But in the actual version, two different variants appear:

1. Incorrect, text is bunched up and doesn’t fill width as specified by section and column

2. Better, but still not fully correct as some text still doesn’t fill width

I changed the section layout to each variation but no difference was made.

In these two examples, both records are using the exact same record page - yet have rendered very differently.

Thoughts on what’s up here? Honestly I can’t think of any other settings I could change, so I’ve run out of ideas.

Hey @Andrew I’m gonna check this out this afternoon & see if I can shed some light on what’s going on. We’re also looking at some big changes to make laying out content more intuitive, though that’s a bit of a longer-term project. In the meantime I’ll figure out what’s happening on this page and try to write up a definitive guide to layout.

OK so I believe what is happening here is probably a misunderstanding about the “fill width” setting. I think maybe it should be renamed to “fill available width” or something like that.

Basically if you have 3 columns next to each other, and they all contain text and they are all set to “fill [available] width”, what you end up with is the row split evenly among 3 columns.

However on mobile devices there is less horizontal space available, so you may get some columns wrapping (as rendering side-by-side might cause long words in different columns to overlap). See below, these are 3 columns but there isn’t space to render them side-by-side. And in fact, since the 3rd column doesn’t really need much space at all, more space is alotted to the 2nd column because the words are bigger.

If you want a column to really fill the entire width, the best way to do this is set the width to 12 (as the rows are divided into 12 equal segments, so giving a column all 12 will make it full width).

For what it’s worth, we intended “Fill [available] width” to be mixed with “Fit Content” or other (1-12) width settings.

1 Like

Makes total sense, thanks very much @Steve :+1:

You’re totally right that I was interpreting “fill width” to essentially act the same as setting the columns to 12, only doing the split for me. Previously I had most commonly used the 12 setting for when I had uneven column widths, or wanted to force more columns to fit in the same spot.

1 Like

@Steve - I’ve found another page setup occurrence on mobile that has stumped me currently.

On mobile, it’s possible to scroll side to side in the browser, beyond the width of the content. As seen here:

For context, the way I took this was scrolled to the left with my finger while simultaneously taking a screenshot to demonstrate the black space to the right.

I’ve set the page section to be full content full background, and the max width in styles is 3000px - both of which I thought would have covered this. I’m using an iphone XS, so not a particularly odd screen size or anything.

In short, I would like it to not be possible to scroll side to side, only up and down with the content.

Thoughts on what’s up here?

First of all, can I just say that’s an adorable login page?!!! :laughing:

Anyway, to the matter at hand. Just to clarify: when you let go, the screen kind of snaps back to the content, right?

I visited the hotbed login page on my phone and couldn’t get it to scroll to the side like this. The only way I could scroll to the side is if I zoomed in on the page a bit first (like with a reverse-pinch motion). Then I could pull the page over like this. But on initial load I could not. If I zoomed in at all, even just an imperceptible amount, then I could reproduce. And trying this on other sites (facebook, reddit) exhibits similar behavior.

In general, behavior on mobile is such that as long as content does not overflow to the left or right, the page will not be scrollable horizontally. However if you have something that is overflowing to the side, then the page will be scrollable horizontally so the user can see the content. So when someone zooms in, it makes the content overflow to the right and the left, so you need to be able to scroll right and left (to see the content).

It used to be possible to disable zooming on mobile devices but for various reasons this is no longer recommended and has been disabled by Apple and will likely be disabled on Android devices as well soon. (As an aside, I saw a post once from a visually impaired person who said sites that on sites that disabled zooming, they had to take a screenshot of the page and then zoom in on the screenshot to be able to read the text! :flushed:)

If you want to ensure that overflowing content is cut off on mobile and therefore not horizontally scrollable (again, if a user zooms in they’ll still be able to scroll), I bet we could cook up some custom CSS to do that. This usually involves overflow: hidden on parent elements.

1 Like

I was going for adorable shock value so happy to hear that it landed as expected :rofl:

And wow is that poor user design for them to have to take a screenshot to zoom. I assume that was either a case of not thinking about that use case, or simply not being as high of a priority as making the design look pretty?

For the login page, I swear this is like one of those instances where you tell a mechanic there’s a noise in your car, just for it to not appear when they look at it.

I was having the issue yesterday with the login page but am not today. Maybe I tweaked something inadvertently.

Where I did find the issue today was in a record page. When I click into the record page, it defaulted to being in a state that let me scroll left or right. But when I zoomed out slightly, it appeared at least to go back to the state where it wasn’t possible to go left or right.

I’ll email you a video of this occurring separately since I can’t post it here.

CSS to ensure no overflow would be fantastic. I’ve double checked my settings and haven’t noticed anything overt that would cause this oddity.

1 Like