I have the following layout
Example
Im having a little issue tho when I rezie the window the overlap with the main content
Example of the issue
How do I prevent this issue and retain a padding ?
Here is my html and Css
<body>
<div class="sidebar">
test
test
test
</div>
<div class="container col-xxl-8 px-4 py-5 main_gradient" id="fade">
<div class="row p-4 pb-0 pe-lg-0 pt-lg-5 align-items-center rounded-3 shadow-lg main_gradient " style=" background-color:rgb(240, 240, 255)">
</div>
</div>
</body>
.sidebar {
margin: 0;
padding: 0;
width: 200px;
background-color: #f1f1f1;
position: fixed;
height: 100%;
overflow-y: auto;
}
.sidebar a {
display: block;
color: black;
padding: 16px;
text-decoration: none;
}
.sidebar a.active {
background-color: #04AA6D;
color: white;
}
.sidebar a:hover:not(.active) {
background-color: #555;
color: white;
}
#media screen and (max-width: 700px) {
.sidebar {
width: 100%;
height: auto;
position: relative;
}
.sidebar a {
float: left;
}
div.content {
margin-left: 0;
}
}
#media screen and (max-width: 400px) {
.sidebar a {
text-align: center;
float: none;
}
}
I tried to add padding however this did not solve the issue
Two main things to consider:
Bootstrap col should always be wrapped in a row.
Change position: fixed; (this broke Bootstrap grid) to position: sticky;. Also, add height: 100vh;.
See the snippet below.
.sidebar {
margin: 0;
padding: 0;
background-color: #f1f1f1;
position: sticky;
height: 100vh;
overflow-y: auto;
}
.sidebar a {
display: block;
color: black;
padding: 16px;
text-decoration: none;
}
.sidebar a.active {
background-color: #04AA6D;
color: white;
}
.sidebar a:hover:not(.active) {
background-color: #555;
color: white;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
<body>
<div class="row m-0">
<div class="col-xxl-4 sidebar">
test
test
test
</div>
<div class="col-xxl-8 px-4 py-5 main_gradient" id="fade">
<div class="row p-4 pb-0 pe-lg-0 pt-lg-5 align-items-center rounded-3 shadow-lg main_gradient" style="background-color:rgb(240, 240, 255)">
</div>
</div>
</div>
</body>
Related
I don't know why my H1 is interfering with navbar in mobile version. When I scroll down my navbar in mobile version, H1 interfering to the navbar and I can't fix this issue. How can I change my code, that it works ?
Image in mobile version is here: https://i.stack.imgur.com/SJ3vi.jpg
Code below:
.banner {
background-image: url('../../../assets/images/natallia-nagorniak-tA3sJ4u09eU-unsplash.jpg');
height: 800px;
background-position: center center;
background-size: 100%;
}
.content {
top: 25%;
left: 5%;
position: absolute;
}
.content h1 {
color: black;
font-size: 3em;
font-weight: bold;
}
.content a {
text-decoration: none;
background-color: var(--primary-color);
color: #fff;
padding: 15px 40px;
border-radius: 5px;
}
.content a:hover {
background-color: #64cff7;
color: #fff;
}
.stepBox {
background-color: #64cff7;
padding: 20px 20px;
border-radius: 5px;
text-align: center;
}
.stepBox h1 {
font-size: 30px;
font-weight: bold;
color: black;
}
.stepBox p {
font-size: 20px;
font-style: italic;
color: #fff;
}
.highlight {
color: var(--primary-color);
font-weight: bold;
font-style: italic;
text-decoration: underline;
}
.cakebox {
padding: 10px 5px;
}
.cakebox img {
width: 100%;
height: 250px;
object-fit: cover;
border-radius: 5px;
}
.cakebox h1 {
font-size: 18px;
margin-top: 20px;
font-weight: bold;
}
.viewmorebtn {
text-decoration: none;
background-color: #64cff7;
color: #fff;
padding: 10px 10px;
border-radius: 5px;
font-size: 18px;
}
.viewmorebtn i {
padding-left: 5px;
}
#media screen and (max-width:600px) {
.banner {
height: 600px;
}
}
<div class="banner">
<div class="content">
<h1 class="mb-5">Čerstvé koláče <br/> priamo k tvojim dverám</h1>
<a routerLink="menu">Objednaj teraz! <i class="bi bi-arrow-right"></i></a>
</div>
</div>
<!-- step -->
<div class="container mt-5 mb-5">
<h1 class="text-center">Ako získať <span class="highlight">čerstvé koláče</span></h1>
<div class="row mt-3">
<!-- one -->
<div class="col-lg-4 mt-2">
<div class="stepBox">
<h1>1</h1>
<p>vyberte koláč</p>
</div>
</div>
<!-- two -->
<div class="col-lg-4 mt-2">
<div class="stepBox">
<h1>2</h1>
<p>vyplnte podrobnosti</p>
</div>
</div>
<!-- three -->
<div class="col-lg-4 mt-2">
<div class="stepBox">
<h1>3</h1>
<p>doručenie vašej objednávky</p>
</div>
</div>
</div>
</div>
<!-- cakebox -->
<div class="container mt-4 mb-4">
<h1 class="text-center">Obľúbené produkty</h1>
<div class="row">
<div class="col-lg-3 mt-3" *ngFor="let ck of cakeData; index as i">
<div class="cakebox" *ngIf="i<=3">
<img src="{{ck.cakeImg}}" />
<h1>{{ck.cakeName}}</h1>
<p>{{ck.cakePrice | currency:'EUR'}}</p>
</div>
</div>
</div>
<a routerLink="menu" class="viewmorebtn">Zobraziť viac<i class="bi bi-arrow-right"></i></a>
</div>
Thank you for your answers!
.content {
top: 25%;
left: 5%;
position: absolute;
}
The container of the h1 is positioned absolutely. The default z-index is causing it to overlap other elements which have a smaller z-index value.
Setting the z-index of the .content div and navbar may help to solve the problem.
.content {
top: 25%;
left: 5%;
position: absolute;
z-index: 10; /** something smaller than the z-index of the navbar **/
}
.navbar {
...
z-index: 20; /** something bigger than the z-index of .content **/
}
* {
box-sizing: border-box;
}
body {
font-family: 'Times New Roman', Times, serif;
padding: 10px;
background: #f1f1f1;
}
.header {
text-align: center;
background-color: rgb(255, 255, 255);
padding: 20px;
margin-bottom: 15px;
}
.header h1{
font-size: 30px;
}
.navbar {
overflow: hidden;
background-color: rgb(52, 52, 52);
position: sticky;
top: 0;
box-shadow: 5px 5px 10px rgba(52, 52, 52, 0.753);
}
.drop {
float: left;
overflow: hidden;
}
.drop .dropbtn {
font-size: 20px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
}
.navbar .a {
float: left;
display: block;
color: white;
text-decoration: none;
text-align: center;
padding: 14px 16px;
font-size: 20px;
}
.navbar .a:hover {
background-color: white;
color: black;
}
.drop-content {
display: none;
position: absolute;
background-color: rgb(234, 234, 234);
min-width: 160px;
z-index: 1;
}
.drop-content .a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.drop:hover .drop-content {
display: block;
}
.leftside {
float: left;
width: 75%;
}
.rightside {
float: left;
width: 25%;
padding-left: 20px;
}
.fakeimg {
background-color: rgb(176, 176, 176);
width: 100%;
padding: 20px;
}
div .fakeimg:hover {
border: 1px solid black;
cursor: pointer;
}
.card {
background-color: white;
padding: 20px;
margin-top: 20px;
}
.row:after {
content: "";
display: table;
clear: both;
}
.footer {
padding: 30px;
text-align: center;
background-color: rgb(248, 248, 248);
margin-top: 20px;
}
/* Responsive layout - when the screen is less than 800px wide, make the two columns stack on top of each other instead of next to each other */
#media screen and (max-width: 800px) {
.leftside, .rightside {
width: 100%;
padding: 0;
}
}
/* Responsive layout - when the screen is less than 400px wide, make the navigation links stack on top of each other instead of next to each other */
#media screen and (max-width: 400px) {
.navbar a {
float: none;
width: 100%;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<!--This is a link to the CSS.-->
<link rel="stylesheet" href="first_webpage.css">
<body>
<!--This is our header.-->
<div>
<header class="header">
<h1>First Webpage</h1>
</header>
</div>
<!--This is a navigation bar.-->
<div class="navbar">
Home
Projects
Contact
<div class="drop">
<button class="dropbtn">Dropdown
<i></i>
</button>
<div class="drop-content">
Link 1
Link 2
Link 3
</div>
</div>
About
</div>
<!--This is the first and main colum.-->
<div class="row">
<div class="leftside">
<div class="card">
<h2>Title One</h2>
<h5>Description, May 31, 2022</h5>
<div class="fakeimg" style="height: 200px;">Image</div>
<figcaption>Section 1.1 City</figcaption>
<p>This is subsection title</p>
<p>This is the first paragraph of the main section.
This also my first webpage. It definitly looks
like something from the <i><a href="https://www.nytimes.com/">
New York Times</a></i>. It's coming out pretty good;
i just need to continue taking it one step at a time.
Nonetheless, I will contue on with this section and
not bore you. Enjoy the rest of my layout.</p>
</div>
<div class="card">
<h2>Title Two</h2>
<h5>Description, May 31, 2022</h5>
<div class="fakeimg" style="height: 200px;">Image</div>
<figcaption>Section 1.2 Flowers</figcaption>
<p>This is a second section Title</p>
<p>This is a second paragraph, I really don't know
what to write. It's not like this is an engligh
101 class. i mean jesus. Talking about jesus, do
you know they're making a jesus game... i mean
what has the gaming industry come to?</p>
</div>
</div>
<div class="rightside">
<div class="card">
<h3>About Me</h3>
<div class="fakeimg" style="height: 100px;">Image</div>
<p>Some text about me so that the visiter may
know a bit more about the developer that they're
interested in...</p>
</div>
<div class="card">
<h3>Popular Posts</h3>
<div class="fakeimg"><p>Image</p></div>
<div class="fakeimg"><p>Image</p></div>
<div class="fakeimg"><p>Image</p></div>
<div class="fakeimg"><p>Image</p></div>
</div>
<div class="card">
<h3>Social Media</h3>
<p>Some social media pages that individuals can
follow me on....</p>
</div>
</div>
</div>
<!--This is a footer-->
<div class="footer">
<p>Footer</p>
</div>
</body>
</html>
I'm trying to create a dropdown menu for my dropdown button; as I create the dropdown button everything seems to be fine, however, once I put the position to "absolute" it does not allow me to view the content that is within the dropdown button even when I'm hovering over it. I tried changing the position to anything other than "absolute" and it does allow me to view the content, but it would either stretch the navigation bar down to make room for the options or place the content lower than where the button is located. Can anyone help me out with this problem? I provided the full code for my html and CSS because I think it may be clashing with another code.
I was trying to set up a footer for my site, and one of the lines of text became off-centre. I don't understand how this happened, but I know this wasn't happening on any other page of my site with the sticky footer, and it doesn't happen when I remove the <div class="page-wrap> tag for the body.
The only thing that's too big of a difference between this page of the site and any other is that I was using two iframes to play video. Everything else, including the page layout, was basically the same. The only other possibility I could think of was a typo and I couldn't find one. Any help would be greatly appreciated.
<DOCTYPE html>
<head>
<title>Title</title>
<style>
.topnav {
overflow: hidden;
background-color: black;
display:flex;
}
.topnav a {
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.topnav a:first-child {
font-weight: 700;
}
.topnav a:hover {
background-color: #151515;
font-weight: 700;
}
.topnav a:before {
display: block;
content: attr(data-title);
font-weight: 700;
overflow: hidden;
visibility: hidden;
height: 0;
}
.footer {
background-color: black;
text-align: center;
padding: 10px;
margin-bottom: 0;
}
.center {
text-align: center;
}
.column {
float: left;
padding: 10px;
}
.column.side {
width: 25%;
}
.column.middle {
width: 50%;
}
.row:after {
content: "";
display: table;
clear: both;
}
#media screen and (max-width: 600px) {
.column.side, .column.middle {
width: 100%;
}
}
body {
height: 100%;
}
.page-wrap {
min-height: 100%;
margin-bottom: -142px;
}
.page-wrap:after {
content: "";
display: block;
}
.footer, .page-wrape:after {
height: 142px;
}
</style>
</head>
<body>
<div class="page-wrap">
<h>heading<h>
<div class="topnav">
<a data-title="Home" href="\index.html">Home</a>
<a data-title="Page 2" href="\Page2\index.html">Coming Soon</a>
<a data-title="Page 3" href="\Page3\index.html">Video Library</a>
<a data-title="Page 4" href="\Page4\index.html">Cast and Crew</a>
</div>
<div class="row">
<div class="column side">
<p>side column contents</p>
</div>
<div class="column middle">
<p>middle column contents</p>
</div>
<div class="column side">
<p>side column contents</div>
</div>
</div>
</div>
<div class="footer">
<p>This line is not centered</p>
<p>This line is centered</p>
</div>
</body>
</html>
Grids will make your life a whole lot easier. Based on the grid solution from this article.
html {
height: 100%;
}
body {
min-height: 100%;
display: grid;
grid-template-rows: 1fr auto;
}
footer {
grid-row: 2;
}
.topnav {
overflow: hidden;
background-color: black;
display:flex;
}
.topnav a {
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.topnav a:first-child {
font-weight: 700;
}
.topnav a:hover {
background-color: #151515;
font-weight: 700;
}
.topnav a:before {
display: block;
content: attr(data-title);
font-weight: 700;
overflow: hidden;
visibility: hidden;
height: 0;
}
.row {
display: grid;
}
.row>*:nth-child(1) {
background-color: yellow;
}
.row>*:nth-child(2) {
background-color: cyan;
}
.row>*:nth-child(3) {
background-color: lime;
}
#media screen and (min-width: 600px) {
.row {
grid-template-columns: 1fr 2fr 1fr;
}
}
footer {
color: white;
background-color: black;
text-align: center;
padding: 10px;
}
<body>
<div class="page-wrap">
<h1>heading</h1>
<div class="topnav">
<a data-title="Home" href="\index.html">Home</a>
<a data-title="Page 2" href="\Page2\index.html">Coming Soon</a>
<a data-title="Page 3" href="\Page3\index.html">Video Library</a>
<a data-title="Page 4" href="\Page4\index.html">Cast and Crew</a>
</div>
<div class="row">
<div>
<p>side column contents</p>
</div>
<div>
<p>middle column contents</p>
</div>
<div>
<p>side column contents</div>
</div>
</div>
</div>
<footer>
<p>This line is centered</p>
<p>This line is centered</p>
</footer>
</body>
Just fix your HTML code (i.e. the superfluous </div> and unclosed h tags), then your css will apply and everything will work as expected:
<DOCTYPE html>
<html>
<head>
<title>Title</title>
<style>
.topnav {
overflow: hidden;
background-color: black;
display: flex;
}
.topnav a {
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.topnav a:first-child {
font-weight: 700;
}
.topnav a:hover {
background-color: #151515;
font-weight: 700;
}
.topnav a:before {
display: block;
content: attr(data-title);
font-weight: 700;
overflow: hidden;
visibility: hidden;
height: 0;
}
.footer {
background-color: black;
color: white;
text-align: center;
padding: 10px;
margin-bottom: 0;
}
.center {
text-align: center;
}
.column {
float: left;
padding: 10px;
}
.column.side {
width: 25%;
}
.column.middle {
width: 50%;
}
.row:after {
content: "";
display: table;
clear: both;
}
#media screen and (max-width: 600px) {
.column.side,
.column.middle {
width: 100%;
}
}
body {
height: 100%;
}
.page-wrap {
min-height: 100%;
margin-bottom: -142px;
}
.page-wrap:after {
content: "";
display: block;
}
.footer,
.page-wrape:after {
height: 142px;
}
</style>
</head>
<body>
<div class="page-wrap">
<div class="topnav">
<a data-title="Home" href="\index.html">Home</a>
<a data-title="Page 2" href="\Page2\index.html">Coming Soon</a>
<a data-title="Page 3" href="\Page3\index.html">Video Library</a>
<a data-title="Page 4" href="\Page4\index.html">Cast and Crew</a>
</div>
<div class="row">
<div class="column side">
<p>side column contents</p>
</div>
<div class="column middle">
<p>middle column contents</p>
</div>
<div class="column side">
<p>side column contents</div>
</div>
<div class="footer">
<p>This line is not centered</p>
<p>This line is centered</p>
</div>
</div>
</body>
</html>
There are 3 block different size in a row. How can I make them responsive, because in mobile version they overlay at each other.
.watch {
position: absolute;
bottom: 0;
left: 50px;
width: 224px;
height: 69px;
cursor: pointer;
background-color: #918A83;
opacity: 0.85;
}
.watch-elements {
margin: 20px 20px;
}
.watch p {
display: inline-block;
font-family: 'Open Sans', sans-serif;
font-size: 14px;
color: #fff;
}
.mouse {
position: absolute;
bottom: 0;
border: 1px solid #DAD3CC;
width: 577px;
height: 69px;
cursor: pointer;
background-color: #fff;
}
.mouse-elements {
text-align: center;
margin-top: 10px;
}
.mouse p {
display: inline-block;
font-family: 'Open Sans', sans-serif;
font-size: 14px;
color: #000;
}
.chat-bot {
position: absolute;
bottom: 20px;
background-color: #09A753;
border-radius: 100px;
right: 100px;
width: 227px;
height: 39px;
cursor: pointer;
}
.chat-bot img {
margin-top: -20px;
margin-left: -15px;
}
.chat-bot p {
display: flex;
justify-content: center;
text-align: center;
margin-top: -15px;
flex-direction: row;
font-family: 'Open Sans', sans-serif;
font-size: 14px;
color: #fff;
}
#media all and (max-width: 1024px) {
.watch img {
position: absolute;
float: left;
left: 0;
}
.watch p {
margin-left: 20px;
}
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div class="container">
<div class="row">
<div class="container mt-5">
<h2 class="header-text">Practical business advice and knowhow<br>customized to your needs</h2>
</div>
</div>
<div class="d-flex justify-content-left">
<div class="watch">
<div class="watch-elements">
<img src="assets/img/icons/icon2.svg">
<p>Watch Presenation</p>
</div>
</div>
</div>
<div class="d-flex justify-content-center">
<div class="mouse">
<div class="mouse-elements">
<img src="assets/img/icons/Icon1.svg"><br>
<p>Scroll Down</p>
</div>
</div>
</div>
<div class="d-flex justify-content-right">
<div class="chat-bot">
<img src="assets/img/06w.png">
<p>Hi, can I help you?</p>
<img src="assets/img/icons/icon3.svg" style="float: right; margin-right: -60px; margin-top: -39px;">
</div>
</div>
</div>
Now, they arrange in a row as on image
In mobile version left block disappears and I can not see it, also second and third block overlay at each other.
For mobile devices please try position: relative instead of position: absolute. Don't forget to adjust other CSS values as per your requirements. Hope this will solve your issues
#media all and (max-width: 767px) {
.watch, .mouse, .chat-bot{
position:relative;
right:auto;
left:auto;
top:auto;
bottom:auto;
margin:5px 0
}
}
I have put all the elements inside a div with class footer. and used bootstrap flex css properties to align it. Hope its helps you. thanks
.watch {
width: 224px;
height: 69px;
cursor: pointer;
background-color: #918A83;
opacity: 0.85;
}
.watch-elements {
margin: 20px 20px;
}
.watch p {
display: inline-block;
font-family: 'Open Sans', sans-serif;
font-size: 14px;
color: #fff;
}
.mouse {
border: 1px solid #DAD3CC;
width: 577px;
height: 69px;
cursor: pointer;
background-color: #fff;
}
.mouse-elements {
text-align: center;
margin-top: 10px;
}
.mouse p {
display: inline-block;
font-family: 'Open Sans', sans-serif;
font-size: 14px;
color: #000;
}
.chat-bot {
background-color: #09A753;
border-radius: 100px;
right: 100px;
width: 227px;
height: 39px;
cursor: pointer;
}
.chat-bot img {
margin-top: -20px;
margin-left: -15px;
}
.chat-bot p {
display: flex;
justify-content: center;
text-align: center;
margin-top: -15px;
flex-direction: row;
font-family: 'Open Sans', sans-serif;
font-size: 14px;
color: #fff;
}
#media all and (max-width: 1024px) {
.watch img {
position: absolute;
float: left;
left: 0;
}
.watch p {
margin-left: 20px;
}
}
.footer {
position: absolute;
bottom: 0;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div class="container">
<div class="row">
<div class="container mt-5">
<h2 class="header-text">Practical business advice and knowhow<br>customized to your needs</h2>
</div>
</div>
<div class="d-flex footer justify-content-sm-center align-content-between flex-sm-wrap flex-lg-nowrap">
<div class="d-flex justify-content-left">
<div class="watch">
<div class="watch-elements">
<img src="assets/img/icons/icon2.svg">
<p>Watch Presenation</p>
</div>
</div>
</div>
<div class="d-flex justify-content-center">
<div class="mouse">
<div class="mouse-elements">
<img src="assets/img/icons/Icon1.svg"><br>
<p>Scroll Down</p>
</div>
</div>
</div>
<div class="d-flex justify-content-right align-items-center">
<div class="chat-bot">
<img src="assets/img/06w.png">
<p>Hi, can I help you?</p>
<img src="assets/img/icons/icon3.svg" style="float: right; margin-right: -60px; margin-top: -39px;">
</div>
</div>
</div>
</div>
you can try replacing your existing divs with the below ones
<div class="d-flex justify-content-left col-lg-3 col-md-6 col-xs-12">
<div class="d-flex justify-content-center col-lg-3 col-md-6 col-xs-12">
<div class="d-flex justify-content-right col-lg-3 col-md-6 col-xs-12">
position:absolute and related properties are not suitable for this function. You can use CSS flexbox layout
For more information use this link: Complete Guide to Flexbox
I explain simple usage of flexbox layout using example:
#wrapper{display:flex;flex-wrap:wrap;justify-content:space-between}
/*just for styles*/
#wrapper div{background-color:#f5f5f5;text-align:center;padding:2px 5px;margin:2px}
#e3{width:200px}
<div id="wrapper">
<div id="e1">element 1</div>
<div id="e2">element 2</div>
<div id="e3">element 3</div>
<div id="e4">element 4</div>
</div>
Also with flex layout you can manipulate elements places based on viewport size with order property.
I'm trying to remove the white space at the bottom and right side of the website. On the right side it seems that it's caused by the black navbar but I don't have a clue how to fix it.
/* Navbar */
.navbar-default {
background-color: transparent;
border-color: transparent;
}
.navbar-fixed-top .navbar-brand,
.navbar-fixed-top .navbar-nav>li>a {
color: #fff;
}
.navbar-default .navbar-toggle {
border-color: #000;
}
.navbar-default .navbar-toggle:focus,
.navbar-default .navbar-toggle:hover {
background-color: #fff;
}
.navbar-default .navbar-toggle,
.navbar-default .navbar-toggle {
background-color: transparent;
}
.navbar-fixed-top.scrolled {
background: black;
}
.navbar-toggle {
position: relative;
float: right;
padding: 9px 10px;
margin-top: 8px;
margin-right: 15px;
margin-bottom: 8px;
background-color: transparent;
background-image: none;
border: 1px solid transparent;
border-radius: 4px;
}
.non-underline {
text-decoration: none;
}
.navbar-fixed-top .navbar-brand,
.navbar-fixed-top .navbar-nav>li>a {
color: #fff!important;
}
.navbar-fixed-top .navbar-brand,
.navbar-fixed-top .navbar-nav>li>a:hover {
text-decoration: underline;
background-color: transparent;
color: #fff!important;
}
.navbar-nav>li>a:focus,
.navbar-nav>li>a:active,
.navbar-nav>li>a.active {
background-color: transparent;
color: #fff!important;
}
#logo-img {
width: 70%;
}
/* End Navbar */
/* Jumbotron */
#first {
padding: 0;
}
.jumbotron-image {
max-width: 100%;
height: auto;
}
h2>a {
color: #565656;
}
a:hover {
text-decoration: none;
}
#h1first {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: #FFF;
font-family: 'Philosopher', sans-serif;
}
/* End Jumbotron */
/* About */
#abouth2 {
visibility: hidden;
}
#about-section {
padding-top: 8%;
padding-bottom: 10%;
}
.fadeInBlock {
opacity: 0;
}
#p-about {
font-size: 180%;
font-family: 'Raleway', sans-serif;
}
#img-about {
padding: 0;
}
/*End About*/
/*Portfolio*/
#portfolio-section {
background-color: ;
background: #B5927E;
background: -webkit-linear-gradient(left top, #B5927E, #6C5461);
background: -o-linear-gradient(bottom right, #B5927E, #6C5461);
background: -moz-linear-gradient(bottom right, #B5927E, #6C5461);
background: linear-gradient(to bottom right, #B5927E, #6C5461);
padding-top: 2%;
padding-bottom: 10%;
}
.headline {
font-family: 'Merriweather', serif;
color: #484A4A;
}
.headline.fadeInBlock>a {
color: #484A4A;
}
.headline.fadeInBlock>a:hover {
color: #484A4A;
}
#portfolio-id {
margin-bottom: 2%;
}
/*End Portfolio*/
/*Contact*/
#contact-section {
background-color: #4D3C4F;
padding-top: 2%;
padding-bottom: 5%;
}
.social-icons {
color: #b7b7b7;
}
.fa {
font-size: 40px;
padding: 20px;
transition: 0.5s;
}
.fa-facebook-official {
vertical-align: middle;
margin: auto;
}
.fa-twitter {
vertical-align: middle;
margin: auto;
}
.fa-free-code-camp {
vertical-align: middle;
margin: auto;
}
.fa-envelope {
vertical-align: middle;
margin: auto;
}
#facebook:hover {
color: #3b5998;
}
#twitter:hover {
color: #00aced;
}
#fcc:hover {
color: #006401;
}
#email:hover {
color: #92b8f4;
}
ul {
list-style: none;
}
/*End Contact*/
/*Footer*/
footer {
background-color: #382F4A;
}
#copy {
color: #FFFFFF;
}
/*End Footer*/
<!--Navbar-->
<div class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand"><img src="http://i64.tinypic.com/27wy82r.png" id="logo-img"></a>
<a class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav pull-right">
<li>Home</li>
<li>About</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</div>
</div>
</div>
<!--End Navbar-->
<!--Jumbotron-->
<div class="row">
<div class="col-md-12">
<div class="jumbotron" id="first" href="#home">
<img class="jumbotron-image" src="http://netdna.webdesignerdepot.com/uploads/2014/07/featured36.jpg">
<h1 class="text-center fadeInPage" id="h1first">
Welcome to Cosmos<br> web design
</h1>
</div>
</div>
</div>
<!--End Jumbotron-->
<!--About-->
<div class="container" id="about-section">
<div class="row">
<div class="col-md-6">
<h2 class="text-center" id="abouth2"><a name="about">About</a></h2>
<p class="fadeInBlock" id="p-about">Cosmos Web Design was created by George Kech. I provide web solutions that require HTML, CSS, JavaScript and JQuery. I focus on serving the needs of each customer individually with complete satisfaction as my goal.</p>
</div>
<div class="col-md-6">
<img src="https://www.topechelon.com/wp-content/uploads/2016/07/devices-web-design.png" alt="web design" class="img-responsive">
</div>
</div>
</div>
<!--End About-->
<!--Portfolio-->
<div class="container-inner" id="portfolio-section">
<h2 class="text-center headline fadeInBlock" id="portfolio-id"><a name="portfolio">Portfolio</a> is coming soon...</h2>
<div class="container">
<div class="row text-center">
<div class="col-md-4">
<img src="https://lh4.googleusercontent.com/-fj6pace2cv0/U9Jt75Kq8PI/AAAAAAAARtE/ttg-4YuCOfQ/s250/exe_empty_thumbnail.jpg">
</div>
<div class="col-md-4">
<img src="https://lh4.googleusercontent.com/-fj6pace2cv0/U9Jt75Kq8PI/AAAAAAAARtE/ttg-4YuCOfQ/s250/exe_empty_thumbnail.jpg">
</div>
<div class="col-md-4">
<img src="https://lh4.googleusercontent.com/-fj6pace2cv0/U9Jt75Kq8PI/AAAAAAAARtE/ttg-4YuCOfQ/s250/exe_empty_thumbnail.jpg">
</div>
</div>
</div>
</div>
<!--End Portfolio-->
<!--Contact-->
<div class="container-fluid">
<div class="row" id="contact-section">
<div class="col-md-12">
<div class="text-center">
<i class="social-icons fa fa-facebook-official" id="facebook"></i>
<i class="social-icons fa fa-twitter" id="twitter"></i>
<i class="social-icons fa fa-free-code-camp" id="fcc"></i>
<i class="social-icons fa fa-envelope" id="email"></i>
<h3 id="contactMe">
<a name="contact"></a>
</h3>
</div>
</div>
</div>
</div>
<!--End Contact-->
<!--Footer-->
<footer>
<p class="text-center" id="copy">George Kech © 2017</p>
</footer>
And here's the link to the codepen: Codepen
I think it's your top level nesting. You need to wrap the jumbotron into a container div as well. You can make it fluid if you need full width:
<div class="container-fluid">
<div class="row">
...
</div>
Generally speaking, if you look at basic templates provided by boostrap's documentation, they place all body content into a container div.
This is due to the fact that each row has a -15px margin.
It's caused by your Bootstrap:
Every .row has a negative margin left and right, while every .col-* has a padding left and right by the same amount.
We have to get rid of that. But we need it back inside .container classes.
Look here: https://codepen.io/anon/pen/QpOyyo
I added this CSS:
/* Don't add padding to all elements that have classes like "col-md-*" */
[class^="col-md-"],
[class*=" col-md-"] {
padding-right: 0;
padding-left: 0;
}
/* Add back the Bootstrap padding, if inside .container */
.container [class^="col-md-"],
.container [class*=" col-md-"] {
padding-right: 15px;
padding-left: 15px;
}
/* Don't add negative margin for all rows */
.row {
margin-left: 0;
margin-right: 0;
}
/* Add back the Bootstrap margin, if inside .container */
.container .row {
margin-left: -15px;
margin-right: -15px;
}
Update: Add this as well to address the footer issue.
.container-fluid {
padding-right:0px;
padding-left:0px;
}
footer p{
margin:0;
}
its caused by the padding-right on the div .col-md-12. Set it to 0 and its fine.
The white space at the bottom is caused by the #copy in the footer, add margin-bottom: 0 to it.