2020-12-27
Taming preformatted text in the CSS grid
I found out the mobile version of my homepage was a lot wider than the desktop version (which tries to fit on the screen). This didn't show when I learned about the CSS grid for Camp Wireless. The difference is that my homepage regularly uses log samples which are displayed as preformatted text. I used the grid width 1fr which allows for the full width of <pre> items. Changing this to 100% fixed it. The desktop version uses two columns and those are already split using percentages of the full screen width.