Element failing to adhere to CSS grid layout

I am currently working with grid layout and aiming to position the following content at the bottom and center, but it is currently aligning to 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>

However, the current output looks like:

https://i.sstatic.net/WTdki.png

htmlcss

Answer №1

https://i.sstatic.net/iwbXk.pngInstead of using the grid attribute, you can opt for the position attribute.

------ 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; /*adjust as needed*/
    width: 100%;
    background-color: lightskyblue;

    position: relative; /*Crucial step*/
}
.hero-container > div {
    position: absolute; /*Crucial step*/
    bottom: 10px; /*adjust as needed*/

    /*Vital for alignment*/
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;

}

Feel free to incorporate this code into your application.

Answer №2

Could you please give this code a try? I'm a bit tied up at the moment, so I can only share the code for now.

<!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 discover more</h2>
        <b id="the_down_arrow">&darr;</b>
    </div>
</body>
</html>

Answer №3

Consider enclosing it within a wrapping element and utilizing flexbox.

<!DOCTYPE html>
<html>
<head>
  <link href="https://fonts.googleapis.com/css2?family=Nunito&display=swap" rel="stylesheet">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>order</title>
  <style>
.body {
  margin: 0;
  overflow: hidden;
}

.container {
  display:flex;
  justify-content:center;
  align-items:center;
  width: 100%;
  height: 100vh;
  background: red;
}
  </style>
</head>
<body>
  <div class="container">
  <h2 id="scrolllabel">Scroll down to discover more</h2>
  <b id="the_down_arrow">&darr;</b>
  </div>
</body>
</html>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What's the best way to customize the dropdown icon in Bootstrap 5?

Is there a way to customize the default icon in the Bootstrap 5 dropdown menu and replace it with a Font Awesome character? I have gone through the documentation, but it didn't provide any helpful information. I also attempted to override the CSS styl ...

csstwitter-bootstrapfont-awesomebootstrap-5

The canvas is responsive to keyboard commands, however, the image remains stationary and unaffected

As I delved into the basics, incorporating canvas, CSS, and JavaScript, a question arose: should the image be housed in the HTML or the JavaScript code? Following this, I added a background color to the canvas and defined properties of the canvas in JavaSc ...

javascriptcsshtmlhtml5-canvas

The variable continuously updates itself inexplicably, without any specific code dictating it to

In the sandbox-based game I am playing, two variables are present. blocks (this is an array) and blockssave (also an array) However, there are also functions included: var game = { blocksave: function() { blockssave = blocks; blo ...

javascripthtml

What is the correct way to adjust the style.top attribute of an element using JavaScript?

In order to correct a JavaScript source code, I need to adjust the style.top property of a div element based on an integer parameter from a function called index. Here is the current implementation: div.style.top = (index * 22 + 2)+"px"; However, for lar ...

javascriptcss

What is the best way to make a drop down menu list appear when I click on the parent li, and then show the sub li using JavaScript?

I have a code that includes an image, HTML, and CSS code. Can anyone please tell me how I can set up a drop-down menu list to open the sub <li> elements when I click on a parent <li> using JavaScript? You can see the appearance of the code in t ...

javascriptphphtmlcss

The responsive menu refuses to appear

my code is located below Link to my CodePen project I'm specifically focusing on the mobile view of the website. Please resize your screen until you see the layout that I'm referring to. I suspect there might be an issue with my JavaScript cod ...

javascripthtmlcss

Tips for making a fluid DIV expand to fit the entire width of the page

My layout features fixed-width sidebars on the left and right, with a fluid main content area that fills the space in between using float:left. Here's an example: #left-sidebar {width: 200px;} #right-sidebar {width: 300px;} #main-content {margin-left ...

htmlcsslayout

Horizontal scrolling overflow disrupts vertical overflow visibility

I am attempting to display a container containing input elements that receive a warning bubble positioned absolutely when the input is invalid. However, the issue I am facing is that the bubble does not extend beyond the boundaries of the container as anti ...

cssoverflow

Chrome's Tab key causing unremovable black border [2022]

Is there a way to change the color of the black box shadow to a different hue when switching between nav tabs using the Tab key? Here is the code snippet: <ul class="nav nav-tabs m-5"> <li class="nav-item"> <a clas ...

cssfrontendbootstrap-5

What causes an AJAX call to trigger both the success and error blocks each time it is made?

I'm having trouble with uploading an image to a database using AJAX. Every time I make the call, it enters both the success and error blocks. Here's my HTML: <div> <form id="test-form" enctype="multipart/form- ...

javahtmljqueryajax

Hide the div element once the timer runs out

Struggling to make a timer disappear when it reaches 00:00, every attempt results in the div being hidden immediately. Check out the code snippet I've been working with: $(document).ready(function(e) { var $worked = $("#worked"); function upd ...

javascriptjqueryhtmlcountdown

Is the user currently browsing the 'Home screen webpage' or using the Safari browser?

In JavaScript, is there a method to determine if the user has accessed the website from their home screen after adding it to their home screen, or if they are browsing via Safari as usual? ...

javascriptioshtmlmobilesafari

What is the best way to ensure that the child element of a Material UI TableCell Component occupies the full height of the cell?

I am currently using MUI version 5 to create a table. In this table, there are two columns with cells that contain multiline TextFields. My goal is to have the TextFields completely fill the cell area. However, I am encountering an issue where when I start ...

cssreactjsmaterial-ui

Choose a procedure to reset to the original setting

I'm attempting to achieve something that seems straightforward, but I'm having trouble finding a solution. I have a <select> tag with 5 <option> elements. All I want to do is, when I click a button (which has a function inside of it), ...

javascripthtmlreactjs

Exploring JSON data with Angular

I am struggling with searching JSON data using Angular. After following various tutorials online, I am now facing an issue where the JavaScript debugger in Chrome shows that the script is running but nothing is being displayed on the page. As a beginner, ...

javascripthtmlangularjsjson

Ways to implement a personalized button in place of jquery ui buttons

Is there a way to replace the standard jQuery dialog buttons with custom images? I have created new buttons in Photoshop with a .png extension and would like to use them instead of the default dialog buttons. I think this can be done through CSS, but if y ...

jquerycssjquery-dialog

What is the most effective method for incorporating keyframes using JavaScript in a dynamic way?

Is there a way to animate an HTML element by using a variable with keyframes, but without directly manipulating the DOM? Below is the HTML code: <div class="pawn" id="pawn1"></div> Here is the CSS keyframes code: @keyframe ...

javascriptcsswebdom

Numerous sections of content

Struggling to align these two pieces of content side by side. While I've had success displaying content like this in the past, I'm hitting a roadblock this time around. Any assistance would be greatly appreciated. HTML <div class="block-one" ...

htmlcss

Struggling to create a responsive navbar for a landing page using Next.js and TailwindCSS

I'm currently working on a landing page using nextjs, tailwind css, and shadcnui. The design looks great on desktop with a logo and two links, but it's not responsive on smartphones. https://i.stack.imgur.com/HVQsa.png On mobile devices, the lay ...

cssreactjsnext.jstailwind-css

Creating a dynamic form that efficiently captures user information and automatically redirects to the appropriate web page

Sorry for the unusual question, but it was the best way I could think of asking. I have come across websites with fill-in-the-blank lines where you can input your desired information and then get redirected to another page. For example: "What are you sea ...

javascripthtmlcsswordpress