Started doing a tribute page and I cannot for the life of me get the image to go under the title. I would post a link but the forum wont allow it.
Basically I tried to use CSS grid as follows
#title {grid-area: header;}
#img-div {grid-area: right;}
#tribute-info {grid-area: main;}
#footer {grid-area: footer;}
#main {
display: grid;
grid-template-areas:
'header header'
'main right'
'footer footer';
}
#title {
display: flex;
flex-direction: column;
width: 100vw;
justify-content: center;
align-content: center;
}
The image will not go under the header though, its on the right (off the page).
You could post your link like this: codepen .io/etc
Ahh right. I didn’t want to break any rules so I just left it off
codepen .io/Addleton/pen/dLdBVJ
The image currently links to a flower because the image I was using was a broken link. Also no content because I was trying to get the hang of flex/grid.
The #title
element is not a direct child of the grid, so assigning it the grid-area
is kind of useless. Try assigning the header grid-area to the <header>
element instead.
A bit off-topic, but the <body>
tag should be before the <div id="main">
tag. Likewise, the </body>
tag should be after the last </div>
tag.
Thank you so much. Seems to be working now.
Also fixed the body tags.