CODEWITHSUNDEEP
cssreactjs
user12356906
user12356906

Reputation:

FlexBox container not responsive

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:

enter image description here

in desktop resolution:

enter image description here

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

Upvotes: 1

Views: 66

Answers (1)

Bryan Elliott
Bryan Elliott

Reputation: 4095

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.

Upvotes: 1

Related Questions