3 ms·
A basic start: bigger font size, drop the underscore (text-decoration: none), change the font color to black or dark gray. You can do a lighter color on hover t
by rococode 8y ago
A basic start: bigger font size, drop the underscore (text-decoration: none), change the font color to black or dark gray. You can do a lighter color on hover to make it clear it's a link.
Not perfect, but I think it's better than what's live right now. You can browse for a nicer font, too. Plenty of free choices at Google Fonts.
End result would be something like this: https://i.imgur.com/c7YJCN9.png https://i.imgur.com/c7YJCN9.png
Maybe align the text with the image as well, although vertical aligns are always a big pain to implement haha.
- dceddia 8y agoFlexbox makes vertical alignment a snap. It's even pretty well supported these days: https://caniuse.com/#search=flexbox https://caniuse.com/#search=flexbox In this case, all you need to do is add "display: flex; align-items: center" to your a tags. After that I'd probably get rid of the margin-bottom on them too. Finally, to visually center everything vertically, remove the margin-top on the img inside the a. A bonus of using display:flex is that it'll fix the wrapping problem where long links wrap underneath the image. With flex, the text will stay on the right, in its own "column".
- armatav 8y agoYou are a genius. I was super panicked and couldn't get the working memory going to actually fix the spacing. Thanks!