Flexibility help

Flexibility help
0.0 0

#1

I am really struggling to understand how to make my projects adapt as the browser size shrinks, if someone could give me some advice I would really appreciate it. (I am using CSS grid).

http://127.0.0.1:3000/ringo.html


#2

body{
background-color:#FCFFF3
;
color:#A8B286;

}
#logo{
width:100%;
height:100%;
border-bottom: solid 12px #A8B286;;
}
.two{

text-align:right;
font-size:310%;
}
p{
font-size:270%;
text-align:left;
padding-left: 70px;
padding-right:40px;

}
main{
padding-left:150px;
padding-right:150px;
}
#drum{
float: left;
}

#tit{
grid-area:headers;
}
#container{

display:grid;
grid-template-rows:repeat(4,25%);
grid-template-columns: 50% 50%;
grid-template-areas:
“headers headers”
“content content”
“content content”;

}
.blue{
}
.cut{
z-index:-1;
max-height:
40%;
min-height: 688px;
opacity:.7;
}
div{
border-bottom: solid 12px #A8B286;;
}
h1{

margin-top:-1px;
text-align:center;
font-size:420px;
border-top-color:white;
font-family:arial;
padding-bottom:50px;

}
#three{

margin-left: -180px;
}


#3

Did you define the viewport size in head section? Also the padding in your main div might be spilling over the edges of the viewport. Try playing around with box-sizing https://css-tricks.com/box-sizing/


#4

Thank you very much!