CODEWITHSUNDEEP
htmlcsssass
tyl-er
tyl-er

Reputation: 97

Divs with same id not displaying the same height

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

Upvotes: 1

Views: 66

Answers (6)

Abdullah .F
Abdullah .F

Reputation: 57

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'>

Upvotes: 1

twekz
twekz

Reputation: 82

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.

Upvotes: 3

Fuzzyzilla
Fuzzyzilla

Reputation: 356

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.

Upvotes: 1

WahhabB
WahhabB

Reputation: 520

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.

Upvotes: 1

Scott
Scott

Reputation: 21882

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.

Upvotes: 1

Etherealm
Etherealm

Reputation: 2484

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
}

Upvotes: 1

Related Questions