Troubleshoot and fix text that appears too small across different breakpoints

Troubleshoot and fix text that appears too big or small across different breakpoints.

In this tutorial, you’ll learn how to troubleshoot and fix text that appears too big or small across different breakpoints. Discover how the scale proportionally setting can impact your designs and the importance of setting a min/max font per text element.

Transcript

Does your text get too small when you resize your page? Check out how to fix that!

Let's take a look at the first section of our site. It looks fantastic now, but as the screen gets smaller, so does our text. Let's edit it to make sure it stays looks right, no matter the desktop screen size.

Select the text and on the inspector window find the font-size setting. Look at this min-max feature, it’s just a lifesaver. Open it and set the minimum size to 16px.

Quick tip: thanks to the cascading rule, when setting a minimum size font on desktop it will already prevent the font on smaller breakpoints like tablet or mobile from getting too small. So we don’t have to make changes on other breakpoints! Just remember, this only works from big screens to small ones, not the other way around.

Now, let's see how this change affects our site. Fantastic! The text looks just right across all screen sizes.

For more fixes and tutorials, head over to Wix Studio Academy or drop your questions below. See you next time!