FlexBox container not responsive - css

Question

I'm having trouble making my layout responsive
basically I only have one header and when I'm at lower resolutions the screen is completely buggy
the background which is 100vh and 100vw does not work
image:
in desktop resolution:
code:
function App() {
return (
<div className="Wrapper">
<div className="Header">
<div className="navtop Container">
<div className="LogoHeader">
<a>
<img className="img" src={Logo} />
</a>
</div>
<div className="SearchWrapper">
<form className="form">
<input className="input" />
</form>
</div>
<nav className="NavWrapper">a</nav>
</div>
</div>
</div>
);
}
css:
html,
body {
margin: 0;
padding: 0;
border: 0;
height: 100vh;
}
#root {
height: 100vh !important;
margin: 0 !important;
padding: 0 !important;
}
.Wrapper{
height: 100% !important;
background: red;
display: flex;
flex-flow: row wrap;
}
.Header{
width: 100%;
height: 140px;
color: rgb(255, 255, 255);
background: rgb(113, 89, 193);
transition: all 0.2s ease 0s;
}
.navtop{
height: 100%;
display: flex;
flex-direction: row;
-webkit-box-pack: justify;
justify-content: space-between;
-webkit-box-align: center;
align-items: center;
background:yellow;
}
.Container{
max-width: 1140px;
padding: 0px 30px;
margin: 0px auto;
}
.LogoHeader {
background: red;
display: flex;
align-items: center;
padding: 0 15px;
height: 100%;
min-width: 10em;
}
.img {
width: 150px;
}
.SearchWrapper {
background: yellow;
height: 100%;
display: flex;
align-items: center;
}
.input {
min-width: 200px;
}
.input:focus {
min-width: 300px;
}
.NavWrapper {
background: black;
height: 100%;
}
i really tried every possible solution i know i could change that with media queries
but i know i did something wrong in my css so i'm having this

Answer 1

I'm not exactly sure what you're aiming at, but there are at least 3 elements that are causing your header to not be able to shrink down fully to a mobile width below 440px.
Adjusting these 3 elements will get you going in the right direction, like so:
.LogoHeader {
background: red;
display: flex;
align-items: center;
padding: 0 15px;
height: 100%;
/*min-width: 10em;*/ /*REMOVE THIS LINE*/
width: 100%; /*ADD THIS*/
max-width: 10em; /*ADD THIS*/
}
.img {
/*width: 150px;*/ /*REMOVE THIS LINE*/
width: 100%; /*ADD THIS*/
max-width: 150px; /*ADD THIS*/
height: auto; /*ADD THIS */
}
.input {
/*min-width: 200px;*/ /*REMOVE THIS LINE*/
width: 100%; /*ADD THIS*/
max-width: 200px; /*ADD THIS*/
min-width: 50px; /*ADD THIS*/
}
Or you could adjust these elements in a media query, like so:
#media (max-width: 480px) {
.LogoHeader {
min-width: unset;
width: 100%;
max-width: 10em;
}
.image {
width: 100%;
max-width: 150px;
height: auto;
}
.input {
width: 100%;
max-width: 200px;
min-width: 50px;
}
}
Of course, you may want to adjust the values as needed and make some other modifications, but this should at lease allow the header to shrink down to mobile width.
The point here is that .img had a fixed with 150px and the input had a min-width of 200px, and the .LogoHeader had a min-width of 10em so those fixed widths and min-widths along with the padding of the .Container and .LogoHeader was not allowing your entire Header to shrink below 440px.