top of page
Responsive Text Function

Makes the specified text component use responsive "vw" units.

1vw = 1% of viewport width.

function makeResponsive(elementId,textTheme,fontSize,fontColor,lineHeight,charSpacing,width) {

let style = "font-size:"+fontSize+"vw;color:"+fontColor+";line-height:"+lineHeight+";letter-spacing:"+charSpacing+"vw;width:"+width+"vw";

$w(elementId).html = "<"+textTheme+" style="+style+">"+$w(elementId).text+"</"+textTheme+">";

}

Function Parameters

elementId - The text component's ID. (string) for example: "#text1"

textTheme - The text theme (from the templates theme) you want the text to use. (string) for example: "h3"

fontSize - The number of vw units for the text size. (number) for example: 4

Optional parameters:

fontColor - Text color in hex or rgba. (string) for example: "#ffffff"

lineHeight - Line height amount. (number) for example: 1.2

charSpacing - Character spacing amount. (number) for example: 0.3

width - The number of vw units for the width of the text component. (number) for example: 50

Examples

Basic responsive text using only text theme and font size:

$w.onReady(function () {

    makeResponsive("#text2","h4",5);

});

 

// Responsive Text Function - Do Not Edit

function makeResponsive(elementId,textTheme,fontSize,fontColor,lineHeight,charSpacing,width) {

let style = "font-size:"+fontSize+"vw;color:"+fontColor+";line-height:"+lineHeight+";letter-spacing:"+charSpacing+"vw;width:"+width+"vw";

$w(elementId).html = "<"+textTheme+" style="+style+">"+$w(elementId).text+"</"+textTheme+">";

}

Responsive text using all parameters but character spacing:

$w.onReady(function () {

    makeResponsive("#text2","h4",5,"#000000",1.2, null, 40);

});

 

// Responsive Text Function - Do Not Edit

function makeResponsive(elementId,textTheme,fontSize,fontColor,lineHeight,charSpacing,width) {

let style = "font-size:"+fontSize+"vw;color:"+fontColor+";line-height:"+lineHeight+";letter-spacing:"+charSpacing+"vw;width:"+width+"vw";

$w(elementId).html = "<"+textTheme+" style="+style+">"+$w(elementId).text+"</"+textTheme+">";

}

Responsive text using all parameters:

$w.onReady(function () {

    makeResponsive("#text2","h4",5,"#000000",1.2, 0.3, 40);

});

 

// Responsive Text Function - Do Not Edit

function makeResponsive(elementId,textTheme,fontSize,fontColor,lineHeight,charSpacing,width) {

let style = "font-size:"+fontSize+"vw;color:"+fontColor+";line-height:"+lineHeight+";letter-spacing:"+charSpacing+"vw;width:"+width+"vw";

$w(elementId).html = "<"+textTheme+" style="+style+">"+$w(elementId).text+"</"+textTheme+">";

}

Running the function on desktop only

To run this function only on desktop, add the wix-window module at the top of your page's code:

import wixWindow from 'wix-window';

Add this if statement when running the function:

if (wixWindow.formFactor === "Desktop") {

makeResponsive("#text2","h4",5,"#000000",1.2, 0.3, 40);

}

bottom of page