Build a Tribute Page- CSS Grid troubles

HTML-CSS
1

Tell us what’s happening:
Having trouble with my columns and media query. Figured a fresh set of eyes or more experienced ones might be able to help me troubleshoot it / tell me what dumb thing Im doing or that i forgot. I’m working in CodePen. I appreciate any help.

PS* if you can also figure out why my link at the bottom is displaying so weird, i appreciate that as well.

Your code so far


Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/70.0.3538.77 Safari/537.36.

Link to the challenge:

2 
grid-template-columns: repeat(9, 1fr);

This is dividing your grid in 9 columns with the same width. I’m not sure what you want but to make the only div take up the whole space just do that:

grid-template-columns: 1fr;

If this doesn’t help please try to explain better what you’re trying to accomplish. Also I didn’t see anything weird with your link, what’s the problem?

3

I want a two column layout] when It’s aleast 600px but just using 50% and 1fr wasn’t working. It would make the Columns but the areas wouldn’t go into the columns. and would just stay in the Left most one. I figured I’d try experimenting with making 9 Columns instead but it would still have the same problem.

4

I’ve just made the change back to the two columns again and i added background-color to my header and footer to help troubleshoot.

5

Ok. So you had a problem that your i2 div didn’t had a closing tag, so it was englobing everything below it. Also, I don’t think you should use grid-template-columns and rows with grid-template-areas in the same grid, their rules are conflicting, it should layout like grid-template-areas or like grid-template-columns? I’d pick one style and go with it.

I’ve forked your project so you can see what I did. See if it is doing what you want.

What I did:

  1. Fix the closing </div>
  2. Removed grid-template-columns and grid-auto-rows
  3. Simplify grid-template-areas

It’s best if you find your errors in your code and fix them instead of copying/paste as you know.

Let me know if this doesn’t help.

1 Like