Responsive solution for long URLs (that exceed the device width)
As the title implies, while building responsive sites, I often run into an
issue with long(ish) URLs breaking my fluid grid and causing horizontal
scrolling on smaller devices. Because they're one long string, they don't
wrap and push the width of their container to wider than the device
width...
<--device-->
______________
| |
| http://longurlthatdoesntfit.com
| |
| |
Sometimes I make the container overflow:hidden but that just chops off the
end of the URL and it tends to lock glitchy. Another approach might be to
shrink the font-size on smaller devices, but in situations where the URL
lengths vary, it would mean shrinking it WAY down to ensure it always has
enough space.
There must be a better way.
No comments:
Post a Comment