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);
}