My website layout is not responding correctly, it is not centered properly and when I zoom out, it shows blank white vertical bar on the right side of the screen. Please view the screenshots for more context and to understand. I am assuming that it is something wrong with my CSS but I have been struggling for over an hour attempting to find it...Any help is appreciated Screenshot 1 Screenshot 2
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<title>My Website</title>
<!-- Bootstrap core CSS -->
<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom fonts for this template -->
<link href="vendor/fontawesome-free/css/all.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Varela+Round" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="css/main.css" rel="stylesheet">
</head>
<body id="page-top">
<!-- Navigation -->
<nav class="navbar navbar-expand-lg navbar-light fixed-top" id="mainNav">
<div class="container">
<a class="navbar-brand js-scroll-trigger" href="#page-top">My Website</a>
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
Menu
<i class="fas fa-bars"></i>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="#experiencesSum">Experiences</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="#about">About</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="#meet">Meet</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- Header -->
<header class="masthead">
<div class="container d-flex h-100 align-items-center">
<div class="mx-auto text-center">
<h1 class="mx-auto my-0 text-uppercase">My Website</h1>
<h2 class="text-white-50 mx-auto mt-2 mb-5">Welcome to my website.</h2>
<a href="#signup" class="btn btn-primary js-scroll-trigger">Sign Up</a>
</div>
</div>
</header>
<section id="experiencesSum" class="experiencesSum-section text-center">
<div class="container">
<div class="row">
<div class="col-lg-8 mx-auto">
<h2 class="text-white mb-4">Experiences</h2>
<p class="text-white-50">Our experiences page is where interviews are posted.
<a href="experiences.html">Click here </a>to be taken to the page. You can find experiences from professionals in many different fields.</p>
</div>
</div>
</div>
</section>
<!-- About Section -->
<section id="about" class="about-section bg-light">
<div class="container">
<br>
<br>
<br>
<!-- About Row 1 -->
<div class="row align-items-center mb-4 mb-lg-5">
<div class="col-xl-8 col-lg-7">
<img class="img-fluid mb-3 mb-lg-0" src="img/demo-image-01.jpg" alt="">
</div>
<div class="col-xl-4 col-lg-5">
<div class="text-center text-lg-left">
<h4>About Us</h4>
<p class="text-black-50 mb-0">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
</div>
<div class="row align-items-center mb-5 mb-lg-4">
<div class="col-xl-5 col-lg-4">
<div class="text-center text-lg-left">
<h4>Our Goals</h4>
<p class="text-black-50 mb-0">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
<div class="col-xl-7 col-lg-8">
<img class="img-fluid mb-3 mb-lg-0" src="img/demo-image-02.jpg" alt="">
</div>
</div>
</div>
</section>
<section id="meet" class="meet-section bg-light">
<div class="container">
<!-- About Row 1 -->
<div class="row align-items-center mb-4 mb-lg-5">
<div class="col-xl-8 col-lg-7">
<img class="img-fluid mb-3 mb-lg-0" src="img/demo-image-03.jpg" alt="">
</div>
<div class="col-xl-4 col-lg-5">
<div class="text-center text-lg-left">
<h4>Tell Us Your Story!</h4>
<p class="text-black-50 mb-0">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<br>
<a href="meet.html" id="b1"><button type="button" class="btn-primary btn">Let's Meet</button></a>
</div>
</div>
</div>
</div>
</section>
<!-- About Section -->
<section id="signup" class="signup-section">
<div class="container">
<div class="row">
<div class="col-md-10 col-lg-8 mx-auto text-center">
<h2 class="text-black mb-5">Subscribe to receive updates!</h2>
<form class="form-inline d-flex" action="insert.php" method="post">
<input type="email" class="form-control flex-fill mr-0 mr-sm-2 mb-3 mb-sm-0" id="inputEmail" placeholder="Enter email address..." name="email" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$">
<button type="submit" class="btn btn-primary mx-auto">Subscribe</button>
</form>
</div>
</div>
</div>
</section>
<!-- Contact Section -->
<section class="contact-section bg-black">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="social d-flex justify-content-center">
<a href="#" class="mx-2">
<i class="fab fa-twitter"></i>
</a>
<a href="#" class="mx-2">
<i class="fab fa-facebook-f"></i>
</a>
<a href="#" class="mx-2">
<i class="fab fa-instagram"></i>
</a>
<a href="#" class="mx-2">
<i class="fab fa-youtube"></i>
</a>
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer class="bg-black small text-center text-white-50">
<div class="container">
Copyright © My Website 2019
</div>
</footer>
<!-- Bootstrap core JavaScript -->
<script src="vendor/jquery/jquery.min.js"></script>
<script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- Plugin JavaScript -->
<script src="vendor/jquery-easing/jquery.easing.min.js"></script>
<!-- Custom scripts for this template -->
<script src="js/grayscale.min.js"></script>
</body>
</html>
CSS:
#mainNav {
min-height: 56px;
background-color: #fff;
}
#mainNav .navbar-toggler {
font-size: 80%;
padding: 0.75rem;
color: #64a19d;
border: 1px solid #64a19d;
}
#mainNav .navbar-toggler:focus {
outline: none;
}
#mainNav .navbar-brand {
color: #161616;
font-weight: 700;
padding: .9rem 0;
}
#mainNav .navbar-nav .nav-item:hover {
color: fade(white, 90%);
outline: none;
background-color: transparent;
}
#mainNav .navbar-nav .nav-item:active, #mainNav .navbar-nav .nav-item:focus {
outline: none;
background-color: transparent;
}
@media (min-width: 992px) {
#mainNav {
padding-top: 0;
padding-bottom: 0;
border-bottom: none;
background-color: transparent;
-webkit-transition: background-color 0.3s ease-in-out;
transition: background-color 0.3s ease-in-out;
}
#mainNav .navbar-brand {
padding: .5rem 0;
color: rgba(255, 255, 255, 0.9);
}
#mainNav .nav-link {
-webkit-transition: none;
transition: none;
padding: 2rem 1.5rem;
color: rgba(255, 255, 255, 0.9);
}
#mainNav .nav-link:hover {
color: rgba(255, 255, 255, 0.75);
}
#mainNav .nav-link:active {
color: white;
}
#mainNav.navbar-shrink {
background-color: #fff;
}
#mainNav.navbar-shrink .navbar-brand {
color: #161616;
}
#mainNav.navbar-shrink .nav-link {
color: #161616;
padding: 1.5rem 1.5rem 1.25rem;
border-bottom: 0.25rem solid transparent;
}
#mainNav.navbar-shrink .nav-link:hover {
color: #64a19d;
}
#mainNav.navbar-shrink .nav-link:active {
color: #467370;
}
#mainNav.navbar-shrink .nav-link.active {
color: #64a19d;
outline: none;
border-bottom: 0.25rem solid #64a19d;
}
}
.masthead {
position: relative;
width: 100%;
height: auto;
min-height: 35rem;
padding: 15rem 0;
background: -webkit-gradient(linear, left top, left bottom, from(rgba(22, 22, 22, 0.1)), color-stop(75%, rgba(22, 22, 22, 0.5)), to(#161616)), url("mywebsite.com/img/bg-masthead.jpg");
background: linear-gradient(to bottom, rgba(22, 22, 22, 0.3) 0%, rgba(22, 22, 22, 0.5) 75%, #161616 100%), url("mywebsite.com/img/bg-masthead.jpg");
background-position: center;
background-repeat: no-repeat;
background-attachment: scroll;
background-size: cover;
}
.masthead h1 {
font-family: 'Varela Round';
font-size: 2.5rem;
line-height: 2.5rem;
letter-spacing: 0.8rem;
background: -webkit-linear-gradient(rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0));
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
}
.masthead h2 {
font-size: 1rem;
background: -webkit-linear-gradient(rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.3));
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
}
@media (min-width: 768px) {
.masthead h1 {
font-size: 4rem;
line-height: 4rem;
}
}
@media (min-width: 992px) {
.masthead {
height: 100vh;
padding: 0;
}
.masthead h1 {
font-size: 6.5rem;
line-height: 6.5rem;
letter-spacing: 0.8rem;
}
.masthead h2 {
font-size: 1.5rem;
}
}
.btn {
-webkit-box-shadow: 0 0.1875rem 0.1875rem 0 rgba(0, 0, 0, 0.1) !important;
box-shadow: 0 0.1875rem 0.1875rem 0 rgba(0, 0, 0, 0.1) !important;
padding: 1.25rem 2rem;
font-family: 'Varela Round';
font-size: 80%;
text-transform: uppercase;
letter-spacing: .15rem;
border: 0;
}
.btn-primary {
background-color: #64a19d;
}
.btn-primary:hover {
background-color: #4f837f;
}
.btn-primary:focus {
background-color: #4f837f;
color: white;
}
.btn-primary:active {
background-color: #467370 !important;
}
.experiencesSum-section {
padding-top: 10rem;
background: -webkit-gradient(linear, left top, left bottom, from(#161616), color-stop(75%, rgba(22, 22, 22, 0.9)), to(rgba(22, 22, 22, 0.8)));
background: linear-gradient(to bottom, #161616 0%, rgba(22, 22, 22, 0.9) 75%, rgba(22, 22, 22, 0.8) 100%);
}
.experiencesSum-section p {
margin-bottom: 5rem;
}
.experiences-section {
padding-top: 5rem;
padding-bottom: 2rem;
}
.experiences-section .featured-text {
padding: 2rem;
}
@media (min-width: 992px) {
.experiences-section .featured-text {
padding: 0 0 0 2rem;
border-left: 0.5rem solid #64a19d;
}
}
.experiences-section .project-text {
padding: 3rem;
font-size: 90%;
}
@media (min-width: 992px) {
.experiences-section .project-text {
padding: 5rem;
}
.experiences-section .project-text hr {
border-color: #64a19d;
border-width: .25rem;
width: 30%;
}
}
.about-section {
padding-top: 0rem;
padding-bottom: 1.5rem;
}
.about-section .featured-text {
padding: 2rem;
}
@media (min-width: 992px) {
.about-section .featured-text {
padding: 0 0 0 2rem;
border-left: 0.5rem solid #64a19d;
}
}
.about-section .project-text {
padding: 3rem;
font-size: 90%;
}
@media (min-width: 992px) {
.about-section .project-text {
padding: 5rem;
}
.about-section .project-text hr {
border-color: #64a19d;
border-width: .25rem;
width: 30%;
}
}
@media (min-width: 992px) {
.meet-section .project-text {
padding: 5rem;
}
.meet-section .project-text hr {
border-color: #64a19d;
border-width: .25rem;
width: 30%;
}
}
.meet-section {
padding-top: 0rem;
padding-bottom: 2rem;
}
.meet-section .featured-text {
padding: 2rem;
}
@media (min-width: 992px) {
.meet-section .featured-text {
padding: 0 0 0 2rem;
border-left: 0.5rem solid #64a19d;
}
}
.meet-section .project-text {
padding: 3rem;
font-size: 90%;
}
@media (min-width: 992px) {
.meet-section .project-text {
padding: 5rem;
}
.meet-section .project-text hr {
border-color: #64a19d;
border-width: .25rem;
width: 30%;
}
}
.signup-section {
padding: 5rem 0;
background: rgba(255, 255, 255, 0.1);
}
.signup-section .form-inline input {
-webkit-box-shadow: 0 0.1875rem 0.1875rem 0 rgba(0, 0, 0, 0.1) !important;
box-shadow: 0 0.1875rem 0.1875rem 0 rgba(0, 0, 0, 0.1) !important;
padding: 1.25rem 2rem;
height: auto;
font-family: 'Varela Round';
font-size: 80%;
text-transform: uppercase;
letter-spacing: 0.15rem;
border: 0;
}
.contact-section {
padding: 1rem;
}
.contact-section .social {
margin-top: 1rem;
}
.contact-section .social a {
text-align: center;
height: 3rem;
width: 3rem;
background: rgba(255, 255, 255, 0.1);
border-radius: 100%;
line-height: 3rem;
color: rgba(255, 255, 255, 0.3);
}
.contact-section .social a:hover {
color: rgba(255, 255, 255, 0.5);
}
.contact-section .social a:active {
color: #fff;
}
body {
font-family: 'Nunito';
letter-spacing: 0.0625em;
}
a {
color: #64a19d;
}
a:focus, a:hover {
text-decoration: none;
color: #3c6360;
}
.bg-black {
background-color: #161616 !important;
}
.bg-primary {
background-color: #64a19d !important;
}
.text-primary {
color: #64a19d !important;
}
footer {
padding: 1rem 0;
}
Aucun commentaire:
Enregistrer un commentaire