I am not a web dev guy. This is my first project and I need help in this. I am targeting this container which looks absolutely fine in PC, but the digits and heading just flows out of it in the Mobile(or when the digits get too large.) I just need help to make it a little more responsive and make it all bounded by the container.(size should remain absolute wrt the screen size and the components within it should remain relative wrt to the purple box. So can you please guide me. Thanks Here's the code:
<!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>[![enter image description here][1]][1] [![enter image description here][2]][2]
I am talking about the purple box. Stackoverflow won't let me upload imaged due to my low reputation points.
Aucun commentaire:
Enregistrer un commentaire