The CSS grid functionality seems to be malfunctioning on a specific page, yet it operates perfectly on other

I'm currently working on my Portfolio application, but I'm facing an issue on the home page where the grid layout is not functioning properly. The different div tags are overlapping each other instead of displaying correctly.

https://i.sstatic.net/6ilnY.png

Oddly enough, the grid works perfectly on my portfolio page.

Code:-
JS Part

function HomePG(){
    return(
        <div className="homePGMain">
            <div className="BGpant">
                <div className="TopHead">
                    <h1>
                            Hi There,<br/>
                            Sukarna Jana<br/>
                            /* kept repeating */
                            ...
                            ...
                    </h1>
                </div>
            </div>
            <div className="demo">
                <h1>
                    Hi There,<br/>
                    Sukarna Jana<br/>
                    /* kept repeating */
                        ...
                        ...
                </h1>
                </div>
        </div>
    )
}

CSS Part

*{
    margin: 0;
    padding: 0;
}
.homePGMain{
    display:grid;
    grid-template-rows: auto;
    grid-row-gap: 45px;
    width: 100%;
    height: 100%;
    justify-items: center;
    justify-content: center;
    align-items: center;
    justify-self: center;
}
.BGpant{
    display:grid;
    display: flex;
    background-image: linear-gradient(to right, rgb(0, 255, 255) , rgb(71, 38, 255));
    width: 100%;
    position: absolute;
    justify-items: center;
    justify-content: center;
}
// ... ///
.demo{
    display:grid;
    position: absolute;
    display: grid;
}

The complete code is available on Github

Answer №1

To resolve the issue of overlapping elements, it is recommended to eliminate the position: absolute; property from both .BGpant and .demo. These elements are currently positioned absolutely as siblings, causing the overlap. Even though their parent element utilizes display: grid;, they are not being properly laid out by the grid due to their absolute positioning.

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

Efficient method to update the state of a result in React JS using hooks within an asynchronous function and useState

How can I ensure the state is updated correctly after using setState? I found a code example similar to mine at Why react hook value is not updated in async function?, but it doesn't provide a solution to the problem. Any help would be greatly appreci ...

Vue-loader component experiencing issues with applying dynamic CSS styling

I'm working with a Vue Component and I want to enhance it by binding a color to a specific message. Initially, I attempted to achieve this using a binding like :style="styles" However, I encountered the following error: The property or method "st ...

Hiding column headers in a Material UI table can be achieved by customizing

I am dealing with a set of material ui table headers const columns = [ { id: 'id', label: 'ID', hide: true}, { id: 'username', label: 'User Name', }, { id: 'fullname', label: 'Full Name&apo ...

Implement a hover effect on a specific class targeting a nested element using JavaScript

Is there a method to apply a class that modifies rules for a child element using Javascript? I have successfully added it with CSS but am struggling to do the same with Javascript. Removing the class in JS is easy by referencing the classname before the ho ...

Outlook for Windows automatically sets the default font for HTML emails to Times New Roman

My email design looks great in Mac Outlook, but Windows Outlook is changing the font to Times New Roman. Below is the code for the email template. Can someone help me figure out what I'm missing? <style style="-ms-text-size-adjust: 100%;&q ...

Tips for enhancing the clarity of elements in KineticJS

I'm new to using Kinetic JS, and while I think it's a great library, I'm having trouble with the resolution of the elements. I know that Kinetic JS doesn't use SVG, but the resolution is not up to par. I'm creating circles and othe ...

Determining if a component is nested within itself in Angular 6 is a crucial task

My goal is to develop a custom Angular component for a nested navigation menu with multiple levels. Below is an example of how the menu structure looks: app.component.html <nav-menu> <nav-menu-item>Section 1</nav-menu-item> <nav- ...

What could be the reason for encountering the error "logic is not defined" in this particular

Having recently started learning JS and React, I encountered an error that stated: "logic is not defined". class Keyboard extends React.Component { logic() { return false; } render() { return ( <div> <h1>{log ...

Utilizing the :after pseudo-element for placing text in a specific location

Here's the code I'm working with: div#myImg{ background: url('myimage.png') left top no-repeat; } div#myImg:after{ content: 'TEXT UNDER IMAGE'; margin:0 auto; vertical-align:text-b ...

React Chart.js allows for consistent spacing for x-axes by displaying dates in a well-organized

After incorporating displayFormats in scales.x, I noticed that my xAxes labels are spaced differently based on the data object they contain. How can I adjust my xAxes labels to have equal spacing? The code snippet is displayed in the following image. Pleas ...

Are you currently utilizing React Material-UI in your operations? If so, what are the reasons behind your decision

Could you share the motivations behind your decision to utilize Material-ui for React web applications at your company? I'm interested in hearing both why you chose to use it and why you may have decided against it. ...

Switch up the placement of articles, going back and forth between left

On the page, I want to display articles with alternating positions - one on the left, the next on the right. In this example, all the articles are currently being displayed twice, both on the left and the right side. How can I ensure that only one instanc ...

Having trouble uploading an image to firebase storage as I continuously encounter the error message: Unable to access property 'name' of undefined

Hey there, I'm currently facing an issue while trying to upload an image to Firebase storage. Despite following all the instructions on the official Firebase site, I'm stuck trying to resolve this error: Uncaught TypeError: Cannot read property ...

How to adjust the background picture opacity in HTML

Is it possible to adjust the transparency of a background image in HTML? I came across one solution that involved adding a box on top of the background picture and changing the opacity of the box, which in turn changed the opacity of the background pictur ...

Picture not showing up when loading iPhone video

My website features a video that is displayed using the following code: <div class="gl-bot-left"> <video controls=""> <source src="https://www.sustainablewestonma.org/wp-content/uploads/2019/09/video.fixgasleaks.mp4" ...

Ensure that the width of the sibling div matches the width of its sibling image

I need help displaying an image with two buttons positioned below it. The dimensions of the image can vary, so I've set a max-width of 60% and max-height of 80%. However, I'm struggling to align the buttons correctly under the image - with the le ...

The divs are crashing into each other and moving at varying speeds

I have created a mini game inspired by diep.io on codepen, where you can upgrade your reload and shooting capabilities. However, I have encountered an issue where the bullets start moving at different speeds and end up overlapping each other after shooting ...

Iterate through the JSON object and assign the value of the first object as the current state

I've structured my code as shown below: renderDiagnosisCodeValue(){ return _.map(this.state.diagnosisData && this.state.diagnosisData, diagnosisValues => { this.setState({ diagnosisReturnedValue: diagnosisValues[0].di ...

Displaying the total count of slides available on the webpage

Check out the custom slider I created on this codepen page: http://codepen.io/anon/pen/NqQpjG I have added an additional feature that tracks the total number of slides that have been moved. For instance, if there are a total of 8 slides, the initial va ...

Refresh customer information on database modification

Currently working on my inaugural SaaS B2C application with the technology stack of ReactJS + Relay + GraphQL + MongoDb. To provide context, the application will incorporate various objects, such as: User Customer StockItem StockLevel PriceList Sales Ret ...