1

I am trying to set the size of the text to be responsive to the window width.

I am using this script

    flexFont = function () {
    var divs = document.getElementsByClassName("flexFont");
    for(var i = 0; i < divs.length; i++) {
        var relFontsize = divs[i].offsetWidth*0.05;
        divs[i].style.fontSize = relFontsize+'px';
    }
    for(var y = 0; y < divs.length; y++) {
        var relLineHeight = divs[y].offsetWidth*0.1;
        divs[y].style.lineHeight = relLineHeight+'px';
    }
};

window.onload = function(event) {
    flexFont();
};
window.onresize = function(event) {
    flexFont();
};
  .text-content-title{
    font-family: Roboto, Arial, Helvetica, sans-serif;
    font-size: 1.8em;
    padding-bottom:20px;
  }
  
  .text-content{
    font-family: Roboto, Arial, Helvetica, sans-serif;
    font-size: 1em; 
    font-weight: 400;
    line-height: 1.6em;
    padding:5px 0;
    color: #000;
/*     width:70vw; */
    padding: 20px 0;
  }

.text-container{
  width:35vw;
}
<div class="text-container">
        <h2 class="text-content-title flexFont flexLineHeight">Language Skills</h2>
        <p class="text-content flexFont flexLineHeight" id="myDIV">I have always been fascinated by different cultures, habits, mindsets, and the interaction and diversity of people with different backgrounds.
I firmly believe the best way to learn about another culture is to start to learn their language.

I am also convinced if you get in contact with people in the language they know the best that not only shows your interest but will make the communication smooth and comfortable.
        </p>
      </div>

This is the HTML part

My issue is that this overwrites my CSS settings and instead of making the size dynamic, sets a different size that is very different from how I would like it to be. My question is: Should I make a different variable for each size or there is something that I am missing?

istvan weisz
  • 55
  • 5
  • I'm not sure what exactly you want to achieve, but... do you really need to use javascript? You can do math with CSS! For example `font-size: calc(2.8vw);` in `.text-content-title` and `font-size: calc(1vw + 1vh);` in `.text-content` should do the work. You can adjust it better than in javascript. More natural. (But as I said – I'm not sure what exactly you want to achieve) – Sylogista Feb 14 '23 at 14:24
  • I was trying that but I would like to try to make work like in this script I am trying to use this script https://codepen.io/aknip/pen/GpGevp because I find this more effective on screen size. I am very new to this so that is why I am probably wrong. – istvan weisz Feb 14 '23 at 14:31
  • Dont use javascript if it can be done with CSS. It will improve your page performance as well. Use CSS `media-query` for different screen sizes and use unit such as `vw`/`vh` for responsive font sizes. – Joshua Ooi Feb 14 '23 at 14:34
  • What are you trying to achieve by also changing the `line-height` in JS as it is already a value (`1.6em`) relative to the current element `font-size`? As the font size changes, so will the line height (`1.6 x current font-size`). Multiplying `current container offset width x 0.1` seems odd in this instance, especially as `line-height` is a *height* dependent value. – Rene van der Lende Feb 14 '23 at 15:55

0 Answers0