Question 214236 in Html Question posted in
Some basic documentation can be found here.

Html – object not following css grid

I’m using gridding and want the following to be bottom and center but they are appearing at the left:

.body {
  margin: 0;
  background-color: rgb(255, 237, 237);
  display: grid;
  grid-template-rows: 10vh 48vh 21vh 21vh;
  grid-template-columns: 98vi;
  color: white;
}

#scrolllabel {
  color: rgb(19, 1, 1);
  grid-row: 3;
  grid-column: 1;
  z-index: 100;
  font-family: Arial;
  place-content: center;
  place-self: center;
  align-self: center;
  font-size: 25px;
  border-width: 0;
}
<h2 id="scrolllabel">Scroll down to know more</h2>
<b id="the_down_arrow">&darr;</b>

but the result is:

enter image description here

Tags:

2

Answers


  1. 0

    enter image description hereYou can use position attribute instead of grid.

    —— HTML———

    <div class="hero-container">
    <div >
        <h2 id="scrolllabel" >Scroll down to know more</h2>
        <b id="the_down_arrow">&darr;</b>
    </div>
</div>

    —— Style ——

    .hero-container {
    height: 500px; /*as per your requirement*/
    width: 100%;
    background-color: lightskyblue;

    position: relative; /*Important*/
}
.hero-container > div {
    position: absolute; /*Important*/
    bottom: 10px; /*as per your requirement*/

    /*Most important to align*/
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;

}

    Try this code to your app.

    Login or Signup to reply.
  2. 0

    Try this code please. I am little busy now, so I shared code only.

    <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Test</title>

    <style type="text/css">
        .body {
          margin: 0;
          background-color: rgb(255, 237, 237);
          display: grid;
          grid-template-rows: 10vh 48vh 21vh 21vh;
          grid-template-columns: 98vi;
          color: white;
        }
        .hero-container{
            display: grid;
        }

        #scrolllabel {
          color: rgb(19, 1, 1);
          grid-row: 3;
          grid-column: 1;
          z-index: 100;
          font-family: Arial;
          place-content: center;
          place-self: center;
          align-self: center;
          font-size: 25px;
          border-width: 0;
        }
        #the_down_arrow {
        color: rgb(19, 1, 1);
          grid-row: 4;
          grid-column: 1;
          z-index: 100;
          font-family: Arial;
          place-content: center;
          place-self: center;
          align-self: center;
          font-size: 25px;
          border-width: 0;
        }
    </style>
</head>
<body>
    <div class="hero-container">
        <h2 id="scrolllabel" >Scroll down to know more</h2>
        <b id="the_down_arrow">&darr;</b>
    </div>
</body>
</html>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search