CSS and HTML that resize the font size based on screen width

Question

is it possible to resize the font size based on the screen width, so that i always see the full text without having to scroll to the right, even on a mobile phone? I need to use this CSS on a visualforce page in salesforce. So i need the text to not wrap based on the screen, but always keep the same ratio.

<apex:page standardController="Account" showHeader="false" sidebar="false" standardStylesheets="false" >
<apex:slds />
<style>
    // css goes here
</style>
<apex:outputField value="{!Account.Field__c}"/>
</apex:page>

Could you try a bit of CSS3? From a quick search, I couldn't see anything saying it won't work. Or do you have to use IE to view the pages? — Andrew Morton, Feb 05 '22 at 14:01
Ah yes you are right, it can't be used only if it's renders as PDF, then i guess i can use css3. — Brian23Gt, Feb 05 '22 at 14:05
Ok i made it work, i will post the answer here so that it can be helpful. — Brian23Gt, Feb 05 '22 at 14:54

score 0 · Answer 1 · answered Feb 05 '22 at 14:56

This worked for me :

<apex:page standardController="Account" showHeader="false" sidebar="false" standardStylesheets="false" >

<apex:slds />
<style>
.parent {
width: 100%;
height: auto;
min-height: 100px;
font-size: 1.3vw;
display: inline;
}
</style>
<div class="parent">
<apex:outputField value="{!Account.Field__c}"/>
</div>
</apex:page>

CSS and HTML that resize the font size based on screen width

1 Answers1