Class name problem

Hello world!
So i was messing with the last grid css exercise and wanted to try some things by myself to make sure that i understood the challenge. This challenge tell you to build a grid into another grid, and when you do that you can pass it. What i wanted to do is to go a little bit beyond, and try to make 3 columns inside the 2nd grid with the last one being the “ads” column. Here’s the code:

<style>
  .container {
    font-size: 1.5em;
    min-height: 300px;
    width: 100%;
    background: LightGray;
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto 1fr auto;
    grid-gap: 10px;
    grid-template-areas:
      "advert header"
      "advert content"
      "advert footer";
  }
  .item1 {
    background: LightSkyBlue;
    grid-area: header;
  }

  .item2 {
    background: LightSalmon;
    grid-area: advert;
  }

  .item3 {
    background: PaleTurquoise;
    grid-area: content;
    display: grid;
    grid-template-columns: 1fr 1fr 60px;
    grid-template-areas:
    "paragraph1 paragraph2 adv"



  }

  .item4 {
    background: lightpink;
    grid-area: footer;
  }

  .itemOne {
    background: PaleGreen;
    grid-area: paragraph1;


  }

  .itemTwo {
    background: BlanchedAlmond;
    grid-area: paragraph2;
  
  

  }
  .itemthree {
    background: red;
    grid-area: adv;



     }

</style>

<div class="container">
  <div class="item1">header</div>
  <div class="item2">advert</div>
  <div class="item3">
    <div class="itemOne">paragraph1</div>
    <div class="itemTwo">paragraph2</div>
    <div class="itemthree"> ads </div>
  </div>
  <div class="item4">footer</div>
</div>

As you guys can see, there’s a 3rd column called “ads”. Yey! But this was my second attempt.
The first one instead of the class name “itemthree” i put “advertising2”. For my surprise it didn’t work. So, is there anything wrong with the “advertising2” class name? Why it wont work? Is there any rule for class names that i broke?
Here’s the code of the “broken” code:

<style>
  .container {
    font-size: 1.5em;
    min-height: 300px;
    width: 100%;
    background: LightGray;
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto 1fr auto;
    grid-gap: 10px;
    grid-template-areas:
      "advert header"
      "advert content"
      "advert footer";
  }
  .item1 {
    background: LightSkyBlue;
    grid-area: header;
  }

  .item2 {
    background: LightSalmon;
    grid-area: advert;
  }

  .item3 {
    background: PaleTurquoise;
    grid-area: content;
    display: grid;
    grid-template-columns: 1fr 1fr 60px;
    grid-template-areas:
    "paragraph1 paragraph2 adv"



  }

  .item4 {
    background: lightpink;
    grid-area: footer;
  }

  .itemOne {
    background: PaleGreen;
    grid-area: paragraph1;


  }

  .itemTwo {
    background: BlanchedAlmond;
    grid-area: paragraph2;
  
  

  }
  .advertising2 {
    background: red;
    grid-area: adv;



     }

</style>

<div class="container">
  <div class="item1">header</div>
  <div class="item2">advert</div>
  <div class="item3">
    <div class="itemOne">paragraph1</div>
    <div class="itemTwo">paragraph2</div>
    <div class="advertising2"> ads </div>
  </div>
  <div class="item4">footer</div>
</div>

Thank you very much guys and have a nice day!

I think it might be broken because of the missing semicolon :wink:

1 Like

Just an FYI, if you have an ad block extension installed it may block the element with that class name.

So… i put the missing semi-colon but nothing changed.
And the reason for not appearing was the one that @lasjorg said, the ad block extension was somehow cutting it. So, yea, try not to put class names with the word “advertising” or it will be detected as an actual ad lol
So that’s it, thank you guys!

1 Like

I have a separate browser instance I use for development that does not have any of these types of extensions added. I suggest you also use a “clean” browser to do your work in so you don’t run into these types of issues.

1 Like

^That is a good suggestion. Have a clean browser to test on.

However, the opposite is also true. If you do not test with common extensions like ad blockers you might not find such issues with your code. I often find random issues stemming from privacy and other such related extensions. Sometimes you can fix them, somethings not.

2 Likes