I wrote this code as an exercise and I use the mobile first system, in fact with the mobile version no problem at the moment, but with the menu I found a problem when I had to switch to the tablet, you can not see, can you help me?
https://codepen.io/Razeft_it/full/mpVjMj/
css
* {
margin: 0;
padding: 0;
}
body {
background: #DAB;
}
.container {
width: 100%;
max-width: 1500px;
background: white;
height: 100vh;
}
.row:after {
display: block;
clear: both;
content: '';
}
.row+.row {
margin-top: 0;
}
[class^="col-"] {
float: left;
margin-right: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
height: 100%;
}
[class^="col-"]:last-child {
margin-right: 0%;
}
/*
.col-1 { width:5.583333333333333%; }
.col-2 { width:14.16666666666667%; }
.col-3 { width:22.75%; }
.col-4 { width:31.33333333333333%; }
.col-5 { width:39.91666666666667%; }
.col-6 { width:48.5%; }
.col-7 { width:57.08333333333333%; }
.col-8 { width:65.66666666666666%; }
.col-9 { width:74.25%; }
.col-10 { width:82.83333333333333%; }
.col-11 { width:91.41666666666666%; }
.col-12 { width:100%; }
*/
.col-1 {
width: 8.3333333333%;
}
.col-2 {
width: 16.6666666667%;
}
.col-3 {
width: 25%;
}
.col-4 {
width: 33.3333333333%;
}
.col-5 {
width: 41.6666666667%;
}
.col-6 {
width: 50%;
}
.col-7 {
width: 58.3333333333%;
}
.col-8 {
width: 66.6666666667%;
}
.col-9 {
width: 75%;
}
.col-10 {
width: 83.3333333333%;
}
.col-11 {
width: 91.6666666667%;
}
.col-12 {
width: 100%;
}
.nav {
height: 3.3rem;
background-color: black;
color: white;
}
.articolo {
height: auto;
background-color: blue;
color: white;
}
.logo {
float: left;
border-right: none;
height: 3.3rem;
display: inline-block;
padding-left: 6px;
text-decoration: none;
transition: all 0.2s ease;
line-height: 3.3rem;
height: 3.3rem;
color: white;
font-size: 2rem;
font-family: 'Lobster', sans-serif;
}
.logo:hover {
transition: all .2s linear;
color: #800080;
font-size: 2.5rem;
}
.menu ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
float: right;
position: fixed;
top: -500px;
width: 100vw;
transition: all .3s ease;
z-index: 0;
opacity: 0;
background: black;
}
.menu li {
float: none;
font-size: 1rem;
font-family: 'Oswald', sans-serif;
}
.menu a {
text-align: center;
text-decoration: none;
transition: all 0.5s ease;
padding: 0 20px 0 20px;
line-height: 3.3rem;
height: 3.3rem;
color: white;
text-decoration: none;
display: block;
border-top: 1px solid #800080;
border-right: none;
}
.menu a:hover {
color: #800080;
}
.menu a:active,
.menu a:focus {
background: black;
color: #800080;
}
.menu .mobile-menu-checkbox {
display: none;
}
.menu .mobile-menu-checkbox:checked~ul {
top: 3.3rem;
opacity: 100;
}
.menu .mobile-menu-toggle {
display: block;
height: 3.3rem;
position: fixed;
top: 0;
right: 0;
font-size: 2rem;
line-height: 3.3rem;
padding: 0 20px;
cursor: pointer;
transition: all .3s ease;
color: white;
}
.menu .mobile-menu-toggle:hover {
color: #800080;
}
@media screen and (min-width: 700px) {
.menu ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background: black;
float: right;
height: 3.3rem;
}
.menu ul li {
float: right;
font-size: 0.7rem;
border-right: 1px solid #800080;
position: relative;
top: 500px;
height: 3.3rem;
z-index: 1;
opacity: 1;
}
.menu a {
display: inline-block;
text-align: center;
text-decoration: none;
transition: all 0.5s ease;
padding: 0 20px 0 20px;
line-height: 3.3rem;
height: 3.3rem;
color: white;
text-decoration: none;
}
.menu a:hover {
color: #800080;
}
.menu a:active,
.menu a:focus {
color: #800080;
}
.menu .mobile-menu-checkbox {
display: none;
}
.menu .mobile-menu-toggle {
display: none;
position: fixed;
top: 0;
right: 0;
font-size: 2rem;
line-height: 3.3rem;
padding: 0 20px;
cursor: pointer;
transition: all .3s ease;
color: white;
}
.menu .mobile-menu-toggle:hover {
color: #800080;
}
}`
html
<head>
<title>Container - Row - Col</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="css/style.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet">
</head>
<body>
<div class="container">
<header>
<div class="row nav">
<div class="col-12 menu">
<p class="logo">AG</p>
<input type="checkbox" id="mobile-menu-checkbox" class="mobile-menu-checkbox">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Portafolio</a></li>
<li><a href="#">Skills</a></li>
<li><a href="#">Social</a></li>
</ul>
<label class="mobile-menu-toggle" for="mobile-menu-checkbox">☰</i></label></div>
</div>
</header>
<section>
<div class="row articolo">
<div class="col-12">prova</div>
</div>
</section </div>
</body>