Как сделать этот модальный отзывчивым?(ЕСЛИ я использую планшет или другой смартфон) - PullRequest
0 голосов
/ 11 мая 2018

Если я открою его через браузер ПК, он будет отзывчивым, но когда я переключу его на вид планшета или смартфона, он не станет отзывчивым, вместо этого он станет масштабированным (следует увеличить при просмотре).как это решить?

Вот мой код:

.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>

дайте мне знать, если есть неправильный код, потому что мужчины всегда ошибаются, упс ...

1 Ответ

0 голосов
/ 11 мая 2018

Вам необходимо добавить тег viewport <meta> в раздел <head>:

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

... Обратите внимание, что вам также необходимо добавить сам раздел <head> (кажется, вы его пропустили):

<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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...