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>
>Solution :
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>