I'm working on my site using Bootstrap Studio and I can't figure out why main content of my website goes under the navbar when I resize it.
Here are some screenshots:
after resizing you can't see the top section of the div.
What I want it to behave like:
as you can see, even after resizing, you are able to scroll down and see the content.
Code:
#navbar {
display: inline-block;
width: 100%;
height: auto;
background-color: #fcfcfc;
}
#navbar .navbar-brand {
font-family: 'Pacifico';
font-size: 30px;
}
#navbar .nav-item {
position: relative;
font-family: 'Montserrat';
font-size: 15px;
text-transform: uppercase;
transition: color 2s ease-in-out;
}
@media (min-width: 768px) {
#navbar .nav-item::before {
content: '';
position: absolute;
width: 100%;
height: 2px;
bottom: 0;
left: 0;
transform: scaleX(0);
background: black;
transform-origin: bottom left;
transition: transform 0.25s ease-out;
}
}
@media (min-width: 768px) {
#navbar .nav-item:hover::before {
transform: scaleX(1);
transform-origin: bottom left;
}
}
#navbar .nav-link {
color: #666666;
transition: color 0.25s ease-in-out;
}
#navbar .nav-link:hover {
color: black;
}
main {
display: flex;
flex-flow: column;
width: 100%;
height: 100vh;
background-image: url('../../assets/img/background-blurred.png');
background-size: cover;
background-repeat: no-repeat;
background-position: right;
}
#main-area {
position: static;
display: flex;
flex-grow: 1;
width: 100%;
padding: 10px;
}
@media (min-width: 576px) {
#main-area {
padding: 0px;
}
}
#welcome {
width: 95%;
padding: 20px;
background: #fcfcfc;
border-radius: 20px;
text-align: center;
box-shadow: 0 0 10px 5px #fcfcfc;
}
@media (min-width: 576px) {
#welcome {
width: 80%;
padding: 50px;
}
}
@media (min-width: 768px) {
#welcome {
width: 60%;
padding: 50px;
}
}
#welcome h1 {
font-family: Pacifico, cursive;
font-size: 25px;
}
@media (min-width: 576px) {
#welcome h1 {
font-size: 35px;
}
}
#welcome p {
font-family: 'Coming Soon', cursive;
font-size: 15px;
}
@media (min-width: 576px) {
#welcome p {
font-size: 20px;
}
}
#welcome .form-text.text-left.text-muted {
font-family: 'Coming Soon', cursive;
font-size: 8px;
}
@media (min-width: 576px) {
#welcome .form-text.text-left.text-muted {
font-size: 10px;
}
}
#welcome button:hover {
transform: scale(1.05);
}
#welcome button {
width: 90%;
border-radius: 20px;
font-family: Montserrat, sans-serif;
font-weight: bold;
transition: 0.25s ease-in-out;
}
@media (min-width: 992px) {
#welcome button {
width: 70%;
}
}
@media (min-width: 1200px) {
#welcome button {
width: 60%;
}
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
<title>TITLE</title>
<link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Coming+Soon">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Montserrat">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Pacifico">
<link rel="stylesheet" href="assets/css/Footer-Basic.css">
<link rel="stylesheet" href="assets/css/styles.css">
</head>
<body>
<main class="d-flex flex-column justify-content-center">
<nav class="navbar navbar-light navbar-expand-md sticky-top shadow-lg" id="navbar">
<div class="container-fluid"><a class="navbar-brand" href="#">TITLE</a><button data-toggle="collapse" class="navbar-toggler" data-target="#navcol"><span class="sr-only">Toggle navigation</span><span class="navbar-toggler-icon"></span></button>
<div class="collapse navbar-collapse"
id="navcol">
<ul class="nav navbar-nav ml-auto">
<li class="nav-item" role="presentation"><a class="nav-link" href="#">About</a></li>
<li class="nav-item" role="presentation"><a class="nav-link" href="#">Contact</a></li>
<li class="nav-item" role="presentation"><a class="nav-link" href="#">Log in</a></li>
</ul>
</div>
</div>
</nav>
<section class="d-flex justify-content-center align-items-center" id="main-area">
<div id="welcome">
<h1>PLACEHOLDER</h1><br>
<p class="text-left">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In quis nisl at ante commodo pretium. Curabitur ac orci egestas, pellentesque ipsum vitae, imperdiet enim. Maecenas pellentesque at justo ut sollicitudin. Pellentesque suscipit libero vel risus pulvinar, quis cursus tellus dictum.<br></p><small class="form-text text-left text-muted"><br><br>PLACEHOLDER</small><br>
<button
class="btn btn-primary" type="button">Log in with Facebook</button>
</div>
</section>
</main>
<script src="assets/js/jquery.min.js"></script>
<script src="assets/bootstrap/js/bootstrap.min.js"></script>
</body>
</html>
Aucun commentaire:
Enregistrer un commentaire