2

enter image description here

Hi,

See the screenshot, I'd like to know how I can fit my simple countdcown to always take 100% of the screen? I've made it to fit my phone, but Id like it to be 100% on the desktop aswell.

What I've tried:

html{
width:100%;
height:100%;
}
body{
width:100%;
height:100%;
}

But, this will only make the body 100%.. Where do I start? Does anybody have a tutorial or anything?

baswijdenesdotcom
  • 185
  • 1
  • 1
  • 12

5 Answers5

3

A simple example of using vw or vh (viewport), try it and you will see the difference.

Also with to center your element. you could use:

  display: flex;
  align-items: center;
  justify-content: center;

Vertical Centering

REF: https://philipwalton.github.io/solved-by-flexbox/demos/vertical-centering/

enter image description here

Viewport

REF: https://developer.mozilla.org/en/docs/Mozilla/Mobile/Viewport_meta_tag

body {
  margin: 0;
}

.test1 {
  background: red;
  width: 100%;
  height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.test2 {
  background: green;
  width: 100vw;
  height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.innerwraper {
  height: 100px;
  width: 200px;
  background: aqua;
}
<div class="test1">
  <div class="innerwraper">This is 100% width</div>
</div>
<div class="test2">
  <div class="innerwraper">This is 100vw</div>
</div>
Dalin Huang
  • 11,212
  • 5
  • 32
  • 49
1

Automatically the height and the width of the body is 100% and it can not be changed to an other value so your code is unuseful. To make the content take bigger height and width you should modify the css height and weight properties of the content (buttons, text inputs, divs, etc).

Mustapha El Kojji
  • 757
  • 1
  • 5
  • 7
0

You will have to define all sizes, lengths and widths in 'vw' and 'vh'. It stands for viewport width and viewport height. This will tell the browser to render every objects size relative to the width of the screen (or height, depending on what you choose).

In your example every object should be about 20vh heigh, with a margin of 5vh. Four objects make then a perfect 100vh (100% viewport height).

You could start with this css:

input, div {height: 20vh; margin: 5vh 1vh;}
Mr. Hugo
  • 11,887
  • 3
  • 42
  • 60
0

You can wrap the entire combination of buttons and views in a div, for example: 

<div id = "wrapper"> </div>

Then inside of the div modify each element's height and width based on percentages. For example, you have 4 elements vertically, and three buttons on the bottom. So your three buttons on the bottom could be further wrapped in another div making them act as one element. Then you can split the 4 elements to height: 25%; and make width inherited.

So it would look something like this: 

<body>
<div id="wrapper">
      <div class="element"> insert element here such as input </div>
      <div class="element"> element here such as input button </div>
      <div class="element"> element here such as counter </div>
      <div class="element"> 
          <div> </div>
          <div> </div>
          <div> </div>
      </div>

</div>

CSS:

.element{
     height:25%;
     width:inherit;
}

#wrapper{
    height:100%;
    width: 100%;
}
Bryan
  • 39
  • 1
  • 10
0

Above all the properties inside the block of codes if there is no * { box-sizing: border-box; }

The Content will not fit in...

Oluwaseun Musa
  • 1