Header does not get responsive in 320PX using Flexbox

Asked

Viewed 45 times

1

I am starting to use flexbox but I have a giant problem that I cannot solve in several layouts. Both the header and Nav and li are hidden in the Mobile Solution, Iphone 320x568 and there is a white list throughout the site. I’ve tried max width on @media and @media screen and nothing.

Any suggestions? Please <3

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <title>Infinity</title>
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <link rel="shortcut icon" href="images/logo.png">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous">
    <link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet">

</head>
<body>
        <header>
    <a href="#"><img src="images/logo2.png" alt="Infinity"></a>
    <nav>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Products</a></li>
        <li><a href="#">Contact</a></li>
    </nav>
        </header>
</body>
</html>

CSS : /* RESET */
* {
    margin:0;
    padding: 0;
    font-size: 100%;
    box-sizing: border-box;
    font-family: 'Oswald', sans-serif;
}

nav,ul {
    list-style: none;
}

a {
    text-decoration: none;
    cursor: pointer;
}


/* HEADER */
header {
    background-color: #353535;
    max-width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1px 50px;
}

header img {
    width: 200px;
}

header nav {    
    display: flex;
}
header li a {
    color: white;
    padding: 30px;
    font-size: 1.4rem;
}
header li a:hover {
    color:#606060;
}
header li{
    margin: 0 15px;
}

header li:first-child {
    margin-left: 0;
}
header li:last-child {
    margin-right:0;
}

@media (max-width: 700px) {
    header {
        flex-direction: column;
    }
    header img {
        margin-bottom: 15px;
    }
}

@media (max-width: 320px){
    header a {
        flex-direction: column;
    }
}
html css responsive-layout flexbox responsive

1 answer

1

Your CSS and HTML are having some problems. Your list for example does not have a UL from the outside, and the margins and paddins are somewhat redundant. Another thing is that the font is not "responsive" by nature, you need to make adjustments to it to suit the layout. I used some @media to adjust the font-size and fix that

I just made a few small adjustments to what I mentioned and already solved, look there.

html,
body {
  margin: 0;
  width: 100%;
  height: 100%;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Oswald', sans-serif;
}

nav,
ul {
  list-style: none;
}

ul {
  width: 100%;
  display: flex;
  background-color: #353535;

}

a {
  text-decoration: none;
  cursor: pointer;
}


/* HEADER */

header {
  background-color: #353535;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1px 50px;
}

header img {
  width: 200px;
}

header nav {
  display: flex;
}

header li a {
  color: white;
  /* padding: 30px; */
  font-size: 1.4rem;
}

header li a:hover {
  color: #606060;
}

header li {
  margin: 0 15px;
}

header li:first-child {
  margin-left: 0;
}

header li:last-child {
  margin-right: 0;
}

@media (max-width: 700px) {
  header {
    flex-direction: column;
  }
  header img {
    margin-bottom: 15px;
  }
  header li a {
    font-size: 1rem;
  }
}

@media (max-width: 360px) {
  header li a {
    font-size: 0.75rem;
  }
}
  <header>
    <a href="#">
      <img src="images/logo2.png" alt="Infinity">
    </a>
    <nav>
      <ul>
        <li>
          <a href="#">Home</a>
        </li>
        <li>
          <a href="#">About</a>
        </li>
        <li>
          <a href="#">Products</a>
        </li>
        <li>
          <a href="#">Contact</a>
        </li>
      </ul>
    </nav>
  </header>

  • Thanks a lot. You’re the man!!!!!!!!!!!!!!!!!!

  • @Matheeusluiiz good that helped you, if your question has already been answered consider marking the answer as accepted, in this icon next to the answer, so the question is not pending on the site as Question without Answer Accepted. Good luck with the project. And any doubt just give the touch

Browser other questions tagged html css responsive-layout flexbox responsive

You are not signed in. Login or sign up in order to post.