Personal News Article Project: CSS Grid Help?

[QueenOfElves]

So far making the article hasn’t been too challenging, but introducing CSS Grid into the mix has made things difficult. Here’s some of the problems I’m stumped on:

1. When screen width is over 800px the image, figcaption, and text sit side by side, like so
   
   
   
   When the screen width is 800px or less, the photo and figcaption should go underneath the text, but it’s doing an odd layering thing that wasn’t happening when I first implemented the feature. It looks like this
   
   
   
   I thought it might be because I set position: absolute; for the figcaption to sit right under the photo, but when I deleted that feature nothing changed.
   Here’s the code for this segment:

.screenshot-grid {
    display: grid;
    grid-template-columns: 45% 65%;
    grid-template-rows: 90% 10%;
}

#screenshot {
    width: 313px;
    height: 182px;
    grid-column: 2 / 3;
    grid-row: 1 / 2;
}

@media (max-width: 800px) {
    .screenshot-grid {
        grid-template-columns: auto;
    }
}

figcaption {
    text-align: center;
    grid-column: 2 / 3;
    position: absolute;
}

2. The comment section is all wonky. The original webpage that I’m recreating looks like this:
   
   
   
   But mine is currently like this:
   
   Jon’s name won’t move to the top of its container, and John’s name won’t move to the left (I tried align-self and justify-self, no dice there). The 1st comment doesn’t have a border, but the 2nd one’s border-top is cut off by the avatar. Lastly, when hovering over the reply button, it’s text is meant to turn blue and have a light gray background surrounding just the text, but the background color now spans the entire container, which wasn’t happening before (couldn’t get a screenshot of this). Here’s the code for this segment (if it’s messy it’s because I’m a beginner and punching above my weight with this project):

/* Comments */
.comment1, .comment2 {
    display: grid;
    grid-template-columns: 20% 80%;
    grid-template-rows: repeat(4, auto);
}

.comment {
    font-size: 15px;
    font-family: "Libre Franklin", sans-serif;
    grid-column: 2 / 3;
    grid-row: 3 / 4;
}

.commenter-avatar {
    width: 56px;
    grid-row: 1 / 2;
}

.commenter {
    grid-column: 2 / 3;
    grid-row: 1 / 2;
}

.comment-date {
    grid-column: 2 / 3;
    grid-row: 3 / 4;
}

.comment-date:hover {
    color: blue;
}

.reply {
    font-size: 0.8em;
    font-family: "Merriweather", serif;
    font-style: italic;
    color: black;
    grid-column: 2 / 3;
    grid-row: 4 / 5;
}

.reply:hover {
    color: rgb(38, 106, 207);
    background-color: var(--border-color);
}

.leave-a-reply {
    font-size: 26px;
    font-family: "Merriweather", serif;
    font-style: italic;
    font-weight: bold;
}

input {
    box-shadow: inset 1px 1px 3px 1px var(--border-color);
}

Please give me any tips you can!

[hbar1st]

if you have a codepen or some place where the code is live, this will encourage people to comment and fork your code and play with it…

[QueenOfElves]

I don’t have anything like that, I just used VSCode

[QueenOfElves]

Update: I can fix the Reply button problem if I change the grid-column-template to 20% 10% 70%, but then John’s name is weird. I find this change preferable to how it was before, but if you know a way to fix the issue entirely that’d be great

This is how it looks now, and this is the code

    display: grid;
    grid-template-columns: 20% 10% 70%;
    grid-template-rows: auto-fill;
}

.comment {
    font-size: 15px;
    font-family: "Libre Franklin", sans-serif;
    grid-column: 2 / 4;
    grid-row: 3 / 4;
}

.commenter-avatar {
    width: 56px;
    grid-row: 1 / 2;
}

.commenter {
    grid-row: 1 / 2;
    grid-column: 2 / 3;
}

.comment-date {
    grid-column: 2 / 4;
    grid-row: 3 / 4;
}

.comment-date:hover {
    color: blue;
}

.reply {
    font-size: 0.8em;
    font-family: "Merriweather", serif;
    font-style: italic;
    color: black;
    grid-column: 2 / 3;
    grid-row: 4 / 5;
}

.reply:hover {
    color: rgb(38, 106, 207);
    background-color: var(--border-color);
}```

[lasjorg]

We need to see all the code, all the HTML and CSS. As said, please put it on Codepen so we do not have to create it ourselves.

[QueenOfElves]

Nvm I figured it out myself finally. Thanks for the tip though!