scaling text within list elements

Question

I need our community help. I created a side menu which should scale for certain display/screen sizes. In general the width and height scaling works like expected. I do not get the text scaling done. I tried the svg text option from this stackoverflow thread Font scaling based on width of container. It either simply does not work with list elements or I did a mistake during the implementation attempt.

I appreciate any hints.

 body {
        overflow: hidden;
        font-family: -apple-system, BlinkMacSystemFont, sans-serif;
        
    }

    .menu {
        position: absolute;
        top: 0;
        left: 0;
        height: 100vh;
        width: 40vw;
        background: black;
    }

    .menu-header {
        display: inline-block;
        position: relative;
        color: white;
        font-size: 26px;
        font-family: -apple-system, BlinkMacSystemFont, sans-serif;
        font-weight: bold;
        margin-top: 5vh;
        margin-left: 20px;
    }
    
    .menu-container {
        position: relative;
        margin: 20px;
        height: 20vh;
        width: calc(100% - 40px);
        background: rgb(50,50,50);
        border-radius: 5px;
    }

    .menu-container {
        position: relative;
        margin: 20px;
        height: 20vh;
        width: calc(100% - 40px);
        background: rgb(50,50,50);
        border-radius: 5px;
    }

    .menu-left {
        position: relative;
        float: left;
        width: 70%;
    }

    .menu-left ul {
        position: absolute;
        top: 0;
        left: 0;
        padding: 0;
        margin: 0;
        height: fit-content;
        margin: 0 20px 0 20px;
    }

   
    .menu-right {
        position: relative;
        width: 30%;
        float: right;
        padding: 0;
        margin-right: 20px;
        height: fit-content;
    }

    .menu-state {
        position: relative;
        background: greenyellow;
        width: 14vh;
        height: 14vh;
        float: right;
        border-radius: 100%;
        margin-top:3vh;
        margin-left: 1vw;
    }

    ul {
        position: absolute;
        top: 0;
        left: 0;
        padding: 0;
        margin: 0;
        height: fit-content;
        background: rgb(50,50,50);
        border-radius: 5px;
        padding-left: 20px;
    }

    li {
        list-style: none;
        height: 10vh;
        line-height: 10vh;
        color: white;
        transition: transform 0.3s;
    }

    li:hover {
        transform: scale(1.1);
    }

    i {
        padding: 0 5px 0 5px;
    }

 <!-- fontawesome stylesheet https://fontawesome.com/ -->
    <script src="https://kit.fontawesome.com/98a5e27706.js" crossorigin="anonymous"></script>
    
  <div class="menu">
        <label class="menu-header">#Setting</label>
        <div class="menu-container">
            <div class="menu-left">
                <ul>
                    <li><i class="fa-solid fa-user"></i>Responsible</li>
                    <li><i class="fa-solid fa-users"></i>Department</li>
                </ul>
            </div>
            <div class="menu-right">
                <div class="menu-state"></div>
            </div>
        </div>

        <div class="menu-container">
            <ul>
                <li><span><i class="fa-solid fa-pen-to-square"></i></span>Name</li>
                <li><span><i class="fa-solid fa-palette"></i></span>Color</li>
            </ul>
        </div>
    </div>

Answer 1

If you're trying to manipulate the font size based on viewer width, then you'll have to set a font-size attribute on your li which you currently do not have. This is a simple fix but I would suggest looking into this article on fluid typography for something a little more elegant: https://css-tricks.com/simplified-fluid-typography/

body {
        overflow: hidden;
        font-family: -apple-system, BlinkMacSystemFont, sans-serif;
        
    }

    .menu {
        position: absolute;
        top: 0;
        left: 0;
        height: 100vh;
        width: 40vw;
        background: black;
    }

    .menu-header {
        display: inline-block;
        position: relative;
        color: white;
        font-size: 26px;
        font-family: -apple-system, BlinkMacSystemFont, sans-serif;
        font-weight: bold;
        margin-top: 5vh;
        margin-left: 20px;
    }
    
    .menu-container {
        position: relative;
        margin: 20px;
        height: 20vh;
        width: calc(100% - 40px);
        background: rgb(50,50,50);
        border-radius: 5px;
    }

    .menu-container {
        position: relative;
        margin: 20px;
        height: 20vh;
        width: calc(100% - 40px);
        background: rgb(50,50,50);
        border-radius: 5px;
    }

    .menu-left {
        position: relative;
        float: left;
        width: 70%;
    }

    .menu-left ul {
        position: absolute;
        top: 0;
        left: 0;
        padding: 0;
        margin: 0;
        height: fit-content;
        margin: 0 20px 0 20px;
    }

   
    .menu-right {
        position: relative;
        width: 30%;
        float: right;
        padding: 0;
        margin-right: 20px;
        height: fit-content;
    }

    .menu-state {
        position: relative;
        background: greenyellow;
        width: 14vh;
        height: 14vh;
        float: right;
        border-radius: 100%;
        margin-top:3vh;
        margin-left: 1vw;
    }

    ul {
        position: absolute;
        top: 0;
        left: 0;
        padding: 0;
        margin: 0;
        height: fit-content;
        background: rgb(50,50,50);
        border-radius: 5px;
        padding-left: 20px;
    }

    li {
        list-style: none;
        height: 10vh;
        line-height: 10vh;
        color: white;
        transition: transform 0.3s;
        font-size: 2vw; /* <---- this here */
    }

    li:hover {
        transform: scale(1.1);
    }

    i {
        padding: 0 5px 0 5px;
    }

<!-- fontawesome stylesheet https://fontawesome.com/ -->
    <script src="https://kit.fontawesome.com/98a5e27706.js" crossorigin="anonymous"></script>
    
  <div class="menu">
        <label class="menu-header">#Setting</label>
        <div class="menu-container">
            <div class="menu-left">
                <ul>
                    <li><i class="fa-solid fa-user"></i>Responsible</li>
                    <li><i class="fa-solid fa-users"></i>Department</li>
                </ul>
            </div>
            <div class="menu-right">
                <div class="menu-state"></div>
            </div>
        </div>

        <div class="menu-container">
            <ul>
                <li><span><i class="fa-solid fa-pen-to-square"></i></span>Name</li>
                <li><span><i class="fa-solid fa-palette"></i></span>Color</li>
            </ul>
        </div>
    </div>