retypeapp / retype

Retype is an ✨ ultra-high-performance✨ static site generator that builds a website based on simple text files.
https://retype.com
Other
1.07k stars 204 forks source link

Big site title causes horizontal scolling to be effective on some mobile devices #63

Open axonasif opened 3 years ago

axonasif commented 3 years ago

Hi, this is a bug report. Basically I think retype should better scale the title-bar element for mobile devices. Please see the video below to better understand the issue: https://user-images.githubusercontent.com/39482679/124686799-8da9c780-def5-11eb-9a82-bdfbbcce748b.mp4 If you can't play the video then see on streamable: https://streamable.com/jd82sf

Also on checking from emulated mobile view on firefox, I find that devices with width below 386 causes raw links in the page to be overflowed from the main body. Here is an example below: image

Although it's fine over 386 width relative to the longest link: image

Thanks

geoffreymcgill commented 3 years ago

Thanks for the report. We will take a look, but this might have more to do with how the browser deals with super-wide content when it doesn't have an option to break the element and wrap. I looks like that one List_of_Intel_graphics_processing_units link is causing flow issues with the browser.

Would it be an option to format as a hyperlink component, such as [List of Intel graphics processing units](https://en.wikipedia.org/wiki/List_of_Intel_graphics_processing_units)?

Or, another option would be using a Reference link component:

[!ref List of Intel graphics processing units](https://en.wikipedia.org/wiki/List_of_Intel_graphics_processing_units)

We will try and reproduce, then look into some options on how to handle this scenario.

axonasif commented 3 years ago

Yeah I'm aware about these markdown codes. Just wanted to let you guys know as I encountered this issue.

Here is my site btw 😃 https://wiki.supreme-gamers.com/