<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Naxis.io</title>
<meta name="description" content="A game where you eat other players and get bigger to eat even more players" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=deive-width, initial-scale=2.0, initial-scale=1.0">
<link rel="stylesheet" href="main.css"/>
</head>
<body>
<div id="overlay">
<div class="main-box">
<div id="profile-menu" class="user-boxes" ></div>
<div id="skin-list" class="user-boxes" ></div>
<div id="user-menu" class="user-boxes" ></div>
<div id="server-list" class="user-boxes" ></div>
</div>
</div>
</body>
</html>
body {
background-color: rgb(36, 36, 36);
}
* {
box-sizing: border-box;
}
#overlay {
width: 1000px;
padding: 10px;
margin: auto;
}
.main-box {
position: absolute;
display: grid;
grid-template-columns: 320px 340px 280px;
grid-template-rows: 70px 146px 302px 250px;
grid-gap: 14px;
top: 16%;
}
#server-list {
width: 280px;
height: 462px;
grid-column: 3;
grid-row: 2;
}
#user-menu {
width: 340px;
height: 462px;
grid-column: 2;
grid-row: 2;
}
#profile-menu {
width: 320px;
height: 146px;
grid-column: 1;
grid-row: 2;
}
#skin-list {
width: 320px;
height: 302px;
grid-column: 1;
grid-row: 3;
}
.user-boxes {
border-radius: 3px;
background-color: rgba(20, 20, 20, 0.918);
box-shadow: 0 0 4px 1px #0a0a0a;
}
@media screen and (max-width: 1024px) {
#overlay {
width: 100%;
}
.main-box {
width: 100%;
}
.user-boxes {
width: 100%;
margin: 10px 0px;
color: #fff;
}
}
Witam,
Robię grę, i postanowiłem od nowa zrobić strukturę strony, że uczynić ją responsywną.
Z grid'a bardzo fajnie mi się korzysta, ale niestety nie wiem jak zrobić responsywną stronę z jego użyciem.
Przed dodaniem grid'a struktura strony była responsywna, niestety po dodaniu już nie.