Koichi Hori

Home About

   日本語

css <pre> and <code> for mobile devices

(Diary of an Old AI Researcher who is still Programming)

14 July 2019

I have received a message from Google Search Console saying
`your site is affected by 3 new issues of type Mobile Usability'.


I have found the main issue is
`Content is wider than the screen'.

This issue has occurred because I used <pre> and <code> in my html files to show my codes.
Some lines in the codes were too long for a mobile device window.

I have searched in the internet using the key phrase `html for mobile device pre code', and have found the following page.
`having trouble with <pre><code> on mobile - Stack Overflow'

As shown in the above page, adding pre{white-space:pre-wrap; word-wrap:break-word; overflow:auto;} in the css worked for me, too.


CC0
To the extent possible under law, the person who associated CC0 with this work has waived all copyright and related or neighboring rights to this work.




Related entries (automatically calculated):
Using unicode characters in Windows command line
Aligning Facebook button and Twitter button
Showing the favicon in Google search results
Redirecting URL in Ruby on Rails
Login window freezes when making VNC connection from Windows to Mac
Unicode decode error "'utf-8' codec can't decode byte 0xfa in position 0: invalid start byte" when using MeCab
Using Python on Windows
On This Day: Atomic Bomb Dropped on Nagasaki
UNESCO: `Do you know AI or AI knows you better? Thinking Ethics of AI'
UAV/UGV Autonomous Cooperation
Toward AI-embedded Society where AI is Not Recognized as AI
AI support for Ethical AI Design
AI ELSI Award
The University of Tokyo Academic Archives Portal - UTokyo Digital Collections
What an old AI researcher thinks after watching the movie "Green Book" - about Racism, Discrimination, and AI (Artificial Intelligence)
AI (Artificial Intelligence) and Philosophy
Culture as the base of our country: Prof. Inose
Difference between Science and Engineering
Koichi Hori Top page
Mechanical engineers and electrical engineers have different mental models of oscillation
Civilization, Culture, Science, and Technology
Koichi Hori
What is Artificial Intelligence?