search

ericwbailey / a11y-webring.club

🌐 A webring for digital accessibility practitioners.
https://a11y-webring.club/
MIT License
35 stars 86 forks source link

Style improvement suggestion: Member name line height and gap #185

Closed helenclx closed 3 months ago

helenclx commented 3 months ago

Your issue

I noticed that when the webring website is viewed on a mobile device, particularly on a vertical screen, member names with more than one line look cramped to the extent that the text appears to be overlapping, making the names difficult to read. For example:

Screen Shot 2024-06-01 at 14 33 27

I forked the repo and looked into the CSS, and realised that it was because the line height of the member name (.c-member > .view-as-list &) was set to only 1, so my suggestion would be increasing the line-height of the member names. For instance, this is what it would look like if the line height is increased to 1.5:

Screen Shot 2024-06-01 at 14 33 46

Another styling improvement suggestion I have for improving the member list style on mobile is adding a gap between member name and member social, since the lack of gap makes some member names and socials look cramped together, like this:

Screen Shot 2024-06-01 at 14 37 29

This is what it would look like if gap: 0.5rem is added to the .c-member > `.view-as-list & selector:

Screen Shot 2024-06-01 at 14 40 06

I can create a PR with my suggestions if wanted.

Code of conduct

ericwbailey commented 3 months ago

Hi there! Thanks for reporting this, as well as your patience with me getting to it, and also your offer to fix it.

It's been on my list to tweak for awhile now, along with some other things. I just addressed it in https://github.com/ericwbailey/a11y-webring.club/pull/190, so I'll be closing this issue as addressed. I appreciate the detail in your issue report, as well 🙂

helenclx commented 2 months ago

No problem. Thank you for your response and improvement to the website layout. 👍