I am currently working on adjusting the size of navigation text depending on the size of the screen using media queries. The text is appearing as 30px on smaller screens, but even on larger screens it remains at 30px. Here is the code snippet:
HTML:
<div class="nav">
<a class="logo" style="cursor: pointer">LIT</a>
<div class="sidebar" id="active">
<a style="cursor: pointer;" id="projectLink">samples </a>
<a style="cursor: pointer;" id="aboutLink">services </a>
<a style="cursor: pointer;" id="blogLink">tweets </a>
<a style="cursor: pointer;" id="contactLink" class="mail" onclick="openForm()">contact</a>
</div>
SCSS:
.sidebar{
z-index: 1;
font-weight: bolder;
margin-left: auto;
margin-right: 0px;
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: center;
font-family: 'Raleway', sans-serif;
color: black;
/* If the screen width is 601px or more, change the font-size of <div> to 80px */
@media screen and (min-width: 601px) {
.sidebar {
font-size: 80px;
}
}
/* If the screen width is 600px or less, adjust afont-size of <div> to 30px */
@media screen and (max-width: 600px) {
.sidebar {
font-size: 30px;
}
}