search

ebelinski / apilevels

A microsite overview of all Android 🤖 versions and their corresponding API/SDK levels, version codes, codenames, and market shares.
https://apilevels.com
MIT License
225 stars 26 forks source link

Screen size for mobile #23

Closed ravener closed 2 years ago

ravener commented 2 years ago

On mobile browsers the table extends beyond the page boundaries and ruins the viewport width.

Screenshot_20220608_211435_mark via gp

In the screenshot I did zoom out, the page starts zoomed in initially.

Would be better if the table scrolled horizontally on mobile displays.

ebelinski commented 2 years ago

Hi @ravener, thank you for pointing out this issue. I have updated the table to scroll horizontally on smaller screens. Please let me know if this fixes the problem or if anything else needs to be changed.

ravener commented 2 years ago

@ebelinski Thanks! It's much better now, however all the tables on the page scroll at the same time now, like including the "definitions" and "code files" sections. Thing is those two tables are already sized to fit the screen so it scrolls to a blank area.

ravener commented 2 years ago

Screenshot_20220611_194006_mark via gp

Here's anther screenshot to demonstrate, this is after applying some scroll, notice the second table is also scrolling towards a blank area, meanwhile without any scroll the last two tables fits my screen and does not require scrolling.

Looking at the code it seems like you just wrapped everything in one div, how about applying the responsive class into each <table> seperately?

ebelinski commented 2 years ago

@ravener Oops haha, yeah I closed the div at the wrong table. I updated it now, I wrapped each table with table-responsive separately, which should mean that the smaller two tables won't scroll at all for mobile, unless more columns get added in the future.

ravener commented 2 years ago

@ebelinski Thanks! It looks perfect now. Closing this now.