So I am working on an assignment, and in full screen on the desktop it looks fine. However in mobile the top o fthe page background doesn't extend right, the middle section is not centered, and the bottom section does not extend right. Also when I shrink the page in my browser the text in the top third gets cut off rather than scaling. I am at a bit of a loss and am hoping for some sort of guidance. I am new to web applications. I have included the code as well as links to the page and my repository oif the code
https://profile-josh-adams.herokuapp.com/
https://github.com/ender554/profile
HTML
<head>
<title>Josh Adams</title>
<%= csrf_meta_tags %>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
</head>
<body>
<nav class="navbar navbar-toggleable-md navbar-inverse bg-inverse">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarTogglerDemo01">
<a class="navbar-brand" href="#index-page">Josh Adams</a>
<ul class="navbar-nav mr-auto mt-2 mt-lg-0">
<li class="nav-item">
<a class="nav-link" href="#index-page">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#resume-page">Resume<span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#links-page">Links</a>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="nav-item">
<a class="nav-link" href="mailto:joshadams554#gmail.com">Contact</a>
</li>
</ul>
</div>
</nav>
<div class="index container-fluid" id="index-page">
<div class="headline">About Me</div>
<hr>
<div class="media col-8 offset-2">
<span class="media-left">
<%= image_tag("profilephoto.jpg") %>
</span>
<div class="media-body">
<h2 class="media-heading">Joshua Adams:</h2>
<hr class="title-rule">
<h3 class="about-body">
I am a 37 year old student with an extreme eagerness to learn, and be
<br /><br />a key contributor in any profession. I love the academic setting and
<br /><br />the skills it has helped me build, but I understand that in this field it is
<br /><br /> most important to learn in a real world environment, and I hope to
<br /><br />extend my abilities greatly.
</h3>
</div>
</div>
</div>
<div class="resume col-6 offset-3" id="resume-page">
<h1 class="resume">Resume:</h1>
<div class="resume-itself">
<%= image_tag("resume.jpg") %>
</div>
</div>
<div class="links" id="links-page">
<h1 class="links-title">Links:</h1>
<div class="actual-links col-8 offset-2">
<div class="row">
<div class="col">
<%= link_to image_tag("linkedin.png"), "https://www.linkedin.com/in/joshua-adams-061901b6/", :target => "_blank" %>
</div>
<div class="col">
<%= image_tag("piazza.png") %>
</div>
<div class="col">
<%= link_to image_tag("github.jpg"), "https://github.com/ender554", :target => "_blank" %>
</div>
</div>
<ul>
<li>
</li>
</ul>
</div>
</div>
</body>
</html>
CSS
#import "bootstrap";
body {
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
min-width: 100%;
min-height: 100%;
background-position: center;
}
#index-page {
background: image_url('indexbackground.jpg') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
min-width: 100%;
min-height: 100%;
}
h1 {
color: white;
}
.media {
margin-top: 50px;
}
.headline {
font-size: 80pt;
text-align: center;
color: white;
margin-top: 50px;
font-family: 'chunkfiveroman';
}
hr {
width: 75%;
color: black;
height: 2px;
background-color: white;
margin-top: 0px;
padding-top: 0px;
}
.title-rule {
width: 95%;
color: black;
height: 2px;
background-color: white;
margin-top: 0px;
padding-top: 0px;
}
.media-heading {
margin-left: 25px;
color: white;
}
.index {
padding-top: 50px;
height: 1000px;
width: 100%;
}
.about-body{
margin-left: 20px;
color: white;
}
.resume {
margin-top: 20px;
text-align: center;
color: Black;
font-size: 50pt;
padding-top: 20px;
}
.navbar {
position: fixed;
top: 0;
width: 100%;
z-index:1;
}
.media-left img{
border-radius: 5%;
border: solid white 2px;
}
.links {
margin-top: 20px;
text-align: center;
background-color: Black;
width: 100%;
font-size: 50pt;
height: 1000px;
padding-top: 50px;
}
.links-title {
margin-bottom: 80px;
font-size: 80pt;
padding-top: -10px;
}
you need to add this two lines in your head tag, this will fixed your responsive issue
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
last line is for responsive purpose
you have one more css issue your image is too large
apply below css and it will take care of it
.resume-itself img{
max-width: 100%;
}
use proper classes which bootstrap provided. you are using bootstrap classes in wrong way
use this link to learn more about bootstrap
bootstrap 3 tutorial
you may need to add following lines inside element.
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
Ex - .
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
Related
I am fairly new to coding and have a specific issue that I cannot figure out. I have a container that I want positioned differently based on the screen size. For large and mid-sized screens, I want the container left justified with a small amount of padding from the left edge, and on small screens, I want the container centered. I am using bootstraps, html, and css. See my style and code below. The container is overtop of a background image.
<!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 http-equiv="x-ua-compatible" content="ie=edge" />
<title>Website Name</title>
<!-- MDB icon -->
<link rel="icon" href="img/mdb-favicon.ico" type="image/x-icon" />
<!-- Font Awesome -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.2/css/all.css" />
<!-- Google Fonts Roboto -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght#300;400;500;700&display=swap" />
<!-- MDB -->
<link rel="stylesheet" href="css/mdb.min.css" />
</head>
<style>
#media (min-width: 100%) {
#intro {
min-width: 100%;
margin-right: none;
margin-top: -58.59px;
background-color: none;
}
}
.alfa {
position: absolute;
max-width: inherit;
margin-top: 55vh;
align-items: center;
justify-content: center;
background-color: white;
color: black;
border: lightgrey;
border-style: solid;
border-width: thin;
border-radius: 0em;
font-size: 1em;
padding: 1rem 1rem 1rem 1rem;
box-shadow: 0 0 20px black
}
.no-pad {
margin-right: 0rem;
margin-left: 0rem;
}
.navbar-brand {
margin-left: 1rem;
}
.nav-item {
margin-right: 1rem;
}
.row {
font-size: 1.5em;
}
.main-button {
display: inline-flex;
align-items: center;
justify-content: center;
}
#button1 {
font-size: 1.5em;
}
</style>
<body>
<!-- Header Bar -->
<header>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
<a class="navbar-brand" href="">My Accounting Exec</a>
<!--Toggle Button-->
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<i title="" class="fa fa-bars"></i>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ms-auto">
<li class="nav-item text-center"><a class="nav-link" href="" style="color:white;">Services</a></li>
<li class="nav-item text-center"><a class="nav-link" href="" style="color:white;">Pricing</a></li>
<li class="nav-item text-center"><a class="nav-link" href="" style="color:white;">About</a></li>
<li class="nav-item text-center"><a class="nav-link" href="" style="color:white;">Contact</a></li>
</ul>
</div>
</nav>
</header>
<!-- Background-Image -->
<container>
<div class="bg-image" style="background-image: url('../MDB5-STANDARD-UI-KIT-Free-3.5.1/img/Accountant.jpg'); height: 89vh;">
<div class="Alert-Box text-center">
<div class="alfa text-center;">
<h5><b>Text Text Text</b></h5>
<div><button id="button1" type="button" class="btn btn-primary">WE ARE HERE FOR YOU!</button></div>
</div>
</div>
</div>
</container>
<!-- Service Links -->
<div class="row no-pad text-center">
<div class="col-lg-3 col-md-3 col-sm-12 d-flex align-items-center justify-content-center" style="border: solid .5px grey;
background-color: lightgrey;
height: 4.5rem;
padding: 0;">
</style>
<button href="" style="border: none; background-color: rgb(210, 210, 210); height: 100%; width: 100%; padding-left: 0mm;">
<b>Service 1</b></button>
</div>
<div class="col-lg-3 col-md-3 col-sm-12 d-flex align-items-center justify-content-center" style="border: solid .5px grey;
height: inherit;
background-color: lightgrey;
height:4.5rem;
padding: 0;">
</style>
<button href="" style="border: none; background-color: rgb(180, 180, 180);height: 100%; width: 100%; padding-left: 0mm;">
<b>Service 2</b></button>
</div>
<div class="col-lg-3 col-md-3 col-sm-12 d-flex align-items-center justify-content-center" style="border: solid .5px grey;
height: inherit;
background-color: lightgrey;
height:4.5rem;
padding: 0;">
</style>
<button href="" style="border: none; background-color: rgb(160, 160, 160); height: 100%; width: 100%; padding-left: 0mm;">
<b>Service 3</b></a>
</div>
<div class="col-lg-3 col-md-3 col-sm-12 d-flex align-items-center justify-content-center"
style="border: solid .5px grey;
height: inherit;
background-color: lightgrey;
height:4.5rem;
padding: 0;"></style>
<button href=""
style="border: none; background-color: rgb(140, 140, 140); height: 100%; width: 100%; padding-left: 0mm;">
<b>Service 4</b></a>
</div>
</div>
<!-- End your project here-->
<!-- MDB -->
<script type="text/javascript" src="js/mdb.min.js"></script>
<!-- Custom scripts -->
<script type="text/javascript"></script>
<!-- Bootstrap JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/js/bootstrap.min.js" integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT" crossorigin="anonymous"></script>
</body>
</html>
Without reading through all of your code, you need proper media queries that establish generalized rules and mobile only rules: ie
.container {
/* CODE TO LEFT ALIGN CONTENT + padding */
}
#media only screen and (max-width: 768px) {
.container {
/* CODE TO CENTER CONTENT*/
}
}
That way you can have generalized rules and target specific screen size treshholds.
Hope that makes sense for you.
I am trying to design a simple website, and I have made a div's with a frosted glass effect, now I can position it left and right yet I can't seem to move it up!? the div in question has the name of product panel.
*{
margin: 0;
padding: 0;
}
.background{
background-image: url("http://www.kubipet.com/data/out/55/iwp779807523-electrical-wallpapers.jpg");
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
}
#header-frosted{
background: inherit;
position: relative;
width:100%;
height: 200px;
}
.jumbotron-fluid{
background: inherit;
padding-left: 0px;
padding-right:0px;
padding-top:0px;
padding-bottom: 0px;
margin-bottom: 0px;
width: 100%;
color:rgb(0, 0, 0);
}
.display-3{
text-align: center;
margin-top:50px;
}
.navbar.main {
background-color:rgb(0, 0, 0);
color: rgb(255, 255, 255);
margin-top: 0px;
border-style: none;
border-radius: 0%;
}
.nav-pills{
margin-top:2px;
text-align: center;
margin-top:5px;
margin-bottom: 0px;
}
#tab{
color: white;
}
#tab:hover {
background-color: rgb(63, 60, 60);
}
.frosted-glass {
width:10%;
height:auto;
background: inherit;
position: relative;
z-index: 1;
overflow: hidden;
margin: 30px,30px,30px,30px;
padding: 2rem;
box-sizing: border-box;
}
.frosted-glass::before {
width:auto;
height:auto;
content: "";
position: absolute;
z-index: -1;
top: 0; right: 0; bottom: 0; left: 0;
background: inherit;
box-shadow: inset 0 0 3000px rgba(255,255,255,.5);
filter: blur(5px);
}
#product-panel{
width:500px;
height: 400px;
text-align:left;
position: absolute;
margin-top:20px;
}
#contact-details{
width:200px;
height: 330px;
text-align:left;
margin-left: auto;
margin-bottom: 100px;
position: relative;
}
#details{
text-align: center;
}
enter code here
`<!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">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" media="screen" href="fonts\css\font-awesome.min.css">
<link rel="stylesheet" type="text/css" media="screen" href="css\KAD-css.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<title>Website</title>
</head>
<body class="background">
<div class="jumbotron jumbotron-fluid frosted-glass" id="header-frosted" >
<div class="container img-responsive">
<h1 class="display-3">Random Title</h1>
</div>
</div>
<nav class="navbar navbar-expand-lg navbar-dark navbar-default main" >
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#"id="tab">Random Title</a>
</div>
<div class="collapse navbar-collapse text-centre" id="myNavbar">
<ul class="nav nav-pills center-pills">
<li class="nav-item ">
<a class="nav-link" href="#" id="tab"> Random1
</a>
</li>
<li class="nav-item ">
<a class="nav-link" href="#"id="tab"> Random2
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"id="tab"> Random3
</a>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
</ul>
</div>
</div>
</nav>'
<div class="frosted-glass" id="contact-details">
<h3 id="details">Contact Details</h3>
<p><strong>Name:</strong>John Doe</p>
<p><strong>Phone Number:</strong> 000000000</p>
<h3>Address:</h3>
<strong><p>Random Title.</p>
<p>PO Box 000</p>
<p>Random Town, Random Country</p>
<p>000</p>
</strong>
</div>
<!--Product Panel-->
<div class="frosted-glass" id="product-panel">
This is the div in question.
</div>
</body>
</html>
Bearing in mind i just started out with web design some help and input is greatly appreciated.
<!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">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" media="screen" href="fonts\css\font-awesome.min.css">
<link rel="stylesheet" type="text/css" media="screen" href="css\KAD-css.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<title>Website</title>
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
<style>
*{
margin: 0;
padding: 0;
}
.background{
background-image: url("http://www.kubipet.com/data/out/55/iwp779807523-electrical-wallpapers.jpg");
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
}
#header-frosted{
background: inherit;
position: relative;
width:100%;
height: 200px;
}
.jumbotron-fluid{
background: inherit;
padding-left: 0px;
padding-right:0px;
padding-top:0px;
padding-bottom: 0px;
margin-bottom: 0px;
width: 100%;
color:rgb(0, 0, 0);
}
.display-3{
text-align: center;
margin-top:50px;
}
.navbar.main {
background-color:rgb(0, 0, 0);
color: rgb(255, 255, 255);
margin-top: 0px;
border-style: none;
border-radius: 0%;
}
.nav-pills{
margin-top:2px;
text-align: center;
margin-top:5px;
margin-bottom: 0px;
}
#tab{
color: white;
}
#tab:hover {
background-color: rgb(63, 60, 60);
}
.frosted-glass {
width:10%;
height:auto;
background: inherit;
position: relative;
z-index: 1;
overflow: hidden;
margin: 30px,30px,30px,30px;
padding: 2rem;
box-sizing: border-box;
}
.frosted-glass::before {
width:auto;
height:auto;
content: "";
position: absolute;
z-index: -1;
top: 0; right: 0; bottom: 0; left: 0;
background: inherit;
box-shadow: inset 0 0 3000px rgba(255,255,255,.5);
filter: blur(5px);
}
#product-panel{
width:500px;
height: 400px;
text-align:left;
position: absolute;
margin-top:20px;
}
#contact-details{
width:200px;
height: 330px;
text-align:left;
margin-left: auto;
margin-bottom: 100px;
position: relative;
}
#details{
text-align: center;
}
/*
Start of Code - Laxmikant Killekar
*/
body{
overflow-x: hidden;
}
/*
End of Code - Laxmikant Killekar
*/
</style>
</head>
<body class="background">
<div class="jumbotron jumbotron-fluid frosted-glass" id="header-frosted" >
<div class="container img-responsive">
<h1 class="display-3">Random Title</h1>
</div>
</div>
<nav class="navbar navbar-expand-lg navbar-dark navbar-default main" >
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#"id="tab">Random Title</a>
</div>
<div class="collapse navbar-collapse text-centre" id="myNavbar">
<ul class="nav nav-pills center-pills">
<li class="nav-item ">
<a class="nav-link" href="#" id="tab"> Random1</a>
</li>
<li class="nav-item ">
<a class="nav-link" href="#"id="tab"> Random2 </a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"id="tab"> Random3</a>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
</ul>
</div>
</div>
</nav>
<!-- Start of Code - Laxmikant Killekar -->
<div class="fluid-container">
<div class="row">
<div class="col-md-6">
<!--Product Panel-->
<div class="frosted-glass" id="product-panel">
This is the div in question.
</div>
</div>
<div class="col-md-4 pull-right">
<div class="frosted-glass" id="contact-details">
<h3 id="details">Contact Details</h3>
<p><strong>Name:</strong>John Doe</p>
<p><strong>Phone Number:</strong> 000000000</p>
<h3>Address:</h3>
<strong><p>Random Title.</p>
<p>PO Box 000</p>
<p>Random Town, Random Country</p>
<p>000</p>
</strong>
</div>
</div>
</div>
</div>
<!--End of Code - Laxmikant Killekar-->
</body>
</html>
here
is the codepen, tell me if it solved your problem
put your
<div class="frosted-glass" id="product-panel">
before<div class="frosted-glass" id="contact-details">
Add top:(value)px to this
#product-panel{
width:500px;
height: 400px;
text-align:left;
position: absolute;
margin-top:20px;
top:320px;
}
and you can change position to it
*{
margin: 0;
padding: 0;
}
.background{
background-image: url("http://www.kubipet.com/data/out/55/iwp779807523-electrical-wallpapers.jpg");
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
}
#header-frosted{
background: inherit;
position: relative;
width:100%;
height: 200px;
}
.jumbotron-fluid{
background: inherit;
padding-left: 0px;
padding-right:0px;
padding-top:0px;
padding-bottom: 0px;
margin-bottom: 0px;
width: 100%;
color:rgb(0, 0, 0);
}
.display-3{
text-align: center;
margin-top:50px;
}
.navbar.main {
background-color:rgb(0, 0, 0);
color: rgb(255, 255, 255);
margin-top: 0px;
border-style: none;
border-radius: 0%;
}
.nav-pills{
margin-top:2px;
text-align: center;
margin-top:5px;
margin-bottom: 0px;
}
#tab{
color: white;
}
#tab:hover {
background-color: rgb(63, 60, 60);
}
.frosted-glass {
width:10%;
height:auto;
background: inherit;
position: relative;
z-index: 1;
overflow: hidden;
margin: 30px,30px,30px,30px;
padding: 2rem;
box-sizing: border-box;
}
.frosted-glass::before {
width:auto;
height:auto;
content: "";
position: absolute;
z-index: -1;
top: 0; right: 0; bottom: 0; left: 0;
background: inherit;
box-shadow: inset 0 0 3000px rgba(255,255,255,.5);
filter: blur(5px);
}
#product-panel{
width:500px;
height: 400px;
text-align:left;
position: absolute;
margin-top:20px;
top:320px;
}
#contact-details{
width:200px;
height: 330px;
text-align:left;
margin-left: auto;
margin-bottom: 100px;
position: relative;
}
#details{
text-align: center;
}
enter code here
`<!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">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" media="screen" href="fonts\css\font-awesome.min.css">
<link rel="stylesheet" type="text/css" media="screen" href="css\KAD-css.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<title>Website</title>
</head>
<body class="background">
<div class="jumbotron jumbotron-fluid frosted-glass" id="header-frosted" >
<div class="container img-responsive">
<h1 class="display-3">Random Title</h1>
</div>
</div>
<nav class="navbar navbar-expand-lg navbar-dark navbar-default main" >
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#"id="tab">Random Title</a>
</div>
<div class="collapse navbar-collapse text-centre" id="myNavbar">
<ul class="nav nav-pills center-pills">
<li class="nav-item ">
<a class="nav-link" href="#" id="tab"> Random1
</a>
</li>
<li class="nav-item ">
<a class="nav-link" href="#"id="tab"> Random2
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"id="tab"> Random3
</a>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
</ul>
</div>
</div>
</nav>'
<div class="frosted-glass" id="contact-details">
<h3 id="details">Contact Details</h3>
<p><strong>Name:</strong>John Doe</p>
<p><strong>Phone Number:</strong> 000000000</p>
<h3>Address:</h3>
<strong><p>Random Title.</p>
<p>PO Box 000</p>
<p>Random Town, Random Country</p>
<p>000</p>
</strong>
</div>
<!--Product Panel-->
<div class="frosted-glass" id="product-panel">
This is the div in question.
</div>
</body>
</html>
When you use more than one items in a line, it should satisfy the width proportion
So, give width percentage '%' instead of pixel 'px',
here you can use float:left to include more than one item in a line.
Try to use width in percentage, it is the way most developers use
*{
margin: 0;
padding: 0;
}
.background{
background-image: url("http://www.kubipet.com/data/out/55/iwp779807523-electrical-wallpapers.jpg");
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
}
#header-frosted{
background: inherit;
position: relative;
width:100%;
height: 200px;
}
.jumbotron-fluid{
background: inherit;
padding-left: 0px;
padding-right:0px;
padding-top:0px;
padding-bottom: 0px;
margin-bottom: 0px;
width: 100%;
color:rgb(0, 0, 0);
}
.display-3{
text-align: center;
margin-top:50px;
}
.navbar.main {
background-color:rgb(0, 0, 0);
color: rgb(255, 255, 255);
margin-top: 0px;
border-style: none;
border-radius: 0%;
}
.nav-pills{
margin-top:2px;
text-align: center;
margin-top:5px;
margin-bottom: 0px;
}
#tab{
color: white;
}
#tab:hover {
background-color: rgb(63, 60, 60);
}
.frosted-glass {
width:10%;
height:auto;
background: inherit;
position: relative;
z-index: 1;
overflow: hidden;
margin: 30px,30px,30px,30px;
padding: 2rem;
box-sizing: border-box;
}
.frosted-glass::before {
width:auto;
height:auto;
content: "";
position: absolute;
z-index: -1;
top: 0; right: 0; bottom: 0; left: 0;
background: inherit;
box-shadow: inset 0 0 3000px rgba(255,255,255,.5);
filter: blur(5px);
}
#product-panel{
width:70%;
height: 400px;
text-align:left;
float:left;
}
#contact-details{
width:30%;
height: 330px;
text-align:left;
margin-left: auto;
margin-bottom: 100px;
float:left;
}
#details{
text-align: center;
}
enter code here
`<!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">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" media="screen" href="fonts\css\font-awesome.min.css">
<link rel="stylesheet" type="text/css" media="screen" href="css\KAD-css.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<title>Website</title>
</head>
<body class="background">
<div class="jumbotron jumbotron-fluid frosted-glass" id="header-frosted" >
<div class="container img-responsive">
<h1 class="display-3">Random Title</h1>
</div>
</div>
<nav class="navbar navbar-expand-lg navbar-dark navbar-default main" >
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#"id="tab">Random Title</a>
</div>
<div class="collapse navbar-collapse text-centre" id="myNavbar">
<ul class="nav nav-pills center-pills">
<li class="nav-item ">
<a class="nav-link" href="#" id="tab"> Random1
</a>
</li>
<li class="nav-item ">
<a class="nav-link" href="#"id="tab"> Random2
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"id="tab"> Random3
</a>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
</ul>
</div>
</div>
</nav>'
<!--Product Panel-->
<div class="frosted-glass" id="product-panel">
This is the div in question.
</div>
<div class="frosted-glass" id="contact-details">
<h3 id="details">Contact Details</h3>
<p><strong>Name:</strong>John Doe</p>
<p><strong>Phone Number:</strong> 000000000</p>
<h3>Address:</h3>
<strong><p>Random Title.</p>
<p>PO Box 000</p>
<p>Random Town, Random Country</p>
<p>000</p>
</strong>
</div>
</body>
</html>
This is only my second time using Bootstrap in a project. I'm not sure what is causing my page to not be properly responsive. When resizing the view port content shifts out of the containers. I believe it is being caused by improper usage of the Bootstrap col-* and rows classes. Below is the HTML and CSS code.
EDIT: I have recently gone trough and refactored some of the code and found that I did not put rows inside of columns properly.
.wrapper {
position: relative;
padding: 0 15px;
}
.responsive-image {
width: 100%;
height: auto;
}
#statement {
position: absolute;
text-align: center;
top: 280px;
left: 300px;
font-size: 50px;
font-weight: bold;
color: #ffffff;
}
.row-eq-height {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
flex-wrap: wrap;
top: -215px;
position: relative;
max-width: 96.7vw;
height: 200px;
left: 30px;
top: -340px;
padding-bottom: 50px;
}
a {
color: #ffffff;
}
.search-text {
padding-left: 10px;
float: right;
}
.glyphicon-search {
padding-top: 10px;
padding-left: 30px;
color: black;
}
.search-bar-container {
padding-top: 10px;
background-color: red;
top: -390px;
max-width: 96.7vw;
height: 70px;
left: 31px;
}
.row-eq-height>[class*='col-'] {
position: relative;
display: flex;
flex-direction: column;
text-align: center;
padding-top: 50px;
font-size: 25px;
font-style: italic;
font-weight: bold;
}
.translucent>div {
background-color: rgba(0, 0, 0, 0.5);
border: solid 1px #ffffff;
}
.nav-item>a {
color: #000000;
font-weight: bold;
}
.nav-wrapper {
position: absolute;
right: 0;
left: 0;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mock Up</title>
<!-- Bootstrap Link -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Custom CSS -->
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div class="nav-wrapper">
<nav class="navbar navbar-static-top">
<!--Navbar-->
<div class="row">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#mainNavBar">
<!-- Collapsing Hamburger Buttons for mobile -->
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!--Menu Items-->
<div class="collapse navbar-collapse navbar-right" id="mainNavBar">
<ul class="nav navbar-nav">
<li class="nav-item">
HOME
</li>
<li class="nav-item">
SHOWROOM
</li>
<li class="nav-item">
SERVICES
</li>
<li class="nav-item">
INFO
</li>
<li class="nav-item">
PHOTO GALLERY
</li>
<li class="nav-item">
CONTACT
</li>
</ul>
</div>
</div>
</div>
</nav>
</div>
<div class="wrapper">
<img class="responsive-image" src="https://lh3.google.com/u/0/d/0B7B-ke12S7B2YmRfVmlUaDdZU1E=w1366-h653-iv1" alt="road in the sunset banner">
</div>
<div class="row row-eq-height translucent">
<div class="col-lg-3 col-xs-12 box-color">NEW <br>INVENTORY</div>
<div class="col-lg-3 col-xs-12 box-color">PRE OWNED <br>INVENTORY</div>
<div class="col-lg-3 col-xs-12 box-color">CUSTOMER <br>FABRICATION</div>
<div class="col-lg-3 col-xs-12 box-color">SERVICE <br>DEPARTMENT</div>
</div>
<div class="row">
<div class="col-xs-12 search-bar-container">
<form class="form-inline">
<div class="form-group">
<label><span class="search-text glyphicon glyphicon-search" aria-hidden="true">QUICK SEARCH</span></label>
<input type="text" class="form-control" id="search-manufacturers" placeholder="(All Manufacturers)">
</div>
</form>
</div>
</div>
<script src="https://use.fontawesome.com/bd8b80bd9d.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>
</html>
Refer this Fiddle if you are looking for something like this. In this Fiddle I have updated your code with some structure and CSS changes.
I am currently making a website and I have run into a little snag. One of my pages currently has a parallax effect on it. I tried to apply the same effect to another page(third page) and for some reason it will not work on that page. I was wondering if anyone knew why my method is not working?
CSS and HTML
body{
background-color: teal;
font-family:Orbitron;
color:white;
}
.fa-stack-overflow{
color: #f48024
}
.fa-github{
color:rgb(102,43,129);
}
.fa-linkedin{
color:rgb(0,127,178);
}
.fa-facebook-official{
color:rgb(59, 89, 153);
}
.nav-pills{
font-size: 1.7em;
background-color: none;
margin-bottom: 10%;
}
.block{
background-color: #337ab7;
padding:10px;
width:50%;
margin-right: auto;
margin-left: auto;
border-radius:5px;
}
h1{
padding:0;
margin-top: 0px;
font-size: 5.0em;
}
.btn-default{
font-size:1.7em;
color:#337ab7;
}
.pageOne{
background: url(https://images.pexels.com/photos/311039/pexels-photo-311039.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb);
background-repeat: none;
background-size: cover;
height: 1000px;
}
/*
parallax effect start
*/
.pageOne, .pageThree{
position: relative;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
}
/*
parallax effect end
*/
.pageTwo{
background: teal;
background-repeat: none;
background-size: cover;
height: 400px;
padding-top: 5%;
}
.pageTwoblock{
border-radius:5px;
}
p{
font-size: 1.8em;
}
.me{
height: 850px;
display:block;
margin-right: auto;
margin-left: auto;
}
.pageThree{
background: url(https://images.pexels.com/photos/311039/pexels-photo-311039.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb);
background-repeat: none;
background-size: cover;
height: 1000px;
padding-top:5%;
}
.container{
width:80%;
margin:auto;
overflow:auto;
}
section{
padding:20px 0;
overflow:hidden;
}
#gallery{
list-style: none;
margin: 0;
padding: 0;
width: 100%;
}
#gallery li{
display: block;
float: left;
width: 23%;
cursor: pointer;
border: 5px;
box-sizing: border-box;
margin: 0 12px 7px 0;
position: relative;
}
#gallery img{
width:100%;
border-radius:5%
}
.pageFour{
background: url(https://images.pexels.com/photos/311039/pexels-photo-311039.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb);
background-repeat: none;
background-size: cover;
height: 1000px;
padding-top:5%;
}
<!DOCTYPE html>
<html>
<head>
<title>Daniel's Portfolio | Welcome</title>
<link rel="stylesheet" href="CSS/bootstrap.min.css">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="CSS/style.css">
<link rel="stylesheet" href="CSS/font-awesome.min.css">
<script src="main.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Orbitron" rel="stylesheet">
</head>
<body>
<div class="pageOne text-center">
<ul class = "nav nav-pills">
<li>
Daniel Collins
</li>
<li class="pull-right">
Contact Me
</li>
<li class="pull-right">
Portfolio
</li>
<li class="pull-right">
About Me
</li>
</ul>
<div class="block text-center">
<h1>Daniel's Portfolio Website</h1>
<h2>Various Web Projects</h2>
</div>
<div class = "btnList text-center">
<a class = "btn btn-default" href="https://stackoverflow.com/users/7024823/daniel"><i class="fa fa-stack-overflow" aria-hidden="true"></i>Stack Overflow</a>
<a class = "btn btn-default" href="https://github.com/casteyes"><i class="fa fa-github" aria-hidden="true"></i>GitHub</a>
<a class = "btn btn-default" href="https://www.linkedin.com/in/daniel-collins-927b1ab0/"><i class="fa fa-linkedin" aria-hidden="true"></i>Linkedin</a>
<a class = "btn btn-default" href="https://www.facebook.com/daniel.p.collins1"><i class="fa fa-facebook-official" aria-hidden="true"></i>Facebook</a>
</div>
</div>
<div class= "pageTwo text-center" id="p2">
<div class= "pageTwoblock">
<div class="row">
<div class ="text-center">
<h1>Daniel Collins</h1>
<p class"text-center">
I’m a web developer and designer living in Jacksonville, Florida, United States. I spend my days with my hands in many
different areas of web development from back end programming (PHP, C#, Java) to front end engineering
(HTML, CSS, and jQuery/Javascript), digital accessibility, user experience and visual design.
</p>
</div>
</div>
</div>
</div>
<div class= "pageThree" id="p3">
<header>
<div class="block text-center">
<h1 class = "logo">Portfolio</h1>
</div>
</header>
<section>
<div class="container>
<h1 id="heading">All Projects</h1>
<ul id="gallery">
<li> <img src="https://images.pexels.com/photos/311039/pexels-photo-311039.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb"></li>
<li> <img src="https://images.pexels.com/photos/311039/pexels-photo-311039.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb"></li>
<li> <img src="https://images.pexels.com/photos/311039/pexels-photo-311039.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb"></li>
<li> <img src="https://images.pexels.com/photos/311039/pexels-photo-311039.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb"></li>
<li> <img src="https://images.pexels.com/photos/311039/pexels-photo-311039.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb"></li>
<li> <img src="https://images.pexels.com/photos/311039/pexels-photo-311039.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb"></li>
<li> <img src="https://images.pexels.com/photos/311039/pexels-photo-311039.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb"</li>
<li> <img src="https://images.pexels.com/photos/311039/pexels-photo-311039.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb"</li>
</ul>
</div>
</section>
</div>
<div class= "pageFour text-center" id="p4">
</div>
</body>
</html>
Please check this. background-attachment: fixed; is missing from other divs.
body{
background-color: teal;
font-family:Orbitron;
color:white;
}
.fa-stack-overflow{
color: #f48024
}
.fa-github{
color:rgb(102,43,129);
}
.fa-linkedin{
color:rgb(0,127,178);
}
.fa-facebook-official{
color:rgb(59, 89, 153);
}
.nav-pills{
font-size: 1.7em;
background-color: none;
margin-bottom: 10%;
}
.block{
background-color: #337ab7;
padding:10px;
width:50%;
margin-right: auto;
margin-left: auto;
border-radius:5px;
}
h1{
padding:0;
margin-top: 0px;
font-size: 5.0em;
}
.btn-default{
font-size:1.7em;
color:#337ab7;
}
.pageOne{
background: url(https://images.pexels.com/photos/311039/pexels-photo-311039.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb);
background-repeat: none;
background-size: cover;
height: 1000px;
}
/*
parallax effect start
*/
.pageOne, .pageThree{
position: relative;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
}
/*
parallax effect end
*/
.pageTwo{
background: teal;
background-repeat: none;
background-size: cover;
height: 400px;
padding-top: 5%;
background-attachment: fixed;
}
.pageTwoblock{
border-radius:5px;
}
p{
font-size: 1.8em;
}
.me{
height: 850px;
display:block;
margin-right: auto;
margin-left: auto;
}
.pageThree{
background: url(https://images.pexels.com/photos/311039/pexels-photo-311039.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb);
background-repeat: none;
background-size: cover;
height: 1000px;
padding-top:5%;
background-attachment: fixed;
}
.container{
width:80%;
margin:auto;
overflow:auto;
}
section{
padding:20px 0;
overflow:hidden;
}
#gallery{
list-style: none;
margin: 0;
padding: 0;
width: 100%;
}
#gallery li{
display: block;
float: left;
width: 23%;
cursor: pointer;
border: 5px;
box-sizing: border-box;
margin: 0 12px 7px 0;
position: relative;
}
#gallery img{
width:100%;
border-radius:5%
}
.pageFour{
background: url(https://images.pexels.com/photos/311039/pexels-photo-311039.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb);
background-repeat: none;
background-size: cover;
height: 1000px;
padding-top:5%;
background-attachment: fixed;
}
<!DOCTYPE html>
<html>
<head>
<title>Daniel's Portfolio | Welcome</title>
<link rel="stylesheet" href="CSS/bootstrap.min.css">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="CSS/style.css">
<link rel="stylesheet" href="CSS/font-awesome.min.css">
<script src="main.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Orbitron" rel="stylesheet">
</head>
<body>
<div class="pageOne text-center">
<ul class = "nav nav-pills">
<li>
Daniel Collins
</li>
<li class="pull-right">
Contact Me
</li>
<li class="pull-right">
Portfolio
</li>
<li class="pull-right">
About Me
</li>
</ul>
<div class="block text-center">
<h1>Daniel's Portfolio Website</h1>
<h2>Various Web Projects</h2>
</div>
<div class = "btnList text-center">
<a class = "btn btn-default" href="https://stackoverflow.com/users/7024823/daniel"><i class="fa fa-stack-overflow" aria-hidden="true"></i>Stack Overflow</a>
<a class = "btn btn-default" href="https://github.com/casteyes"><i class="fa fa-github" aria-hidden="true"></i>GitHub</a>
<a class = "btn btn-default" href="https://www.linkedin.com/in/daniel-collins-927b1ab0/"><i class="fa fa-linkedin" aria-hidden="true"></i>Linkedin</a>
<a class = "btn btn-default" href="https://www.facebook.com/daniel.p.collins1"><i class="fa fa-facebook-official" aria-hidden="true"></i>Facebook</a>
</div>
</div>
<div class= "pageTwo text-center" id="p2">
<div class= "pageTwoblock">
<div class="row">
<div class ="text-center">
<h1>Daniel Collins</h1>
<p class"text-center">
I’m a web developer and designer living in Jacksonville, Florida, United States. I spend my days with my hands in many
different areas of web development from back end programming (PHP, C#, Java) to front end engineering
(HTML, CSS, and jQuery/Javascript), digital accessibility, user experience and visual design.
</p>
</div>
</div>
</div>
</div>
<div class= "pageThree" id="p3">
<header>
<div class="block text-center">
<h1 class = "logo">Portfolio</h1>
</div>
</header>
<section>
<div class="container>
<h1 id="heading">All Projects</h1>
<ul id="gallery">
<li> <img src="https://images.pexels.com/photos/311039/pexels-photo-311039.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb"></li>
<li> <img src="https://images.pexels.com/photos/311039/pexels-photo-311039.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb"></li>
<li> <img src="https://images.pexels.com/photos/311039/pexels-photo-311039.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb"></li>
<li> <img src="https://images.pexels.com/photos/311039/pexels-photo-311039.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb"></li>
<li> <img src="https://images.pexels.com/photos/311039/pexels-photo-311039.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb"></li>
<li> <img src="https://images.pexels.com/photos/311039/pexels-photo-311039.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb"></li>
<li> <img src="https://images.pexels.com/photos/311039/pexels-photo-311039.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb"</li>
<li> <img src="https://images.pexels.com/photos/311039/pexels-photo-311039.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb"</li>
</ul>
</div>
</section>
</div>
<div class= "pageFour text-center" id="p4">
</div>
</body>
</html>
I'm making a website right now and there are currently little gaps in between some of my pages and I do not know what's causing them. I was hoping that somebody on this site would know a way to make the transitions between the pages seamless and smooth. I have provided a link so you can see what I am talking about.(You have to open up the full page in the code snippet to see what I'm talking about)
https://imgur.com/a/WrSNy
CSS AND HTML
body{
background-color: white;
font-family:Orbitron;
color:white;
}
.nav-pills{
font-size: 1.7em;
background-color: none;
margin-bottom: 10%;
}
.block{
background-color: #337ab7;
opacity: .7;
padding:10px;
width:50%;
margin-right: auto;
margin-left: auto;
border-radius:5px;
}
h1{
padding:0;
margin-top: 0px;
font-size: 5.0em;
}
.btn-default{
font-size:1.7em;
color:#337ab7;
}
.pageOne{
background: url("https://images.pexels.com/photos/477230/pexels-photo-477230.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb");
background-repeat: none;
background-size: cover;
display: inline-block;
height: 1000px;
width: 100%;
}
/*
parallax effect start
*/
.pageOne, .pageThree{
position: relative;
opacity: .7;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
}
/*
parallax effect end
*/
.pageTwo{
background: url("https://images.pexels.com/photos/477230/pexels-photo-477230.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb");
background-repeat: none;
background-size: cover;
display: inline-block;
height: 1000px;
width: 100%;
padding-top: 5%;
}
.pageTwoblock{
background-color: #008B8B;
opacity: .7;
border-radius:5px;
}
p{
font-size: 2.5em;
}
.me{
height: 850px;
display:block;
margin-right: auto;
margin-left: auto;
}
.pageThree{
background: url("https://images.pexels.com/photos/477230/pexels-photo-477230.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb");
background-repeat: none;
background-size: cover;
display: inline-block;
height: 1000px;
width: 100%;
padding-top:5%;
}
<!DOCTYPE html>
<html>
<head>
<title>Daniel's Portfolio | Welcome</title>
<link rel="stylesheet" href="CSS/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="CSS/style.css">
<link href="https://fonts.googleapis.com/css?family=Orbitron" rel="stylesheet">
</head>
<body>
<div class="pageOne text-center">
<ul class = "nav nav-pills">
<li>
Daniel Collins
</li>
<li class="pull-right">
Contact Me
</li>
<li class="pull-right">
Portfolio
</li>
<li class="pull-right">
About Me
</li>
</ul>
<div class="block text-center">
<h1>Daniel's Portfolio Website</h1>
<h2>Various Projects</h2>
</div>
<div class = "btnList text-center">
<a class = "btn btn-default" href="#">Reddit</a>
<a class = "btn btn-default" href="#">GitHub</a>
<a class = "btn btn-default" href="#">Linkedin</a>
<a class = "btn btn-default" href="#">Facebook</a>
</div>
</div>
<div class= "pageTwo">
<div class= "col-md-6 pageTwoblock">
<div class="row">
<div class ="text-center">
<h1>Daniel Collins</h1>
<p>
I’m a web developer and designer living in Jacksonville, Florida, United States. I spend my days with my hands in many
different areas of web development from back end programming (PHP, C#, Java) to front end engineering
(HTML, CSS, and jQuery/Javascript), digital accessibility, user experience and visual design.
</p>
</div>
</div>
</div>
</div>
<div class= "pageThree">
</div>
</body>
</html>
There is a gap at the bottom of those elements because they're inline-block and by default, inline-block will leave space at the bottom for trailing characters. To remove that, set a vertical-align like vertical-align: top.
You could also just remove display: inline-block; width: 100%; on those elements to make them block and they'll be 100% by default.
body{
background-color: white;
font-family:Orbitron;
color:white;
}
.nav-pills{
font-size: 1.7em;
background-color: none;
margin-bottom: 10%;
}
.block{
background-color: #337ab7;
opacity: .7;
padding:10px;
width:50%;
margin-right: auto;
margin-left: auto;
border-radius:5px;
}
h1{
padding:0;
margin-top: 0px;
font-size: 5.0em;
}
.btn-default{
font-size:1.7em;
color:#337ab7;
}
.pageOne{
background: url("https://images.pexels.com/photos/477230/pexels-photo-477230.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb");
background-repeat: none;
background-size: cover;
display: inline-block;
height: 1000px;
width: 100%;
}
/*
parallax effect start
*/
.pageOne, .pageThree{
position: relative;
opacity: .7;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
}
/*
parallax effect end
*/
.pageTwo{
background: url("https://images.pexels.com/photos/477230/pexels-photo-477230.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb");
background-repeat: none;
background-size: cover;
display: inline-block;
height: 1000px;
width: 100%;
padding-top: 5%;
}
.pageTwoblock{
background-color: #008B8B;
opacity: .7;
border-radius:5px;
}
p{
font-size: 2.5em;
}
.me{
height: 850px;
display:block;
margin-right: auto;
margin-left: auto;
}
.pageThree{
background: url("https://images.pexels.com/photos/477230/pexels-photo-477230.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb");
background-repeat: none;
background-size: cover;
display: inline-block;
height: 1000px;
width: 100%;
padding-top:5%;
}
.page {
vertical-align: top;
}
<!DOCTYPE html>
<html>
<head>
<title>Daniel's Portfolio | Welcome</title>
<link rel="stylesheet" href="CSS/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="CSS/style.css">
<link href="https://fonts.googleapis.com/css?family=Orbitron" rel="stylesheet">
</head>
<body>
<div class="pageOne page text-center">
<ul class = "nav nav-pills">
<li>
Daniel Collins
</li>
<li class="pull-right">
Contact Me
</li>
<li class="pull-right">
Portfolio
</li>
<li class="pull-right">
About Me
</li>
</ul>
<div class="block text-center">
<h1>Daniel's Portfolio Website</h1>
<h2>Various Projects</h2>
</div>
<div class = "btnList text-center">
<a class = "btn btn-default" href="#">Reddit</a>
<a class = "btn btn-default" href="#">GitHub</a>
<a class = "btn btn-default" href="#">Linkedin</a>
<a class = "btn btn-default" href="#">Facebook</a>
</div>
</div>
<div class= "pageTwo page">
<div class= "col-md-6 pageTwoblock">
<div class="row">
<div class ="text-center">
<h1>Daniel Collins</h1>
<p>
I’m a web developer and designer living in Jacksonville, Florida, United States. I spend my days with my hands in many
different areas of web development from back end programming (PHP, C#, Java) to front end engineering
(HTML, CSS, and jQuery/Javascript), digital accessibility, user experience and visual design.
</p>
</div>
</div>
</div>
</div>
<div class= "pageThree page">
</div>
</body>
</html>
I removed inline-block from the style for the pages. Let me know if this solves all your issues. It looks the same to me otherwise.
body{
line-height: 0;
background-color: white;
font-family:Orbitron;
color:white;
}
.nav-pills{
font-size: 1.7em;
background-color: none;
margin-bottom: 10%;
}
.block{
background-color: #337ab7;
opacity: .7;
padding:10px;
width:50%;
margin-right: auto;
margin-left: auto;
border-radius:5px;
}
h1{
padding:0;
margin-top: 0px;
font-size: 5.0em;
}
.btn-default{
font-size:1.7em;
color:#337ab7;
}
.pageOne{
background: url("https://images.pexels.com/photos/477230/pexels-photo-477230.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb");
background-repeat: none;
background-size: cover;
height: 1000px;
width: 100%;
}
/*
parallax effect start
*/
.pageOne, .pageThree{
position: relative;
opacity: .7;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
}
/*
parallax effect end
*/
.pageTwo{
background: url("https://images.pexels.com/photos/477230/pexels-photo-477230.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb");
background-repeat: none;
background-size: cover;
height: 1000px;
width: 100%;
padding-top: 5%;
}
.pageTwoblock{
background-color: #008B8B;
opacity: .7;
border-radius:5px;
}
p{
font-size: 2.5em;
}
.me{
height: 850px;
display:block;
margin-right: auto;
margin-left: auto;
}
.pageThree{
background: url("https://images.pexels.com/photos/477230/pexels-photo-477230.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb");
background-repeat: none;
background-size: cover;
height: 1000px;
width: 100%;
padding-top:5%;
}
<!DOCTYPE html>
<html>
<head>
<title>Daniel's Portfolio | Welcome</title>
<link rel="stylesheet" href="CSS/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="CSS/style.css">
<link href="https://fonts.googleapis.com/css?family=Orbitron" rel="stylesheet">
</head>
<body>
<div class="pageOne text-center">
<ul class = "nav nav-pills">
<li>
Daniel Collins
</li>
<li class="pull-right">
Contact Me
</li>
<li class="pull-right">
Portfolio
</li>
<li class="pull-right">
About Me
</li>
</ul>
<div class="block text-center">
<h1>Daniel's Portfolio Website</h1>
<h2>Various Projects</h2>
</div>
<div class = "btnList text-center">
<a class = "btn btn-default" href="#">Reddit</a>
<a class = "btn btn-default" href="#">GitHub</a>
<a class = "btn btn-default" href="#">Linkedin</a>
<a class = "btn btn-default" href="#">Facebook</a>
</div>
</div>
<div class= "pageTwo">
<div class= "col-md-6 pageTwoblock">
<div class="row">
<div class ="text-center">
<h1>Daniel Collins</h1>
<p>
I’m a web developer and designer living in Jacksonville, Florida, United States. I spend my days with my hands in many
different areas of web development from back end programming (PHP, C#, Java) to front end engineering
(HTML, CSS, and jQuery/Javascript), digital accessibility, user experience and visual design.
</p>
</div>
</div>
</div>
</div>
<div class= "pageThree">
</div>
</body>
</html>