how to make content occupy whole page regardless of the screen size?

Question

I am designing a web page for the mobile first time. I have given 100% width and height so that content will render at the full page regardless of mobile screen size. but still, as you can see from the screenshot, there is empty space below and on the right side. Also even one of my checkbox content is even crossing the width of the page. I have tried putting that content in a span tag and defining a class and putting something like max-width: 20 px or something but it is not having any effect whatsoever. below my code snippet of HTML and css

/* style.css */
/* You can add global styles to this file, and also import other style files */
@import "~@angular/material/prebuilt-themes/indigo-pink.css";


body {
 margin: 0;
height: 100%;
width: 100%;
}

/* this page css */

mat-card{
width: 100%;
}

img{
padding: 2%;
text-align: center;
width:5%;
height: 5%;
}

.logo {
  margin: 10%;
 text-align: center;

}

.confirm-text {
max-width: 30px;
   display: block;
}


.example-container {
  display: flex;
  flex-direction: column;
}

.example-container>* {
  width: 100%;
}

.example-right-align {
  text-align: right;
}

input.example-right-align::-webkit-outer-spin-button,
input.example-right-align::-webkit-inner-spin-button {
  display: none;
}


.example-radio-group {
  display: inline-flex;
  flex-direction: column;
}
.checkbox {
display: block;
flex-direction: column;
padding-left:4%;
}


strong {
padding-left: 4%;
}
p {
  padding-left: 4%;
}


.example-radio-button {
  margin: 3%;
}

.example-selected-value {
  margin: 15px 0;
}

<mat-card><div class="logo">
  <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRE3x0vsDn1R5O0v7QKVvJNMJK2txXUv8IIsY-2t4R8ore5AjMk0g" alt="image">
  <br>
  <br>
  <p>your return request has been confirmed. please tell us a convenient time to schedule the pick up</p>
</div></mat-card>
<mat-card class="login-form">
<form class="example-container" (ngSubmit)="onSubmit(f)" #f="ngForm">
  <strong>Pick up your preferred date</strong>
  <mat-radio-group class="example-radio-group" name="selectedDate" [(ngModel)]="selectedDate" required>
  <mat-radio-button class="example-radio-button"
     *ngFor="let date of dateOptions" [value]="date" ngDefaultControl>
    {{date}}
  </mat-radio-button>
</mat-radio-group>
<br><br>
<strong>Select a preferred time</strong>
<mat-radio-group
 class="example-radio-group" name="selectedTime" [(ngModel)]="selectedTime" required>
  <mat-radio-button class="example-radio-button"
    *ngFor="let time of timeOptions" [value]="time" ngDefaultControl>
    {{time}}
  </mat-radio-button>
</mat-radio-group>
<hr>
<mat-checkbox class="checkbox" name="confirmation" [(ngModel)]="confirmation" required>
  <span class="confirm-text">I confirm the above selected date and time as the preferred slot for return pick up.</span> 
</mat-checkbox>
<hr>
<button mat-raised-button color="accent"  type="submit"  [disabled]="!f.valid">Submit</button>
</form>
</mat-card>

edit: this is index.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Myntra</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
<link href="https://storage.googleapis.com/code.getmdl.io/1.1.0/material.indigo-pink.min.css" rel="stylesheet" /
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">


</head>
<body>
  <app-root></app-root>
</body>
</html>

this comment I have written specifically here not in actual css — Humble Dolt, Nov 15 '17 at 08:11
Please provide entire HTML including the meta tags, id say look at viewport and remove margin and padding in the body tag by adding. body { margin:0; padding:0; } — Peterssoen, Nov 15 '17 at 08:17

score 0 · Answer 1 · answered Nov 15 '17 at 08:14

I found this on stackoverflow for HTML option: HTML5 Canvas 100% Width Height of Viewport?

In order to make the canvas full screen width and height always, meaning even when the browser is resized, you need to run your draw loop within a function that resizes the canvas to the window.innerHeight and window.innerWidth.

I found this on stackoverflow for jQuery option: Dynamically resize element with window size jquery

Also please see this on stackoverflow for additional support for proper resizing Understanding offsetWidth, clientWidth, scrollWidth and -Height, respectively

score 0 · Answer 2 · answered Nov 15 '17 at 08:14

first // are not valid coments in CSS, use /* CODE */

simple remove your % values and change them to vh and vw :) also add few css to all object

vh and vw its USER POINT OF VIEWs

*{
padding: 0;
margin: 0;
}

also add this HTML to define viewport

<meta name="viewport"
      content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

score 0 · Answer 3 · answered Nov 15 '17 at 08:17

Try this

    <div id="complete">
     Put your code here
    </div>
     html,body{  height:100%; width:100%; margin:0; padding:0;}
    #complete{
       height:100%;
       width:100%;
       overflow:hidden; 
              }

If you want to have scrollbar then you can keep overflow as auto. Do not miss html before body. Hope this helps!!

score 0 · Answer 4 · answered Nov 15 '17 at 09:59

You could also link to a CSS stylesheet like Normalize.css to remove some of the default CSS of the browser and make your page look more consistent across different browsers. Just make sure to link to your main CSS stylesheet AFTER Normalize.css.

https://necolas.github.io/normalize.css/

how to make content occupy whole page regardless of the screen size?

4 Answers4