My menu items are displaying properly on a large screen using CSS grid, but they overlap on a small screen. What could be causing this issue and how can I resolve it?
I have included the CSS code here, and you can access the full source code (HTML and CSS) by clicking the link below.
Full source code: http://jsfiddle.net/x89Lop5t/
The CSS code snippet is as follows:
*{
box-sizing:border-box;
}
body {
background-color:#003EBB;
}
/*styling the css grid container */
.container{
display:grid;
grid-template-columns: repeat(6 , 1fr);
grid-auto-row: 150px;
grid-gap:20px;
align-items: center;
grid-template-areas:
". . . . . mh"
". . nv nv nv ."
}
/*end of css grid container */
/*styling the grid items */
.miniHeader{
grid-area:mh;
}
.miniHeader ul li{
display:inline;
margin-left:20px;
list-style:none;
margin-top:1px;
}
.miniHeader ul li a{
text-decoration: none;
color:white;
}
nav{
grid-area: nv;
}
nav ul li{
display:inline;
border: 1px solid white;
border-radius: 10px;
padding:10px;
margin-left: 5px;
}
nav ul li a{
color:white;
padding:20px;
text-decoration:none;
}