Версия для ПК выглядит хорошо, но когда я открываю ее с мобильного телефона, все позиции ввода и меток сходят с ума. Я пытался добавить некоторые элементы div и классы, но не смог добиться того, чего я хочу.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Firma Etkinleştirme Penceresi</title>
<script src="../../ClientGlobalContext.js.aspx" type="text/javascript"></script>
<script src="../Scripts/Common/jquery.2.1.1.min.js"></script>
<script src="../Scripts/Common/bootstrap.min.js"></script>
<link href="../Css/bootstrap.min.css" rel="stylesheet" />
<script src="../Scripts/Pages/ActivateAccount.js" type="text/javascript"></script>
<script src="../Scripts/LocalizedString/ActivateAccountLabel.js"></script>
</head>
<body>
<div class="container">
<div class="row" style="margin-top:20px;">
<div class="col">
<div class="card" style="width: 42rem;margin:auto; text-align:center;">
<div class="card-header text-white" style="background-color:#33ADFF">Firma Aktifleştirme Formu</div>
<div class="card-body">
<p></p>
<form class="form-inline">
<div class="form-group mx-sm-4 mb-2">
<label id="lblStatusReason" for="txtStatusReason" style="margin-right:15px">Etkinleştirme Nedeni: </label>
<input type="text" id="txtStatusReason" class="form-control" readonly>
<input type="button" id="btnStatusReasonSelect" class="btn btn-success" style="margin-left:15px" value="Etkinleştirme Nedenini Seçin" />
</div>
<div class="form-group mx-sm-4 mb-2">
<label id="lblStatusCode" for="txtStatusCode" style="margin-right:15px">Durum Açıklaması: </label>
<input type="text" id="txtStatusReason" class="form-control" style="margin-left:17px" readonly value="Aktif">
</div>
<div class="col-12 form-group mx-sm-4 mb-2">
<label id="lblDescription" for="txtDescription" style="margin-right:15px">Açıklama: </label>
<input type="text" id="txtDescription" class="form-control" style="margin-left:65px" />
</div>
</form>
</div>
<div class="card-footer" style="margin-top:25px;">
<div class="row">
<div class="col" style="margin:auto; text-align:center;">
<button type="submit" class="btn btn-success" id="btnActivate">
Aktifleştir
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Я хочу, чтобы это выглядело так же и на мобильном телефоне.
Спасибо и всего наилучшего.