Я не веб-разработчик. Это мой первый проект, и мне нужна помощь в этом. Я нацелен на этот контейнер, который выглядит абсолютно нормально в P C, но цифры и заголовок просто вытекают из него в Mobile (или когда цифры становятся слишком большими). Мне просто нужна помощь, чтобы сделать его немного более отзывчивым и Сделайте все это ограниченным контейнером. (размер должен оставаться абсолютным по отношению к размеру экрана, а компоненты внутри него должны оставаться относительными по отношению к пурпурному прямоугольнику. Не могли бы вы направить меня. Спасибо Вот код:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Calculator</title>
/ <link
rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk"
crossorigin="anonymous"
/>
<style>
.amt {
background-color: rgba(67, 53, 114, 1);
border-radius: 20px;
max-height: 35em ;
border: none;
color: white;
padding:10px;
box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.637);
}
.mybtn {
background-color: rgba(67, 53, 114, 1);
padding: 10px 30px;
color: white;
border-radius: 30px;
border: none;
}
.form-control {
border-radius: 20px;
border: 2px solid rgba(67, 53, 114, 1);
margin-bottom: 10px;
}
.form-check-label {
color: rgba(67, 53, 114, 1);
font-weight: bold;
}
.col-form-label {
color: rgba(67, 53, 114, 1);
font-weight: bold;
}
</style>
</head>
<style>
body {
font-family: "Raleway", sans-serif;
}
.container {
margin-top: 30px;
}
.box1 {
border: 2px solid rgba(67, 53, 114, 1);
background-color: rgb(255, 255, 255);
border-radius: 20px;
padding: 30px;
box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.637);
max-height: min-content;
}
</style>
<body>
<div class="container">
<div class="box1">
<div class="row">
<div class="col">
<h2
style="
color: rgba(67, 53, 114, 1);
text-align: start;
margin-bottom: 25px;
font-weight: bold;
"
>
Compound Calculator
</h2>
</div>
<div class="w-100"></div>
<div class="col-md m-2">
<form method="POST" name="fvform">
<div class="form-group row">
<label for="p" class="col-sm-5 col-form-label"
>Initial Investment</label
>
<div class="col-sm-6">
<input style="color: rgba(67, 53, 114, 1);" type="number" class="form-control" name="pv" id="p" placeholder=" Rs. " />
</div>
</div>
<div class="form-group row">
<label for="a" class="col-sm-5 col-form-label"
>Monthly Investment</label
>
<div class="col-sm-6">
<input type="number" style="color: rgba(67, 53, 114, 1);" class="form-control" name="pmt" id="a" placeholder=" Rs. "/>
</div>
</div>
<div class="form-group row">
<label for="n" class="col-sm-5 col-form-label"
>Investment Period</label
>
<div class="col-sm-6">
<input type="number" style="color: rgba(67, 53, 114, 1);" class="form-control" id="n" placeholder=" Years " />
</div>
</div>
<div class="form-group row">
<label for="r" class="col-sm-5 col-form-label"
>Rate of Investment</label
>
<div class="col-sm-6">
<input type="number" class="form-control" name="rate" id="r" placeholder=" % " />
</div>
</div>
<p style="color: rgba(67, 53, 114, 1); font-weight: bold;">
Compounding Interval
</p>
<div class="form-group row">
<div class="form-check form-check-inline m-3">
<input
class="form-check-input"
type="radio"
checked="" name="R1" value="V1"
/>
<label class="form-check-label" for="mo"
>Monthly</label
>
</div>
<div class="form-check form-check-inline m-3">
<input
class="form-check-input"
type="radio"
name="R1" value="V2"
/>
<label class="form-check-label" for="qu"
>Quaterly</label
>
</div>
<div class="form-check form-check-inline m-3">
<input
class="form-check-input"
type="radio"
name="R1" value="V3"
/>
<label class="form-check-label" for="hy"
>Half-Yearly</label
>
</div>
<div class="form-check form-check-inline m-3">
<input
class="form-check-input"
type="radio"
name="R1" value="V4"
/>
<label class="form-check-label" for="an"
>Annually</label
>
</div>
</div>
<div class="col-sm">
<button type="button" class="mybtn" name="B1" value="Show me the FV" onclick="calculate()">
Calculate
</button>
</div>
</form>
</div>
<div class="col-md m-2">
<div class="card amt m-2">
<h2 style="text-align: center;font-weight: bold; margin-top : 20px;color: white;">Total Amount</h3>
<p
style="
color: rgba(37, 163, 209, 1);
padding-top: .5em;
text-align: center;
margin: auto;
font-family: Arial, Helvetica, sans-serif;
font-size: 3em;
font-weight: 500 ;
"
id="result"
name="fvfield"
>
Rs. 0
</p>
<p > </p>
<hr
style="
width: 70%;
align-self: center;
color: white;
border-top: 1px solid;
"
/>
<div class="container">
<div class="row">
<div class="col-sm">
<p
style="
font-size: 1.6em;
text-align: center;
font-weight: bold;
"
>
Amount <br> Invested
</p>
<p
style="
color: rgba(37, 163, 209, 1);
text-align: center;
font-family: Arial, Helvetica, sans-serif;
font-size: 2em;
font-weight: 500 ;
"
id="result1"
name="fvfield"
> Rs. 0
</p><p></p>
</div>
<style>
.vl {
border-left: 1.5px solid white;
height: 17eh;
margin-bottom: 30px;
}
@media (max-width: 572px) {
.vl {
border: none;
height: 20px;
}
}
</style>
<div class="vl"></div>
<div class="col-sm">
<p style="font-size: 1.6em;
text-align: center;
font-weight: bold;">
Interest <br> Earned
</p>
<p
style="
color: rgba(37, 163, 209, 1);
text-align: center;
font-family: Arial, Helvetica, sans-serif;
font-size: 2em;
font-weight: 500 ;
"id="result2"
name="fvfield"
> Rs. 0
</p><p></p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
[! [Введите описание изображения здесь] [1]] [1] [! [Введите описание изображения здесь] [2]] [2]
Я говорю о фиолетовой коробке. Stackoverflow не позволяет загружать изображения из-за низкой репутации.