How do I change the css so this doesn't take up the whole page?

I’m testing someone’s code, but it makes it display on the whole page. How/where can I change this css to just appear in a section of the page? Here’s the code:

html, body {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
  font-size: 28px;
  text-transform: uppercase;
  font-weight: 100;
  background-color:blue;
  color: #000;
  width: 50%;
  height: 50%;
  letter-spacing: 5px;
}
html .content{
  text-align: center;
  position: relative;
  top: 20%;
  -ms-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
   border:1px solid red;
}

body .content {
  text-align: center;
  position: relative;
  top: 20%;
  -ms-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
   border:1px solid red;
}

html .content span{
  width: 30px;
  display: inline-block;
}

body .content span {
  width: 30px;
  display: inline-block;
}

any help is appreciated

Change what? The font? The colors?

Regardless, that’s not how css works. Those selectors are all duplicated.

html .content and body .content will do the same thing, so one can be eliminated and can be rewritten as .content. Same for the .content span css. One can be eliminated and the other remove the body/html

I don’t think the height/width of 50% is going to work on html OR body, so I don’t know why they’re there.

1 Like

As Dave said there’s a lot wrong with that code so it’s hard to give an answer especially as that code will display like this:

You set html height to 50% and then body to 50% so now the body height will be 50% of 50% (i.e. 25%). the same applies to the width.

As Dave mentioned html .content {} is no different from body .content{} when all you needed was just .content{}.

Maybe if you can explain what you wanted to happen or put up a demo then we could help without too much guessing. As it stands your code could be reduced to this.

html,
body {
  margin: 0;
  padding: 0;
  height:100%;
}
body {
  color: #000;
  width: 50%;
  height: 50%;
  letter-spacing: 5px;
  font-family: sans-serif;
  font-size: 28px;
  text-transform: uppercase;
  font-weight: 100;
  background-color: blue;
}
.content {
  text-align: center;
  position: relative;
  top: 20%;
  transform: translateY(-50%);
  border: 1px solid red;
}
.content span {
  width: 30px;
  display: inline-block;
}

Which with some colours added looks like this.

1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.