Email Link Won't Shrink

Hi all,

I have an email link that will shrink down on smaller screen sizes until I view it at 320PX. At that point it won’t shrink enough and spills off the screen.

I’ve tried making all sorts of things flex as my best guess as to what’s going on, but nothing I do seems to have any influence on this behavior. If anyone has any suggestions I would appreciate it. Thanks for your time.


Here is my site Read-Only: *https://preview.webflow.com/preview/jason-browns-portfolio?utm_medium=preview_link&utm_source=designer&utm_content=jason-browns-portfolio&preview=e101b22df2ac4a3ab1bcf3bcd9491fdd&pageId=606fcbafe9bd7ab43fd56a1e&mode=preview
(how to share your site Read-Only link)

Hi, @Zero_Protagonist, welcome! The email link spills off the screen because at the font size you’re using, its width is wider than the viewport.

An email address doesn’t have any breaking points in it, so it’s unable to split up and move to another line. One option is to use a Button instead, which you can configure to link to create an email. A second option is to decrease the font size on this link (closer to 20px or so) which will make the text small enough to not spill over. A third option is to set the font size to something like 8vw, which will scale the font size with the width of the viewport.

If you haven’t already, check out the sizing article and video on Webflow University:

This was very helpful. Thank so much!