Hello all,
I’m having trouble with my #nav-list overlapping with my text when the screen gets smaller. The #nav-list width does not resize when I change the size of the screen even though the columns of the grid are given in %. Also, the #main-doc does not respect the 75% of screen-filling.
#page-container{
background: rgb(229, 217, 254);
padding: 10px;
display: grid;
grid-template-columns: 25% 75%;
grid-template-areas:
"header header"
"navigation content"
"footer footer"
}
.nav-list{
position: relative;
top:50px;
list-style:none;
padding: 0;
grid-area: navigation;
position: fixed;
}
main{
grid-area:content;
background-color:rgb(246, 242, 254);
padding: 10px;
position: relative;
top: 58px;
margin: 0 auto;
z-index:1;
}
I’m not sure why my media query is not responsive.
CODE:
@media (max-width: 500px)
{ #page-container {
display: grid;
grid-template-columns: 100%;
grid-template-areas:
"header
"navigation"
"content";
}
}
CHECK OUT MY CODE and visual on: https://codepen.io/IStein/pen/QWpdaWx?editors=1100
User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/90.0.4430.93 Safari/537.36
.
Challenge: Build a Technical Documentation Page
Link to the challenge: