79400871

Date: 2025-01-30 18:25:43
Score: 0.5
Natty:
Report link

In terms of text size, use clamps. First, you need to know the width of your site. On a page (in Elementor) click the hamburger menu at the top left of the widgets panel - Site Settings - Layout. At the top you'll see Content Width. For this example, let's say it's 1300px

Next, on your page, select the text in Desktop size screen (normal) and set the px size of your text. For this example, let's say 25px

Then, go to Mobile layout, and set the size of text you want there. For this example, let's say 16px

So you now have these three values:1300px width, 25px maximum font size, 16px minimum font size.

Then use this calculator: https://clamp.font-size.app/

In Minimum Viewort, put in 360, Maximum Viewport = 1300 Minimum Font Size = 16, Maximum Font Size = 25

You'll now get the following calculation: font-size: clamp(1rem, 0.7846rem + 0.9574vw, 1.5625rem);

Delete the first part so you get: clamp(1rem, 0.7846rem + 0.9574vw, 1.5625rem);

In your Text editor, on Desktop, change the size value from px to the Pencil icon and paste the above clamp calculation in. Go to Mobile view, in the text editor, change the size value from px to the Pencil icon and delete any size shown there (16) and the clamp calculation will automatically appear.

(Whatever size you set in Desktop, it will trickle down through all screen sizes - laptop, tablet, mobile).

Your text is now fully responsive according to screen size.

Reasons:
  • Long answer (-1):
  • No code block (0.5):
  • Low reputation (1):
Posted by: Rip Gill