Codepen looking different than my website?

HTML & CSS
1

1)The box sizes look different, using the same code. why?

image
image601×502 21.8 KB

image
image465×582 13.9 KB

image

image
image1287×611 29.9 KB

2)also, Why can’t I make the website smaller? the guy teaching flexbox can make it smaller and the boxes get adjusted relative to size of website.

image
image1355×703 109 KB

This is the max I can go with making it small. why?

2

Hi,

You’ve got a typo in your HTML code. The third box has a FLex3 class instead of Flex3

you should use only lowercase for all your css classes & ids, that’s a better practice.

1 Like
3

Like gillesmigliori said, the difference is the spelling of Flex3. CSS is case sensitive to flex3 is not Flex3 which is not FLex3.

While lowercase is not necessarily “best practice”, it does help for consistency sake if everything is all lowercase or all uppercase. I personally prefer all lower case, but I’ve never seen a best practice for css which requires it.

1 Like
4

If anything, it will avoid occurrences like this.

1 Like
5

will do

6

and holy damn, one mistake can ruin your whole code. I’ll def use lower case only, because I wasted so much time on problems like that.

7

Can you answer the 2nd question if you can.

8

Define “make the website smaller”

The flex box width is hard coded, and so are the heights (essentially). You’ve set a min-height on all three, which means they’ll remain that size unless you have more content to make them taller.

.FlexBox-Item{
    width: 100px;
// snip
:
.Flex1{
    min-height: 100px;
}

.Flex2{
    min-height: 200px;
}

.Flex3{
    min-height: 300px;
}

If you want to see the boxes change size, add a height to .Flex-item to force them to change. If you want to see dynamic changes, set it something odd like height: 20vw which is counter-intuitive because vw is viewport width. Then, if you make the browser window wider, the boxes will grow. If you make the browser window wider, they’ll shrink until the min-heights are hit.

But typically, it’s a bad idea to put heights on containers that have content on them because you want the container to grow to hold all the content.

9

I did vw height and didn’t do anything to the shrinkage of the website.

skip to 5:22 to see what I mean by making the website smaller. he shrank the website and the boxes adapted to it.

10

His 3 elements are 200ox wide but he has closed his screen smaller than 600px and they have gotten smaller.

If I set your codepen elements to 500px wide and remove the flex wrap then they still fit on my 375px iPhone.

image
image750×1334 117 KB

I’m guessing you just didn’t close your window enough to make them squash.

11

To my knowledge, there is no universally recognized standard for CSS naming. Still, at least the BEM is probably the most recognized one, and it recommends lowercase Latin Letters and hyphens.

Here’s an excellent article on Freecodecamp: https://www.freecodecamp.org/news/css-naming-conventions-that-will-save-you-hours-of-debugging-35cea737d849/

1 Like
12

I’m not a huge fan of BEM myself. Seems like overkill, especially with all the underscores - it can get unwieldly quickly. The couple times I’ve worked with systems using BEM, there ended up being duplication of styles because the same styling would be put into different areas, so you had div1__style1, div2__style1 which were exactly the same, when style1 could have been used for both.

But the underlying concepts I can get behind

  • be consistent - always follow the same pattern.
  • be descriptive (what the thing is, not how it should look like)

Personally I prefer camelCase across ALL platforms - both front end and back end. I find using this for all variables (which essentially class/ID names are) makes them easy to identify. But that’s just my opinion…

13

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.