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:

htmlcss

Answer №1

Instead 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

Issue with Chrome when using angled CSS gradient backgrounds

I'm encountering a problem with a CSS gradient background on a div that is set to 100% width and height. This issue only seems to be happening in Chrome. I have some content placed over the div, and when I hover over links within that div, the gradien ...

google-chromecss

Applying CSS onmousemove does not function properly in conjunction with Bootstrap framework

Currently, I have a code snippet that enables an absolutely positioned box to follow the movement of the mouse cursor: $(document).mousemove( function(e) { $(".wordbox").css({ top: "calc(" + e.pageY + "px - 0.8em)", left: e.pageX }) ...

jquerycsstwitter-bootstrap

Utilize a external API to fetch JSON data from the website and showcase it on a webpage in a asynchronous manner

<!DOCTYPE html> <html> <head> <script> src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"> </script> </head> <body> <input type="text" placeholder="Enter Your Zip Code" id="zipCode ...

htmljsonxml

Looking for a solution to align the header properly in your React app?

Struggling with aligning a header? The CSS property of the header is inherited from the app's CSS file. For example, in the image below, "Our Mission" is the header that needs to be left-aligned. Looking for some assistance here. You can find the app. ...

cssreactjs

Creating a responsive card design with Material UI

Creating a responsive card layout for mobile applications is my current challenge const styles = { edit: { width: "40%", marginLeft: 270, background: "#76ff03" }, add: { width: "100%", background: "#18ffff", size: "large" ...

cssmaterial-ui

"Learn how to dynamically change the color of a button in Angular after it has been clicked

Can someone assist me in changing the button color to red after it has been clicked? I am looking for guidance on how to achieve this. The current code snippet is as follows: <td> <button mat-icon-button color="primary"> <m ...

htmlangularangular6

What is the best way to incorporate both images and text in PHP code?

I'm currently working on creating a large image call-to-action (CTA) for my new WordPress website. I've set up a new field group with the type "group" in ACF, and added some functions in PHPStorm. However, none of my images, text, or links are ap ...

javascriptphpcsswordpressadvanced-custom-fields

How to use TypeScript to set a value in ng2-ckeditor

I have implemented two ckeditor instances using *ngFor: <div class="form-group" *ngFor="let lang of languages"> <span>Legal text in {{lang.translate}} {{lang.abbr}}</span> <ckeditor id="{{lang.abbr}}" formControlName="{{lang.abbr} ...

htmltypescriptckeditorangular2-forms

Tips for accessing values from a bs4 result set in Beautiful Soup?

Is there a way to extract all the title values from this bs4 result set? [<span class="zaman" title="16.3.2022 15:22:44">1 hf.</span>, <span class="hide zaman pull-right ml-5 mt--1">( Message Deleted )</sp ...

pythonhtmlweb-scrapingbeautifulsoup

Unable to utilize navigator.camera.getPicture in iOS while using PhoneGap Adobe Build

I've spent hours searching, trying to troubleshoot my PhoneGap app (compiled by Adobe PhoneGap Build) and I suspect there's something crucial about PhoneGap that I'm missing. I've added the following lines to the config.xml file: <f ...

javascripthtmlcordovaphonegap-build

I am trying to verify my code, but the messages are not displaying under the username. They only appear under the password field. I am not sure where I have made a mistake

Having trouble with my login form validation using jQuery. Can someone help me fix it? $(document).ready(function() { $("#form1").validate({ rules: { username: { required: true, minlength: 6 }, password: { ...

htmljquerycss

Scrolling container embedded within a parent with absolute positioning

I have encountered a tricky situation with an absolute positioned div and its nested div having overflowing content. My goal is to enable vertical scrolling for the child div, however, my attempts so far have been unsuccessful. The challenge here is that I ...

htmlcss

Showing a text value from a Github Gist on a Hugo website

I seem to be struggling with a seemingly simple task and I can't figure out what I'm missing. Any assistance would be greatly appreciated. I am working on generating a static site using Hugo. On one of my pages, I want to implement a progress ba ...

javascripthtmlhugogist

How to emphasize a portion of an expression in AngularJS using bold formatting

I have a specific goal in mind: to emphasize part of an angular expression by making it bold. To achieve this, I am working with an object obj which needs to be converted into a string str. obj = $scope.gridOptions1.api.getFilterModel(); for (var pr ...

javascripthtmlangularjsangularjs-scope

Using Angular and Typescript to Submit a Post Request

I am working on a basic Angular and Typescript page that consists of just one button and one text field. My goal is to send a POST request to a specific link containing the input from the text field. Here is my button HTML: <a class="button-size"> ...

htmlangulartypescriptfrontend

Ensure that clicking on an element closes any currently visible elements before opening a new element

Take a look at my code snippet below. I am working on creating multiple clickable divs that reveal different content when clicked. However, the issue I am facing is that currently, both content blocks can be displayed simultaneously. My goal is to have onl ...

javascripthtmljquerycss

Tips on altering the location path when redirecting to a different page using window.location?

Is it a silly question to ask? I tried looking for the answer on Google but couldn't find it. I'm currently working on a website where users can upload photos or videos, using HTML, CSS, and JavaScript. On the homepage, when a user clicks on a ...

javascripthtmlurlhttp-redirect

How to apply gradient colors to borders using CSS

Is it possible to create a simple border bottom color with a gradient effect? div{ border-bottom:10px solid linear-gradient(#FF4000, transparent); height:20px; width:auto; background:#ccc; } <div></div> ...

css

What is the method to integrate PHP with HTML code?

Apologies if this question has been asked before, but I have not found anyone with the same query as mine. I am new to HTML and PHP, and I am looking to enhance my skills by creating a registration form and storing all the data in a MySQL database using XA ...

phphtmlajax

What is the best way to add an insert button to every row?

Take a look at the image provided. When I click on any register button, the last row is being inserted instead of the desired row. What I'm aiming for is this: when I click register, the entire selected row should be stored in a separate table. Whe ...

javascriptphphtmlmysqli