The following code snippet is producing overlapping card and footers. I have included the webpage.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>hospitalHome</title>
<link rel="stylesheet" href="css/font-awesome.min.css">
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body id="home">
<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top">
<div class="container">
<span class="navbar-brand text-warning" style="font-size:30px;">Welcome </span>
<span class="navbar-brand">Demo User</span>
<button class="navbar-toggler" data-toggle="collapse" data-target="#navbarCollapse">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<button class="btn btn-outline-info"> Logout</button>
</li>
</ul>
</div>
</div>
</nav>
<!-- HOME SECTION -->
<header id="home-section" style="background-image:url('./img/hosp.jpeg');">
<div class="dark-overlay">
<div class="home-inner">
<div class="container">
<div class="row">
<!-- UPDATE DETAIL CARD-->
<div class="col-sm-4" style="opacity:0.9;">
<div class="card bg-info text-center card-form ">
<div class="card-body">
<h3 class="align-center">Update Detail</h3>
<p>Please fill out this form to update </p>
<form>
<div class="form-group">
<input type="password" class="form-control form-control-lg" placeholder="Mobile no.">
</div>
<div class="form-group">
<span class="glyphicon glyphicon-calendar"></span>
<input type="password" class="form-control form-control-lg" placeholder="Date">
</div>
<input type="submit" class="btn btn-dark btn-block">
</form>
</div>
</div>
</div>
<!-- ADD DETAIL CARD-->
<div class="col-sm-4" style="opacity:0.9;">
<div class="card bg-info text-center card-form">
<div class="card-body">
<h3 class="align-center">Add Details</h3>
<p>Please fill out this form to add </p>
<form>
<div class="form-group">
<input type="password" class="form-control form-control-lg" placeholder="Mobile no.">
</div>
<div class="form-group">
<select class="form-control form-control-lg" placeholder="Blood Group">
<option>Options:</option>
<option>A</option>
<option>B</option>
<option>C</option>
<option>D</option>
<option>E</option>
<option>F</option>
<option>G</option>
<option>H</option>
</select>
</div>
<div class="form-group">
<input type="password" class="form-control form-control-lg" placeholder="Date">
</div>
<div class="form-group">
<input type="password" class="form-control form-control-lg" placeholder="City">
</div>
<input type="submit" class="btn btn-dark btn-block">
</form>
</div>
</div>
</div>
<!--SEARCH FOR DATA -->
<div class="col-sm-4">
<div class="card bg-info text-center card-form">
<div class="card-body">
<h3 class="align-center">Search for blood</h3>
<p>Please fill out these first</p>
<form>
<div class="form-group">
<select class="form-control form-control-lg" placeholder="Blood Group">
<option>DATA</option>
<option>A</option>
<option>B</option>
<option>C</option>
<option>D</option>
<option>E</option>
<option>F</option>
<option>G</option>
<option>H</option>
</select>
</div>
<div class="form-group">
<input type="email" class="form-control form-control-lg" placeholder="City">
</div>
<input type="submit" class="btn btn-dark btn-block">
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</header>
<!-- MAIN FOOTER -->
<footer id="main-footer" class="bg-dark">
<div class="container">
<div class="row">
<div class="col text-center">
<div class="py-4">
<h1 class="h3">Demo</h1>
<p> Project © 2017-18</p>
<!--<button class="btn btn-primary" data-toggle="modal" data-target="#contactModal">Contact Us</button>-->
</div>
</div>
</div>
</div>
</footer>
<script src="js/jquery.min.js"></script>
<script src="js/popper.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
Problem Explanation: On reducing the size of window to tablet mode, the footer overlaps with the third card. On reducing the size further to mobile view, all the three cards overlaps and the footer too. Any help is highly appreciated.
Aucun commentaire:
Enregistrer un commentaire