1

I have 5 div all with the class #content with this styling

#content, .ready, .contact
        height: 100vh

but only the first three display correctly. Also, I'm still learning Sass so not sure if I'm just making a syntax error.

https://codepen.io/tyl-er/pen/RggGEE

Panup Pong
  • 1,871
  • 2
  • 22
  • 44
tyl-er
  • 97
  • 1
  • 3
  • 12
  • Use a **class** of `content` instead of ID, and update your CSS to reference `.content` instead of `#content`. – Obsidian Age Jun 26 '17 at 22:43
  • Possible duplicate of [difference between using MULTIPLE 'id' and 'class' attributes in HTML and CSS](https://stackoverflow.com/questions/9850053/difference-between-using-multiple-id-and-class-attributes-in-html-and-css) – Obsidian Age Jun 26 '17 at 22:46
  • 1
    Having multiple identical ids in your markup is not valid, but will not stop CSS from applying to all instances. Most likely, the cause of your problem is related to something you haven't yet revealed. – tao Jun 26 '17 at 22:46
  • @andrei yeah you were on the right track. The two divs were not nested properly – tyl-er Jun 26 '17 at 23:16

6 Answers6

3

IDs must be unique in HTML.

=> Replace #content with .content in your SASS and id="content" with class="content" in your HTML.

Extra feedback on your code:

  • If you use IDs in your CSS/SCSS, you don't need to nest them in their parent.
  • Use <p>...</p> for your text, rather than <h5>...</h5>, it doesn't make any sense semantically.
twekz
  • 82
  • 5
  • Thanks for the answer and the feedback. I was actually making an additional mistake by not properly nesting the two divs in question. I think that was the bigger problem. – tyl-er Jun 26 '17 at 23:14
  • 1
    @tyl-er A couple tips regarding nesting: **1/ AVOID NESTING IF YOU CAN**! Use specific classes instead. And if you can't, don't go further than one level of nesting, otherwise you won't be able to override rules easily. **2/ USE BRACKETS ;)**: with the proper editor/IDE, they're much easier to read and debug than indentations – twekz Jun 27 '17 at 10:10
1

In css, Classes are denoted by a dot (.) or period. ID is denoted by #.

Id should be unique.

Your class name should be content ( in html) and you can access it in sass as 

.content{
// Enter styles here
}
Etherealm
  • 2,234
  • 3
  • 18
  • 34
1

IDs must be unique. You can't have multiple elements with the same ID. Use a class if you need to refer to multiple elements.

Scott
  • 21,475
  • 8
  • 43
  • 55
1

You are only allowed to have a single item on a page with a given id. So you should be using a class, not an id, for content.

WahhabB
  • 520
  • 3
  • 8
1

The issue here is you are using multiple elements with the same ID. In HTML, each ID must be unique.

Instead, try a class with the name of content, and use .content to address it in CSS.

Fuzzyzilla
  • 356
  • 4
  • 15
1

In CSS classes start with (.)

you are using both class and ID for this div

<div class="strategy" id='content'>

Choose one of them as class for example:

<div class='content'>
Abdullah .F
  • 47
  • 7