How would I shrink this to 600x200?

HTML-CSS
1

Would I be setting width and height to body?

Code: https://jsfiddle.net/9mrvj76L/

#holder {
  width: 1500px;
  height: 500px;
  box-shadow: inset 0 0 0 3px #e77d19;
  position: relative;
  background-color: black;
}

.hvcentered {
  width: 232px;
  height: 232px;
  background-color: #00a0b0;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
}

<div id="holder">
  <div class="hvcentered">
  </div>
</div>

I tried this:

Code: https://jsfiddle.net/xt4yL192/

.content {
  width: 600px;
  height: 200px;
}

#holder {
  width: 1500px;
  height: 500px;
  box-shadow: inset 0 0 0 3px #e77d19;
  position: relative;
  background-color: black;
}

.hvcentered {
  width: 232px;
  height: 232px;
  background-color: #00a0b0;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
}

<div class="content">
<div id="holder">
  <div class="hvcentered">
  </div>
</div>
</div>
2

with a children element having a set width/height such as in your case, having height/width constraint in the parent will do nothing to resize its children.

if you want .content as a wrapper with height:600px and width:200px then you can set #holder to have height:100% and width:100%.
Otherwise modify #holder directly to have height:600px and width:200px

3

That didn’t work.

Code: https://jsfiddle.net/mo90rwb7/

4

it works on my screen. you sure you pressed run on the top left?

5

I got it, thanks…

6

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