When resizing the window, the banner image shrinks while the header and header items remain the same size. However, there is an issue when the header takes up around 30% of the screen in phone view. Here is the CSS code I am using:
.headerdiv{
width: 100%;
height: 100% ;
display: flex;
flex-direction: column;
background-color: rgb(3, 3, 3);
justify-content: center;
}
return (
<div className={styles.headerdiv}>
<div className={styles.logo} >
<img src={logo} alt=""/>
</div>
<div>
<ul>
<li>
<Link className={styles.link} to="/">Home</Link>
</li>
<li>
<Link className={styles.link} to="/blog">Blog</Link>
</li>
<li>
<Link className={styles.link} to="/about">About</Link>
</li>
<li>
<Link className={styles.link} to="/FAQ">FAQ</Link>
</li>
</ul>
</div>
</div>
);