Search code examples
htmlcssresponsive-designgridresponsive

Bad: responsive difficulties

I'm currently working on my portfolio/website but I have some problems with my responsive. In desktop format, the site is 5 columns, 3 at the left for my works ans portfolio, and 2 at the right for the infos part. In a mobile format, i want it to be only 3 columns, and get rid of the 2 for the infos part (so there's no infos in mobile version).

When I try to do it just for testing, it works perfectly : test 5 columns test 3 columns responsive

The problem is, when I put this test on my portfolio, the responsive isn't working at all. The website doesn't change for 3 columns and the 2 of infos part are still visible in a mobile format.

html :

<!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;">&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&nbsp;</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;
}

I don't really know what to do more, when I watch tutos or other questions/helps I can't find anything that can help me. I suppose there is a problem with my 'fixed' infos part or something like that, but I can't find what. Everything works well on the test, but when I put it on my portfolio it seems like the @media max-width isn't working?

Solution

  • The reason it works on the codepen version is because the divs are empty, so the contact element wouldn't show anyway. You just need to set the contact element to display: none. Also remove the position: fixed from .info as it just messes with the layout.

    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";
  }
  .CONTACT {
    display: none;
  }
}

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 {
  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;
}
    <!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;">&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&nbsp;</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>