It feels good to fix the theme I use for the blog, I give back to a tool I will use for some time hopefully :)
The problem was that when looking at blog post with full resolution on my laptop, it displayed nicely. But when viewing it with smartphone resolution, it looked like this:
After some duckduckgoing, I stumbled upon
box-sizing: border-box, an element I have not used before.I went to MDN to see what is was MDN page on box-sizing, then looked around if it could be that element tripping me up.
But according to that doc, because the CSS used
border-box instead of
content-box, my content should have behaved nicely and not overflowing.
After more time looking around, a StackOverflow response once again saved the day. When using
border-box on a container, you have to set the width on the inner child.
width: 100% on the inner child, and “voila”:
Project link: https://github.com/eddiewebb/hugo-resume/pull/36