我目前正在我的投资组合/网站上工作，但我有一些问题，我的React。在桌面格式，该网站是5列，3在左边为我的作品和投资组合，2在右边的信息部分。在移动的格式，我希望它只有3列，并摆脱了2的信息部分（所以没有信息在移动版本）。
当我只是为了测试而尝试时，它工作得很完美：test 5 columnstest 3 columns responsive
问题是，当我对我的投资组合进行这个测试时，响应式根本不起作用。该网站不改变3列和2的信息部分仍然是可见的移动的格式。
联系我们
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="Design graphique & éditorial, Lyon (FR).">
<meta name="keywords" content="Design graphique, Design éditorial, HTML, CSS">
<meta name="author" content="Jérémy Antonin">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Jérémy Antonin</title>
<link rel="icon" type="image/x-icon" href="images/favicon.png">
<link rel="stylesheet" type="text/css" href="assets/css/reset.css">
<link rel="stylesheet" type="text/css" href="assets/css/main.css">
</head>
<body>
<div class="container">
<div class="TRAVAUX">
<mark><a id="23" class="anchor">fig. 05 — </a></mark>
<div>
<img src="images/travaux2.png" class="travaux">
</div>
<div>
<p><small>infos — </small><strong>die fragilität der adoleszenz<br>en collaboration avec milica milojkovic, édition<br>20 p., 148 × 210 mm, risographie, 2023</strong></p>
</div>
<mark><a id="22" class="anchor">fig. 05 — </a></mark>
<div>
<img src="images/travaux2.png" class="travaux">
</div>
</div>
<div class="CONTACT">
<nav>
<mark><a id="categorie" class="categorie">travaux — </a></mark>
<a href="#23" class="anchor-link retrait1 retrait">23</a>
</nav>
<div class="info">
<div>
<p><small>contact — </small><strong>jérémy antonin<br>design éditorial & interfaces graphiques<br>x<br>x<br>x</strong></p>
</div>
<div>
<p><small>formations — </small><strong>2017—2024<br>2022—2024, dna design graphique, ensba lyon.<br>2019—2022, dnmade numérique, esaa lmd, lyon.<br>2017—2019, baccalauréat std2a, hemingway, nîmes.</strong></p>
</div>
<div>
<p><small>expériences — </small><strong>stages<br>2023, graphiste, extra l’agence, lyon.<br>2021, graphiste, extra l’agence, lyon.<br>2021, direction artistique, bonjour paris, paris.<br>2020, création audiovisuelle, alchimeo, lyon.</strong><br><small style="color: white;">       </small><strong>workshops<br>2023, typographies minuscules, sandrine nugue.<br>2022, design génératif, lionel radisson.<br>2022, typographies matricielles, marie lécrivain.<br>2022, créations éditoriales, félicité landrivon.<br>2022, créations 3d c4d, julie gaudin.<br>2021, glyphs, bonjour monde.</strong></p>
</div>
<div>
<p><small>collaborations — </small><strong>2023<br>quand la ville dort, maël le magourou<br>die fragilität der adoleszenz, milica milojkovic<br>linuscule, ange billard<br>instruments 도구, sayu song<br>chats коти, kristina khoma</strong></p>
</div>
</div>
</body>
</html>字符串
css：
body {
margin: 10px;
line-height: 1.1;
}
.container { display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
grid-template-rows: 1fr;
gap: 0px 0px;
grid-auto-flow: row;
grid-template-areas:
"TRAVAUX TRAVAUX TRAVAUX CONTACT CONTACT";
}
.TRAVAUX {
grid-area: TRAVAUX;
display: block;
}
.CONTACT {
grid-area: CONTACT;
}
@media only screen and (max-width: 600px) {
.container {
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr;
grid-template-areas: "TRAVAUX TRAVAUX TRAVAUX";
}
}
section {
display: block;
height: 100%;
max-width: 100%;
width: 100vw;
font-family: serif;
font-weight: normal;
font-size: 14px;
}
.selected {
background-color: black;
color: white;
}
.info {
position: fixed;
right:10px;
top:20px;
font-family: serif;
font-size: 14px;
font-weight: normal;
}
nav {
position: fixed;
right:36.5em;
font-family: serif;
font-size: 14px;
font-weight: normal;
}
.anchor-link {
display: block;
padding-bottom: 5px;
text-underline: none;
text-decoration: none;
color: black;
}
.categorie {
padding-right: 50px;
}
.anchor {
padding-right: 50px;
}
.travaux {
max-width: 100%;
position: relative;
padding-left: 50px;
}
.retrait {
position: relative;
margin-left: 25px;
text-underline: none;
text-decoration: none;
color: black;
}
.retrait1 {
margin-top: 5px;
}
mark {
background-color: black;
color: white;
}
p {
margin-bottom: 50px;
font-family: sans-serif;
font-weight: bold;
font-size: 22px;
}
small {
font-family: serif;
font-size: 14px;
font-weight: normal;
}
strong {
padding-left: 30px;
}型
我真的不知道该怎么做，当我看教程或其他问题/帮助时，我找不到任何可以帮助我的东西。我想我的“固定”信息部分或类似的东西有问题，但我找不到什么。在测试中一切都很好，但是当我把它放在我的投资组合中时，似乎@media最大宽度不起作用？
1条答案
按热度按时间bqjvbblv1#
它在codepen版本上工作的原因是因为div是空的，所以contact元素无论如何都不会显示。您只需要设置要显示的contact元素：无。同时删除以下位置：固定从.info，因为它只是混乱的布局。
个字符