Image centering with CSS grid and Proper SEO

I am a little confused about getting my “logo image” centered in the top left two grid areas (logo) for tablet landscape and larger. Below is a screen shot from FF showing the grid.

Here is an image of how I want the site to look:

The site is built in Gatsby.js, uses SCSS, and is deployed to Netlify. I was trying to figure out how to get the .html and .css file from the /public folder to post here, but am out of time on my lunch.

The site is here. You can see the CSS and HTML using your favorite web inspector.
https://happy-goldstine-ae6cb9.netlify.com/

The Github repo is here for people that know Gatsby & SCSS: https://github.com/jastuccio/astuccio-2019-gatsby/tree/master/src

Also wondering about the image wrapped in the H1. I probably dont need to worry about SEO for my low traffic site, but I like to do every thing the best way possible.

Thank you

Is it that you want the words to flow down to a different line when at a smaller pixel dimension? You might want to wrap each word or letter in their own div.

You need to move the grid properties up to the cover__logo-container, it is the grid item, not the image. You will have to make some adjustments to the image size.

@media only screen and (min-width: 50em) {
    .cover__logo-container {
        grid-area: logo;
        align-self: center;
    }
}
2 Likes

Thank you. My images may be a little confusing. I am trying to center an image in 2 grid columns.

Again, your image is not a grid item. Only the direct children of the grid container are grid items. Non of the grid properties you have on .cover__logo does anything.

I moved the .cover__logo-container to the h1, fixed the css, and got things working! Thank you lasjorg!