Increase the size of the shield

Navigation
0

I'm having trouble making the shell fill up to the bottom of the page. How do I do this? 

.circle {
  margin: auto;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #3c404f;
  background: linear-gradient(to right, var(--color1), var(--color2), var(--color1));
}

#circle1 {
  width: 256px;
  height: 256px;
  --color1: red;
  --color2: #C10101;
}

#circle2 {
  width: 206px;
  height: 206px;
  --color1: white;
  --color2: white;
}

#circle3 {
  width: 156px;
  height: 156px;
  --color1: red;
  --color2: #C10101;
}

#circle4 {
  width: 106px;
  height: 106px;
  --color1: blue;
  --color2: #02264D;
}

#star {
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 35px solid white;
  transform: rotate(180DEG);
}

#star:before {
  position: absolute;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 35px solid white;
  transform: rotate(70DEG);
  content: "";
  left: -50px;
}

#star:after {
  position: absolute;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 35px solid white;
  transform: rotate(-70DEG);
  content: "";
  left: -48.8px;
  top: 0.1px;
}
<div id="circle1" class="circle">
  <div id="circle2" class="circle">
    <div id="circle3" class="circle">
      <div id="circle4" class="circle">
        <div id="star">
        </div>
      </div>
    </div>
  </div>
</div>
    
asked by anonymous 30.05.2018 / 18:23

1 answer

1

You can use VMIN instead of pixels. So the size will be set equal to the smallest screen size. In the case in the PC would be the height of the screen, and in the cellular standing would be the width.

This way the shield will always occupy the entire screen and will not be cut.

For example: 

.circle1{
     width: 100vmin;
     height: 100vmin;
}
.cicle2{
     width: 96vmin;
     height: 96vmin;
}

I used the values as an example, but for your shield you will have to calculate in percentage. 100vmin = 100% of the smallest screen size.

I hope I have helped.

    
30.05.2018 / 18:36
Adding grouped total sum to a new DataFrame pyspark column Connection class mysqli in php and SELECT [duplicate]