CODEWITHSUNDEEP
htmlcsscss-grid
IIlIll IIIlII
IIlIll IIIlII

Reputation: 51

How to get grid area to apply to class?

I've been trying to position a logo in the second column of a grid I made for the banner of a website, however no matter how I position it or what args I give "grid-area:" it stays in the first column. What is the reason for this?

HTML file:

<html>
    <head>
        <title>Random Company</title>
        <link rel="shortcut icon" type="image/x-icon" 
href="./photos/favicon.ico" />
        <link href="mainstyle.css" rel="stylesheet" />
    </head>

    <body>
        <div class="banner">
            <div class="logo"><img src="./photos/logo2.png"/></div>

        </div>
    </body>
</html>

CSS file:

body {
    margin: 0;
}

.banner {
    display: grid;
    height: 140px;
    width: 100%;
    grid-template: 100% / 10% 10% 60% 20%;
    background-color: #e8d0a9;
    justify-items: center;
    align-items: center;
}


.logo img{
    position: relative;
    grid-area: 1 / 2 / span 1 / span 1;
    height: 80%;
    width: auto;
}

Upvotes: 0

Views: 53

Answers (1)

Shtut
Shtut

Reputation: 1407

Your selector is wrong, instead of .logo img try just .logo .logo img means that the object you're referring to is both of class logo and is of type img, while in your html they're nested.

body {
    margin: 0;
}

.banner {
    display: grid;
    height: 140px;
    width: 100%;
    grid-template: 100% / 10% 10% 60% 20%;
    background-color: #e8d0a9;
    justify-items: center;
    align-items: center;
}


.logo{
    position: relative;
    grid-area: 1 / 2 / span 1 / span 1;
    height: 80%;
    width: auto;
    background-color:red
}
<html>
    <head>
        <title>Random Company</title>
        <link rel="shortcut icon" type="image/x-icon" 
href="./photos/favicon.ico" />
        <link href="mainstyle.css" rel="stylesheet" />
    </head>

    <body>
        <div class="banner">
            <div class="logo"><img src="./photos/logo2.png"/></div>

        </div>
    </body>
</html>

Upvotes: 1

Related Questions