CODEWITHSUNDEEP
htmlcss
Ricky
Ricky

Reputation: 791

Why does my content not display?

Really unsure as to why my HTML content is not displaying inside the divs.

Everything looks correct, It is just not displaying the content.

Here is a snippet:

main {
    width: 100%;
    height: 100vh;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    font-size: 0; /* Removes White space */
}
header {
    width: 100%;
    height: 18vh;
    background-color: orange;
    font-size: 1.8em;
}
aside {
    width: 20%;
    height: 82vh;
    background-color: orange;
    margin: 0 auto;  
    font-size: 1.2em; 
}
section {
    width: 80%;
    height: 82vh;
    background-color: darkgrey;
    margin: 0 auto;   
    box-shadow: 5px 5px 5px inset; 
    font-size: 1.2em;
}
<main id="content">

			<header>
				<h1>Just a random Header</h1>
			</header>

			<aside>
				<p>Just alot of Random Text, Just alot of Random Text, Just alot of Random Text, Just alot of Random Text, Just alot of Random Text</p> 
			</aside>
			
			<section>
				<p>Just alot of Random Text, Just alot of Random Text, Just alot of Random Text, Just alot of Random Text, Just alot of Random Text</p>
				<p>Just alot of Random Text, Just alot of Random Text, Just alot of Random Text, Just alot of Random Text, Just alot of Random Text</p>
				<p>Just alot of Random Text, Just alot of Random Text, Just alot of Random Text, Just alot of Random Text, Just alot of Random Text</p>
				<p>Just alot of Random Text, Just alot of Random Text, Just alot of Random Text, Just alot of Random Text, Just alot of Random Text</p>
			</section>

		</main>

Any ideas on how to solve this? It would be really great if my content displayed

Upvotes: 1

Views: 151

Answers (4)

Paulie_D
Paulie_D

Reputation: 115045

Because you have set font-size: 0; on the parent wrapper and haven't reset it for the child divs.

So, when using em (which is a proportinal value based on the parent's font size) 1.8em would still be 0 because 1.8 x 0 is still 0.

It's not necessary when using flexbox anyway. Just remove it.

* {
  margin: 0;
  padding: 0;
}
main {
  width: 100%;
  min-height: 100vh;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
header {
  width: 100%;
  height: 18vh;
  background-color: orange;
}
aside {
  width: 20%;
  height: 82vh;
  background-color: orange;
}
section {
  width: 80%;
  height: 82vh;
  background-color: darkgrey;
  box-shadow: 5px 5px 5px inset;
}
<main id="content">

  <header>
    <h1>Just a random Header</h1>
  </header>

  <aside>
    <p>Just alot of Random Text, Just alot of Random Text, Just alot of Random Text, Just alot of Random Text, Just alot of Random Text</p>
  </aside>

  <section>
    <p>Just alot of Random Text, Just alot of Random Text, Just alot of Random Text, Just alot of Random Text, Just alot of Random Text</p>
    <p>Just alot of Random Text, Just alot of Random Text, Just alot of Random Text, Just alot of Random Text, Just alot of Random Text</p>
    <p>Just alot of Random Text, Just alot of Random Text, Just alot of Random Text, Just alot of Random Text, Just alot of Random Text</p>
    <p>Just alot of Random Text, Just alot of Random Text, Just alot of Random Text, Just alot of Random Text, Just alot of Random Text</p>
  </section>

</main>

Upvotes: 2

Elizabeth Fine
Elizabeth Fine

Reputation: 150

The problem is that you set the font size to 0 in .main. In the rest of the code, you are using ems.

The problem is that em units are calculated based on the containing element's font size. From then on, 1 em = 1 unit of the containing elements font size. So since you've set the containing elements font size to 0, then no matter what you set it to in the other elements, it will always stay at 0, thus not displaying your text.

Try changing the .main font size to 12px.

Upvotes: 0

Justinas
Justinas

Reputation: 43481

It's because you are using em as units. And em means # times of current font size and your current font size is set on .main {font-size: 0}

main {
  width: 100%;
  height: 100vh;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  font-size: 0;
  /* Removes White space */
}
header {
  width: 100%;
  height: 18vh;
  background-color: orange;
  font-size: 18px;
}
aside {
  width: 20%;
  height: 82vh;
  background-color: orange;
  margin: 0 auto;
  font-size: 16px;
}
section {
  width: 80%;
  height: 82vh;
  background-color: darkgrey;
  margin: 0 auto;
  box-shadow: 5px 5px 5px inset;
  font-size: 16px;
}
<main id="content">

  <header>
    <h1>Just a random Header</h1>
  </header>

  <aside>
    <p>Just alot of Random Text, Just alot of Random Text, Just alot of Random Text, Just alot of Random Text, Just alot of Random Text</p>
  </aside>

  <section>
    <p>Just alot of Random Text, Just alot of Random Text, Just alot of Random Text, Just alot of Random Text, Just alot of Random Text</p>
    <p>Just alot of Random Text, Just alot of Random Text, Just alot of Random Text, Just alot of Random Text, Just alot of Random Text</p>
    <p>Just alot of Random Text, Just alot of Random Text, Just alot of Random Text, Just alot of Random Text, Just alot of Random Text</p>
    <p>Just alot of Random Text, Just alot of Random Text, Just alot of Random Text, Just alot of Random Text, Just alot of Random Text</p>
  </section>

</main>

Upvotes: 0

Richa
Richa

Reputation: 4270

I don't know why but main's font-size is getting more weightage than section. 

main {
    width: 100%;
    height: 100vh;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    /*font-size: 0;  Removes White space */
}
header {
    width: 100%;
    height: 18vh;
    background-color: orange;
    font-size: 1.8em;
}
aside {
    width: 20%;
    height: 82vh;
    background-color: orange;
    margin: 0 auto;  
    font-size: 1.2em; 
}
section {
    width: 80%;
    height: 82vh;
    background-color: darkgrey;
    margin: 0 auto;   
    box-shadow: 5px 5px 5px inset; 
    font-size: 1.2em;
}
<main id="content">

			<header>
				<h1>Just a random Header</h1>
			</header>

			<aside>
				<p>Just alot of Random Text, Just alot of Random Text, Just alot of Random Text, Just alot of Random Text, Just alot of Random Text</p> 
			</aside>
			
			<section>
				<p>Just alot of Random Text, Just alot of Random Text, Just alot of Random Text, Just alot of Random Text, Just alot of Random Text</p>
				<p>Just alot of Random Text, Just alot of Random Text, Just alot of Random Text, Just alot of Random Text, Just alot of Random Text</p>
				<p>Just alot of Random Text, Just alot of Random Text, Just alot of Random Text, Just alot of Random Text, Just alot of Random Text</p>
				<p>Just alot of Random Text, Just alot of Random Text, Just alot of Random Text, Just alot of Random Text, Just alot of Random Text</p>
			</section>

		</main>

Upvotes: 0

Related Questions