Flexbox in FCC vs Codepen

[theunlimitedjoe]

I’m getting different results for my final HTML/CSS project. In CodePen my project looks great, but when I carry it over to FCC it doesn’t work the same.

1. I’m getting a large gap in between the rows of my flex items. The gap widens or shrinks depending on the size of the window. This doesn’t happen on CodePen.

2. When I shrink the window down to, let’s say 320px, there is not enough background color for my “projects” section. This doesn’t happen on CodePen.

I think it has something to do with 100% height of the parent container? Maybe? I’m quite sure. I’m curious to know if there is a reoccurring difference between FCC and CodePen that accounts for this sort of wonky stuff.

Any help is appreciated!

Here is my CodePen link, but of course all the problems are within FCC:
https://codepen.io/theunlimitedjoe/full/ExLmZEq

joe

[weslleyend]

I did not see differences in the gaps. Would you mind showing what you mean with screenshots?

Maybe you forgot to add something to fCC’s code that CodePen DOES NOT require you to use but fCC does?

Photos

[theunlimitedjoe]

Here’s the gap for problem (1):

Here’s the lacking background color for (2):

I copied the code from CodePen into FCC. I think you’re right, there’s something that CodePen does or doesn’t require that FCC does (or doesn’t). What that is—I’m not sure.

Thanks for asking for the screenshots. Probably should have just uploaded those upfront.

joe

[civic-coder-guy]

Try adding the Responsive Web Design - Viewport to the header .

Responsive Web Design Viewport

[theunlimitedjoe]

I thought that too, but I already had it added. Even checked to make sure I didn’t misspell something. Even copy and pasted it over to be double sure. Although, I put it in the head, not the header. Which is where it’s supposed to go, right?

[weslleyend]

Ok, so you need to add an HTML tag, and link the styles.css with <link rel="stylesheet" href="./styles.css">

I found what’s causing that gap, this:

#tiles {
  display: flex;
  flex-flow: row wrap;
  width: 100%;
  justify-content: center;
  gap: 20px;
  height: 100%;
}

If I remove the height line, the gap is removed, so yeah it has something to do with that.

The background color didn’t happen to me even when shrinking the window size.

[civic-coder-guy]

It the head, my bad. lol

[theunlimitedjoe]

Oh, my god. I just needed to delete “height: 100%”! Wow! It fixed both problems.

You know, you spend so much time working on stuff that you sometimes forget why you even had something. I knew I had been messing with the height for so long trying to get it to do something, and I guess I didn’t realize that after a certain point it was of no use, or not doing what I thought it was.

Goes to show how you just have to go everything again and again, and not make assumptions that you need any code, or that certain code is a given.

Thank you @weslleyend !