Communities

Writing
Writing
Codidact Meta
Codidact Meta
The Great Outdoors
The Great Outdoors
Photography & Video
Photography & Video
Scientific Speculation
Scientific Speculation
Cooking
Cooking
Electrical Engineering
Electrical Engineering
Judaism
Judaism
Languages & Linguistics
Languages & Linguistics
Software Development
Software Development
Mathematics
Mathematics
Christianity
Christianity
Code Golf
Code Golf
Music
Music
Physics
Physics
Linux Systems
Linux Systems
Power Users
Power Users
Tabletop RPGs
Tabletop RPGs
Community Proposals
Community Proposals
tag:snake search within a tag
answers:0 unanswered questions
user:xxxx search by author id
score:0.5 posts with 0.5+ score
"snake oil" exact phrase
votes:4 posts with 4+ votes
created:<1w created < 1 week ago
post_type:xxxx type of post
Search help
Notifications
Mark all as read See all your notifications »
Q&A

Welcome to Codidact Meta!

Codidact Meta is the meta-discussion site for the Codidact community network and the Codidact software. Whether you have bug reports or feature requests, support questions or rule discussions that touch the whole network – this is the site for you.

Code block exceeds the screen height on mobile

+1
−0

I like the new taller code blocks when working in the desktop site, but they can be problematic on mobile.

On mobile, even in portrait orientation (screen height is larger than screen width), a code block of 40 lines or more can exceed the screen height. This makes it possible to accidentally let scrolling stop with the code block extending off both the top and bottom of the screen. Now scrolling on the touchscreen of the phone results in scrolling through the code, rather than scrolling past the code block to see the text beyond it.

This can be worked around by scrolling the narrow regions to either side of the code block, but they are thinner than a fingertip so challenging to scroll with.

An example of a long code block you wouldn’t want to be stuck scrolling through when simply browsing the question (try looking at it on mobile to see the problem).

This is what it looks like on Firefox on Android:

Code block with top and bottom off the screen

I'm not sure whether the best solution is to reduce code block height in the mobile interface, or to make it easier to scroll the page rather than the code block when the code block exceeds to screen height.

History
Why does this post require moderator attention?
You might want to add some details to your flag.
Why should this post be closed?

1 comment thread

What's the best way to do this on phones? (1 comment)

0 answers

Sign up to answer this question »