Please help! I'm having nesting issues in CSS

It’s my understanding that if elements are nested within other elements in HTML you can nest them in CSS. However, when I include an element within another element it reads it as an attribute to the original element. For example, I’m trying to format an that’s nested within <class=logo> in the html, but it’s not registering as it’s own element under .logo . Any feedback as to what I’m doing wrong is greatly appreciated!
Here’s the current fcc project I’m working on: https://codepen.io/spookiedookie/pen/mjReMd

You didn’t give us a correct link

https://codepen.io/spookiedookie/pen/mjReMd

header{
  position: fixed;
  top: 0;
  min-height: 75px;
  padding: 0px 20px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  background-color: #eee;
  @media (max-width: 600px) {
    flex-wrap: wrap;
    }
  }

This is incorrect. CSS does not accept nesting the way HTML does.

Media Queries do accept nesting so that when their conditions trigger the code changes. But you can’t do what you did above. The media query goes on it’s own line, and the code you want to change (the css elements go in it:

header{
  position: fixed;
  top: 0;
  min-height: 75px;
  padding: 0px 20px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  background-color: #eee;
  }

  @media (max-width: 600px) {
header {
flex-wrap: wrap;
}
}
1 Like

media queries do not accept the same attributes either. This is incorrect:

 @media (max-width: 650px) {
    margin-top: 15px;
    width: 100%;
    position: relative;
    }

You must redefine what this applies to:

 @media (max-width: 650px) {
    h1 {margin-top: 15px;
    width: 100%;
    position: relative;
    }
}

That would be correct.

1 Like

Thanks! I’m pretty new and wasn’t aware that the file I was referencing for my codepen project was using SCSS which appears to enable nesting. Oops.

SCSS is tricky that way :smiley:

I’m not a big fan of it. Especially as CSS expands. SCSS variables are the only good thing imo. Honestly now that CSS has variables…I’m even less inclined to use SCSS:

https://caniuse.com/#feat=css-variables

1 Like

You mean 648px for max-width as there is no display having a viewport width of 650px. :sunglasses:

I just copied the code that was used.

Aaaand actually viewport can also mean window and viewing area size which can vary way more than mobile devices. In Email dev we use a ton of odd sizes for veiwports that a web dev doesn’t need to consider.

TMY

2 Likes

I know what you mean. I was just kidding. Years ago, I was also doing email marketing newsletters and i know how difficult it is to make the email look right(read it as catch attention) when you first open it.