GTA 的 3 个标题图像不会进入宽度为 768px 的单列，媒体查询将它们设置为只有 1 列的网格。我以前成功地做到了这一点，但在这里它不起作用。
.body {
margin-top:0pt;
margin-left:0pt;
margin-right:0pt;
margin-bottom:0pt;
}
.gta {
background-image: url('logos/GTA3_Artwork.jpg');
background-position:center;
}
.item {
font-family: "Freeman", sans-serif;
font-weight: 800;
font-size: 2rem;
color: rgb(2, 1, 0);
margin-top: 30px;
}
.gta3 {
position: relative;
left: 600px;
top:200px;
color:rgb(0, 0, 0);
font-family: 'Pricedown Bl', sans-serif;
font-size:60px;
text-shadow: 20px;
width: 200px;
display:block;
}
.gtavicecity {
position: relative;
left: 110px;
top: -70px;
color: rgb(221, 71, 221);
font-family: 'Rage Italic', sans-serif;
font-size: 90px;
width: 200px;
display: block;
}
.gtasanandreas {
position:relative;
left: 1000px;
bottom:300px;
font-family: 'Beckett', sans-serif;
font-size: 80px;
color:black;
width: 200px;
display:block;
}
.alsoflexbox {
display: flex;
justify-content:space-evenly;
font-family: "Freeman", sans-serif;
font-weight: 800;
font-size: 32px;
margin-bottom: 100px;
background-color:grey;
border-radius: 30px;
flex-wrap:wrap;
}
.kezdo {
font-family: "Freeman", sans-serif;
font-weight: 800;
font-size: 2rem;
display: block;
text-decoration: none;
color: black;
text-align: center;
margin-bottom: 50px;
}
@media (max-width: 768px)
{
.container{
display:grid;
grid-template-columns: 100%;
grid-template-rows: auto;}
.item {
font-family: "Freeman", sans-serif;
font-weight: 800;
font-size: 2rem;
color: rgb(2, 1, 0);
margin-top: 30px;
}
}
.gta3 {
color:rgb(0, 0, 0);
font-family: 'Pricedown Bl', sans-serif;
font-size:60px;
text-shadow: 20px;
width: 200px;
}
.gtavicecity {
color: rgb(221, 71, 221);
font-family: 'Rage Italic', sans-serif;
font-size: 90px;
width: 200px;
}
.gtasanandreas {
font-family: 'Beckett', sans-serif;
font-size: 80px;
color:black;
width: 200px;
}
.gta {
background-image: url('logos/GTA3_Artwork.jpg');
background-position:center;
}
<body class="gta" >
<div class="container">
<div class="item"><a class=" gta3" href="https://www.gta.fandom.com" style="text-decoration:none;">Grand Theft Auto III</a></div>
<div class="item"><a class="gtavicecity" href="https://www.gta.fandom.com" style="text-decoration:none;">Vice City</a></div>
<div class="item"><a class="gtasanandreas" href="https://www.gta.fandom.com" style="text-decoration:none;">San Andreas</a></div>
</div>
<div class="alsoflexbox">
<a style="text-decoration: none;color:black" href="zene.html"><div>Zene</div></a>
<a style="text-decoration: none;color:black" href="gta.html"><div>GTA</div></a>
<a style="text-decoration: none;color:black"href="gitár.html"><div>Gitár</div></a>
<a style="text-decoration: none;color:black"href="számítógép.html"><div>Számítógép</div></a>
<a style="text-decoration: none;color:black"href="fotózás.html"><div>Fotózás</div></a>
<a style="text-decoration: none;color:black"href="utazas.html"><div>Utazásaim</div></a>
<a style="text-decoration: none;color:black"href="sport.html"><div>Sport</div></a>
<a style="text-decoration: none;color:black"href="kepesiteseim.html"><div>Képesítéseim</div></a>
<a style="text-decoration: none;color:black"href="valami.html"><div>Valami</div></a>
</div>
<div class="kezdo"> <a style="text-decoration: none;color:black" href="index.html">Kezdőoldal</a>
</div>
</body>
</html>
我使用了媒体查询和可能许多无用的代码行。我不知道为什么当我缩小屏幕尺寸时我的 3 个徽标会出现在同一列中。我可以使用带有网格的一列成功地使我的其他页面移动友好，但不知道为什么它在这里不起作用。
请确保包含所有必需的文件，例如徽标文件夹中的文件！另外，我推荐基本的 HTML 结构。