Text wrap oddity on homepage

[timrobertson100]

iPhone SE from ~2019

[peterdesmet]

Will investigate, it looks fine on my iPhone Xr:

[ben-norton]

Try the Responsive Views in Google Chrome developer tools. Ctrl+Shift+J Then click the little icon that looks like a phone in the top right.

Line breaks can be very hard to fix. I'm not super familiar with jekyll, but something like the following would fix it in css @media screen and (max-width: 420px) { (Insert selector) { font-size: (insert smaller size or ~90%) } } 380px will take care of iPhone SE.

(Forgive me if I'm suggesting something most already know)

[gkampmeier]

@ben-norton, Peter may already know this, but it is a valuable tidbit for me--thanks! Is this something that one does on a site-wide level that wouldn't need to be worried about for individual pages?

[peterdesmet]

@gkampmeier yes, it is something you define in your css (for all pages). I have defined it in the petridish theme (used by the tdwg-jekyll website) right here:

https://github.com/peterdesmet/petridish/blob/17846cd938be65bcd7212f48dd09b1df4272a236/_sass/_header.scss#L50-L58

As you can see, the font size is reduced on small screens on all pages, but I made an exception for the homepage, as that is where you typically want a title that captures the attention. 😄 Unfortunately a bit too much here.

[peterdesmet]

@timrobertson100 can verify https://dev.tdwg.org on your phone to see if it is resolved? The font has been made smaller.

[peterdesmet]

Reported fixed.