CODEWITHSUNDEEP
htmlcsstwitter-bootstrap-3modal-dialog
Anggi alansori
Anggi alansori

Reputation: 95

How make this modal responsive ? (IF i use tablet or other smartphone)

If I open it through a pc browser it will be responsive but when I change it to a tablet or smartphone view it does not become responsive, instead it becomes zoom (should zoom in if view). how to solve it?

Here its my code :

.modal-dialog{
    padding-top: 100px;
    border-radius:0;
}
.modal-header{
    background-color: #F47321;
}
.modal-title{
    color: white;
}
.modal-footer{
    background-color: #FFFFFF;
    margin-top: 0;
}
.modal-body{
    background-color: #FFFFFF;
    color: black;
}
.orange{
  background-color: #F47321;
}
.grey{
  background-color: #807874;
}
.title-header{
	background-color: #F47321;
	
}
.body {
    background-color: #807874;
}
<html>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" src="dist/js/jquery.validate.js"></script>
<link rel="stylesheet" type="text/css" href="modal.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
 <link rel="stylesheet" type="text/css" href="dist/css/pencarian2.css">
 <link rel="stylesheet" type="text/css" href="https://www.rumahzakat.org/wp-content/themes/rz2016/fonts/MavenPro-Regular.otf">
 <link rel="stylesheet" type="text/css" href="https://www.rumahzakat.org/wp-content/themes/rz2016/fonts/MavenPro-Medium.otf">
 <link rel="stylesheet" type="text/css" href="https://www.rumahzakat.org/wp-content/themes/rz2016/fonts/MavenPro-Bold.otf">
 <style>
@font-face {
   font-family:'Elivio',sans-serif;
   font-size:100px;
div{

    font-family:Elivio;

}
</style>

<title>Selamat Datang</title>
<body class="body">
<div class="content">
<div class="container">
<br>
<div class="modal-header">
<h4 class="modal-title" style="text-align: left; font-family: MavenPro-Bold"> SYARAT & KETENTUAN</h4>
</div>
<div class="modal-body">
<p  style="font-family:MavenPro-Regular;"><strong></strong><strong>SYARAT DAN KETENTUAN</strong></p>

<p>&nbsp;</p>
</div>
<div class="modal-footer">
<div align="left">
<label class="checkbox-inline">
		<input type="checkbox" id="check" title="Please agree to our policy!" name="checkbox"  style="font-family:MavenPro-Regular;" />Saya setuju dengan syarat & ketentuan
		</label>&nbsp;
		<br>
		&nbsp;<p ><label class="label label-danger">*Silahkan ceklis setuju untuk melanjutkan</label></p>
		</div>
		

		<form method="POST" action="pengajuan" align="">
	 <input type="submit" name="btncheck" class="btn btn-success" id="btncheck" value="Lanjutkan" />
	 </form>
	 </div>
<p align="center"><font color="white">&copy; Rumah Zakat 2018</font></p>
  </html>

let me know if there is a wrong code, because men are always wrong whoops ...

Upvotes: 3

Views: 237

Answers (1)

Obsidian Age
Obsidian Age

Reputation: 42304

You need to add the viewport <meta> tag to your <head> section:

<meta name="viewport" content="width=device-width, initial-scale=1">

...Note that you'll also need to add the <head> section itself (you appear to have omitted it):

<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <script type="text/javascript" src="dist/js/jquery.validate.js"></script>
  <link rel="stylesheet" type="text/css" href="modal.css">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <link rel="stylesheet" type="text/css" href="dist/css/pencarian2.css">
  <link rel="stylesheet" type="text/css" href="https://www.rumahzakat.org/wp-content/themes/rz2016/fonts/MavenPro-Regular.otf">
  <link rel="stylesheet" type="text/css" href="https://www.rumahzakat.org/wp-content/themes/rz2016/fonts/MavenPro-Medium.otf">
  <link rel="stylesheet" type="text/css" href="https://www.rumahzakat.org/wp-content/themes/rz2016/fonts/MavenPro-Bold.otf">
  <style>
      @font-face {
      font-family: 'Elivio', sans-serif;
      font-size: 100px;
      div {
        font-family: Elivio;
      }
  </style>
  <title>Selamat Datang</title>
</head>

<body class="body"> ... </body>

</html>

Upvotes: 2

Related Questions