Css grid, justify-content: end, doesn't work in my code

Question

Let me expose my issue, so I was able to figure out how to create a responsive webpage with media queries, I have one template for a computer type of screen, which works almost perfectly. The thing is, I wanted to create a mobile version, I was able to understand the concept and create the foundation, But I have one main issue.

I have this div called statistiquesRight which display fine in my computer version, but in my mobile version, when I'm trying to push the element a little bit downward, margin-top 20% the element pushes every element on the top (to fit the screen portview I guess). But I would want them to be fixed... I tried to add justify-content: end in the gridFirstTP which is the div where I create the grid .. but that didn't work, anybody explains to me the concept or the issue?

.. Don't pay attention to certain div class name, sometimes I just don't know how to name them

@media (max-width: 480px) {
  * {
    margin: 0px;
    padding: 0px;
    border: 0px;
  }

  .First-tp {
    background: rgb(254, 122, 255);
    background: linear-gradient(
      96deg,
      rgba(254, 122, 255, 1) 0%,
      rgba(55, 154, 237, 1) 67%
    );
  }

  ::-webkit-scrollbar {
    display: none;
  }

  .gridFirstTP {
    display: grid;
    justify-content: end;
    grid-template-columns: 1fr 2fr;
    grid-template-rows: auto auto auto;
    height: 100vh;
  }

  .imageBTN {
    width: 94%;
    margin-top: 0%;
    box-shadow: 7px 9px 14px rgba(41, 41, 41, 0.651);
    border-radius: 50%;
  }
  .randonButton {
    grid-column: 1/3;
    grid-row: 2/2;
    justify-self: center;
  }

  .headAlert {
    grid-column: 1/3;
    grid-row: 1/1;
    text-align: center;
    font-size: 106%;
    font-weight: 700;
    margin-top: 3.5%;
  }

  .usrInput {
    grid-column: 1/3;
    grid-row: 3/3;
    justify-self: center;
    margin-top: -10%;
  }


  #input-Prenom{
    height: 23%;
    width: 118%;
    margin-left: -10%;
    box-shadow: 3px 7px 10px rgba(0, 0, 0, 0.445);
    
  }

  #input-Nom{
    height: 23%;
    width: 118%;
    margin-left: -10%;
    box-shadow: 3px 7px 10px rgba(0, 0, 0, 0.445);
  }

  #input-email{
    height: 23%;
    width: 118%;
    margin-left: -10%;
    box-shadow: 3px 7px 10px rgba(0, 0, 0, 0.445);
  }



  #popCo {
    grid-column: 1/3;
    grid-row: 2/2;
    display: none;
    justify-self: center;
    height: 200%;
    width: 1000%;
    background-color: rgba(231, 74, 26, 0.479);
    border-radius: 4%;
  }

  #pop1 {
    display: grid;
    justify-content: center;
    font-size: 150%;
    margin-top: 2%;
  }
  #pop2 {
    display: grid;
    justify-content: center;
    font-size: 120%;
    margin-top: 8%;
  }






  .col-inlsecond{
    display: grid;
    justify-content: end;
    grid-template-columns: 1fr 2fr;
    grid-template-rows: auto auto auto;
  }

  .statistiquesRight {
    margin-top: 10%;
    grid-column: 1/3;
    grid-row: 4/4;
    background: rgb(105, 177, 239);
    background: linear-gradient(
      21deg,
      rgba(105, 177, 239, 1) 0%,
      rgba(235, 119, 238, 1) 83%
    );
    box-shadow: -6px 0px 15px -4px;
  }

  .boxStatsa {
    margin-left: 2.5%;
  }

  .articleStatsb {
    margin-top: 7.5%;
    display: inline-block;
    font-size: 135%;
  }

  .rightstats {
    margin-top: 3.44%;
    text-align: center;
  }







  

  .Blogtwos {
    background: rgb(48, 150, 28);
  }

  .explicationPage {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto auto;
    justify-content: end;
    height: 100vh;
  }

  .ImageBlogB {
    grid-column: 1/3;
    grid-row: 2/2;
    display: grid;
  }

  .ImageBlocksi{
    justify-self: center;
    width: 50%;
  }

  .Desccapone {
    grid-column: 13/3;
    grid-row: 2/2;
    margin-top: 30%;
    width: 100%;
    text-align: center;
  }

  .desccaptionB {
    grid-column: 1/3;
    grid-row: 3/3;
    width: 100%;
    font-size: 126%;
    text-shadow: 4px 4px 13px black;
  }

  .Desccaptwo {
    justify-self: center;
    grid-column: 1/3;
    grid-row: 4/4;
    width: 100%;
    font-size: 126%;
    text-shadow: 4px 4px 13px black;
  }

  .Desccapthree {
    justify-self: center;
    grid-column: 1/3;
    grid-row: 5/5;
    width: 100%;
    font-size: 126%;
    text-shadow: 4px 4px 13px black;
  }
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="css/large.css" />
    <link rel="stylesheet" href="css/phone.css" />
    <!-- <link rel="stylesheet" href="css/mini.css" /> -->
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6"
      crossorigin="anonymous"
    />

    <title>NextOnEarth</title>
  </head>
  <body>
    <!--Image de la terre-->
    <div class="First-tp">
      <div class="gridFirstTP">
        <div class="randonButton">
          <img
            src="images\earth.png"
            alt=""
            onclick="userInfo()"
            class="imageBTN"
          />
        </div>

        <div class="headAlert">
          <p>
            Connect toi, clique sur la terre et recherche des articles
            aléatoires sur le thème de l'environnement
          </p>
        </div>

        <!-- Pop-up, non connecte -->

        <!--Les informations perssonnels-->

        <div class="usrInput">
          <input
            type="text"
            name="firstName"
            id="input-Prenom"
            placeholder="Entrer votre Prenom"
          />
          <br />
          <br />
          <input
            type="text"
            name="lastName"
            id="input-Nom"
            placeholder="Entrer votre Nom"
          />
          <br />
          <br />
          <input
            type="text"
            name="email"
            id="input-email"
            placeholder="Entrer votre Email"
          />
        </div>

        <!--Statistique-->

        <div class="statistiquesRight">
          <h2 class="rightstats">-Les Statistiques-</h2>
          <div>
            <div class="boxStatsa">
              <p class="articleStatsb">Nombre d'article visités:</p>
              <p class="articleStatsb" id="statspress">0</p>
            </div>
          </div>
        </div>

        <div id="popCo">
          <div>
            <h1 id="pop1">
              Veuillez vous connecter pour pouvoir utliser l'application
            </h1>
            <p id="pop2">
              Sur le côté gauche de l'écran entre t'es informations pour pouvoir
              continuer a utiliser "Next On Earth"
            </p>
          </div>
        </div>
      </div>
    </div>

    <!-- Page d'explication -->

    <div class="Blogtwos">
      <div class="explicationPage">


        <div class="ImageBlogB">
          <img src="images/green.png" alt="ProjetDesc" class="ImageBlocksi" />
        </div>

        <div class="Desccapone">
          <h2 id="titleDesc">Pourquoi le projet "Next On earth"</h2>
        </div>

        <div class="desccaptionB">
          <p class="desc1">
            Le but est de pouvoir rendre accessible le plus simplement possible
            la
            <span style="background-color: yellow">
              diffusions d'information</span
            >
            sur le thème de l'environnement,
            <span style="background-color: yellow">en un clique</span> vous
            pouvez consulter des articles sans même avoir besoin de faire des
            recherches sur le sujet.
          </p>
        </div>

        <div class="Desccaptwo">
          <p class="desc2">
            En obligeant les utilisateurs à se connecter pour pouvoir utiliser
            la platform, "next on earth" recoltes les information
            d'inscriptions,
            <span style="background-color: yellow"
              >qui seront utilisé dans le but de financer des projets lier au
              thème de l'environnement</span
            >, vous pouvez retrouver plus d'informations à ce sujet dans
            l'onglet "Légal"
          </p>
        </div>

        <div class="Desccapthree">
          <p class="desc3">
            Projet réalisé dans l'optique de la réalisation d'un projet
            personnel
          </p>
        </div>
      </div>
    </div>

    <!--Bouttons Credits et Legal-->
    <!-- 
    <div>
      <a
        class="btn btn-secondary btn-sm"
        id="creditsButton"
        href="./Credits.html"
        >Credits</a
      >
    </div>

    <div>
      <a class="btn btn-secondary btn-sm" id="legalButton" href="./Legal.html"
        >Legal</a
      >
    </div>
 -->
    <!-- Sources des scripts-->

    <script
      src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
      integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
      crossorigin="anonymous"
    ></script>
    <script
      src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"
      integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
      crossorigin="anonymous"
    ></script>
    <script
      src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"
      integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
      crossorigin="anonymous"
    ></script>
    <script src="javascript.js"></script>
    <!-- Note: when deploying, replace "development.js" with "production.min.js". -->
    <script
      src="https://unpkg.com/react@17/umd/react.development.js"
      crossorigin
    ></script>
    <script
      src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"
      crossorigin
    ></script>
    <!-- Load our React component. -->
    <script src="statistiques.js"></script>
  </body>
</html>

@BOZ justify-content also exist on CSS grid: https://css-tricks.com/snippets/css/complete-guide-grid/#justify-content — Temani Afif, May 10 '21 at 10:31

score 1 · Accepted Answer · answered May 10 '21 at 08:47

1

justify-content is used in flexbox not in css grid. you need to use justify-items for css grid

answered May 10 '21 at 08:47

I_love_vegetables

1,575
5
12
26

justify-content is also a CSS grid property – Temani Afif May 10 '21 at 10:32
@TemaniAfif oh yeah i completely forgot that but in this case justify items need to be used, thanks for correcting me – I_love_vegetables May 10 '21 at 11:08

Css grid, justify-content: end, doesn't work in my code

1 Answers1