Responsive text minimum size

Question

0.00/5 (No votes)

See more:

I am working on building my website on Squarespace. I have my coding set up for some text with the "vw" (variable width) for my font.
It shows up on my computer with no problem, but when I view on mobile, the text becomes really small.

any suggestions?

What I have tried:

I have searched a few places online and have come up unlucky. Here is my code below.

<span style="font-size:1vw; letter-spacing:2px; line-height:1">APPARENTLY THIS PAGE TOOK THE DAY OFF TO GO BUY A HOME AND IS PROBABLY OUT LOOKING AT THE MOMENT... THATS OUR BAD...YOU CAN BE OUT LOOKING TO! JUST FOLLOW THE LINK BELOW! OR CLICK THE "GO BACK HOME BUTTON"</span>

Edit fiddle - JSFiddle[^]

Posted 16-Sep-19 12:25pm

Slarsen817

Updated 17-Sep-19 6:51am

Richard Deeming

v2

Add a Solution

Comments

Richard Deeming 17-Sep-19 12:44pm

I've removed the link from your question, since it could possibly be considered "spam". I've added a link to JSFiddle example of your code instead.

1 solution

Add a Solution

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Richard Deeming · Answer 1 · 2019-09-17T06:52:00

Two possible solutions from this StackOverflow thread[^]:

1) Use calc:

CSS

font-size: calc(10px + 1vw);

Edit fiddle - JSFiddle[^]

2) Use media queries:

CSS

.responsive-text {
    font-size: 10px;
    letter-spacing: 2px;
    line-height: 1;
}

@media (min-width:1000px) {
    .responsive-text {
        font-size: 1vw;
    }
}

Edit fiddle - JSFiddle[^]

Responsive text minimum size

1 solution

Solution 1

Add your solution here

Preview 0

Responsive text minimum size

1 solution

Solution 1

Add your solution here

Preview 0

Existing Members

...or Join us