I'm starting to use flexbox but I'm having a giant problem that I can not solve in several layouts. Both the header and the nav and li are hidden in the resolution Mobile, Iphone 320x568 and a white list is everywhere. I've already tried max width in @media and @media screen and nothing.
Any suggestions? Please
Your CSS and HTML have a few problems. Your list, for example, does not have UL on the outside, and the margins and paddins are half redundant. Another thing is that the font is not "responsive" by nature, you need to make adjustments to it to fit the layout. I've used some @media to adjust font-size and fix this
I've just made a few small adjustments to what I've commented and 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>