I am trying to apply background image to cover whole page. Could someone tell me what I did wrong? My background image does not cover the entire page. Here is the page:
http://codepen.io/aitruong/pen/mVmKYR
.my-photo{
margin-top: 20px;
}
p{
padding-top: 40px;
}
hr{
width: 200px;
}
.navbar{
margin-left:128px;
margin-right: 128px;
}
.social-icon{
margin-left:350px;
margin-top:40px;
}
.text{
margin-left: 365px;
margin-top: 50px;
font-size: 40px;
font-family:Tangerine;
}
#language-text{
font-family:Tangerine;
font-size: 35px;
margin-left: 300px;
padding-top: 0px;
}
i{
color: #e67200;
}
#android-app {
margin-left : 90px;
}
footer p,a{
margin-left: 0px;
color:#666600
}
#background{
}
<body data-spy="scroll" data-target=".navbar" data-offset="50">
<nav class="navbar navbar-inverse navbar-fixed-top">
<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>
</div>
<div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li><i class="fa fa-user"> </i> About</li>
<li><i class="fa fa-pencil-square-o"> </i> Portfolio</li>
<li><i class="fa fa-envelope-o"></i> Contact</li>
</ul>
</div>
</div>
<div>
</div>
</nav>
<div id="background">
<div id="section1" class="container">
<div class="row">
<div class="col-xs-2"><img class=" img-responsive img-circle my-photo" src="https://media.licdn.com/mpr/mpr/shrinknp_400_400/AAEAAQAAAAAAAAMcAAAAJGVhNmJlMDc1LTQyNDMtNDIyMS1iNDY0LTBjMWZhZjNhYjJkZA.jpg" width="100%"/> </div>
<div class="col-xs-10"><p>Coding is my passion. I always enjoyed science, math, and technical things as a kid, but I didn't get into software engineering until I was in college. After seeing how much I enjoyed it, I decided to major in software engineering from San Jose State University. </p></div>
</div>
<hr>
<p id="language-text"> I am using these languages to build awsome websites and mobile applications </p>
<div class="social-icon">
<img id="css" style="display:none" src="http://findicons.com/files/icons/2420/coded/128/page_css.png" width="90px"/>
<img id="html" style="display:none" src="http://findicons.com/files/icons/2420/coded/128/page_html.png " width="90px"/>
<img id="js" style="display:none" src=" http://findicons.com/files/icons/2420/coded/128/page_javascript.png" width="90px"/>
<img id="python" style="display:none" src="http://findicons.com/files/icons/2420/coded/128/page_python.png " width="90px"/>
<img id="java" style="display:none" src=" http://findicons.com/files/icons/1861/xml_docs_x_tended/128/crystal_java.png" width="68px"/>
</div>
</div>
<div id="section2" class="container">
<h3 style="color:black; text-align:center; margin-top:40px; font-size:30px; color:#666600; font-family:Open Sans">Some of my Work</h3><br>
<div class="row">
<div class="col-sm-4">
<p class="showcase-text" style="color:black; color:#996600">Restaurant Search Engine /Python,CSS,Html</p>
<img src="https://scontent.fsnc1-1.fna.fbcdn.net/hphotos-xpa1/v/t1.0-9/3770_978599402188642_2191270248423594345_n.jpg?oh=86221d05f2f6e383cd0a423b818c8072&oe=570442D5" class="img-responsive" style="width:100%; height:320px" alt="Image">
</div>
<div class="col-sm-4">
<p class="showcase-text" style="color:black; margin-left:60px;color:#996600">Photo Sharing Android Application/Java</p>
<img id="android-app" src="https://scontent.fsnc1-1.fna.fbcdn.net/hphotos-xap1/v/t1.0-9/6841_978599355521980_5665277873740762854_n.jpg?oh=734e2b545542a741571fb453c32ec53c&oe=5713AF11" class="img-responsive" style="width:55%" alt="Image">
</div>
<div class="col-sm-4">
<p class="showcase-text" style="color:#996600">Dating Profile Form/ Javascript,CSS,Html</p>
<img src="https://scontent.fsnc1-1.fna.fbcdn.net/hphotos-xpf1/v/t1.0-9/10653399_978601942188388_4779088688053733024_n.jpg?oh=988e3678bcec712fbc580d4d34327998&oe=5713D704" class="img-responsive" width="100%" alt="Image" >
</div>
</div><br>
</div>
</div>
<div id="section3" class="container">
<p class="text"> Ways to contact me:</p>
<div class="social-icon">
<img src="https://cdn1.iconfinder.com/data/icons/social-networks-3/512/linkedin-128.png" width="70px"/>
<img src="https://cdn4.iconfinder.com/data/icons/bettericons/354/github-128.png " width="87px"/>
<img src="https://cdn4.iconfinder.com/data/icons/bettericons/354/send-mail-circle-128.png" width="73px"/>
</div>
</div>
</div>
</div>
</body>
you probably need this in addition to your existing CSS:
body { background-size: cover; }
There are two mistakes in your code:
body { background-size: cover; }
Is missing. But in addition you will need to put your section3 element inside of the background div. Otherwise the background will stop right before section 3
</div><!-- This is your end of <div id="background"> -->
<div id="section3"> <!-- this is a new section outside of the background element -->
Try applying this:
body{
background-image: url('http://slodive.com/wp-content/uploads/2011/09/textured-backgrounds/wrinkled-paper.jpg');
background-repeat: intial;
}
Set your background like this
background: #ffffff url(bg.jpg) repeat;
for example for the body, set your css
body { background: #ffffff url(your_bg.jpg) repeat; }
The structure of the HTML document is also invalid. Use the following HTML code:
<!DOCTYPE html>
<html>
<head>
<title>Ai Truong Personal's Website</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Tangerine">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#css").load(function(evt){
$(this).fadeIn();
});
$("#html").load(function(evt){
$(this).fadeIn("slow");
});
$("#js").load(function(evt){
$(this).fadeIn(5000);
});
$("#python").load(function(evt){
$(this).fadeIn(4000);
});
$("#java").load(function(evt){
$(this).fadeIn(2000);
});
});
</script>
<style>
body {
position: relative;
font-family: Open Sans;
background-image: url('http://slodive.com/wp-content/uploads/2011/09/textured-backgrounds/wrinkled-paper.jpg');
background-repeat: repeat;
}
#section1 {padding-top:50px;height:500px;color: #fff; background-color: #6a5750;}
#section2 {padding-top:0px;height:500px;color: #fff; background-color: #f6f1ed;}
#section3 {padding-top:0px;height:300px;color: #fff; background-color: #b5a397;}
</style>
</head>
<body data-spy="scroll" data-target=".navbar" data-offset="50">
<nav class="navbar navbar-inverse navbar-fixed-top">
<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>
</div>
<div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li><i class="fa fa-user"> </i> About</li>
<li><i class="fa fa-pencil-square-o"> </i> Portfolio</li>
<li><i class="fa fa-envelope-o"></i> Contact</li>
</ul>
</div>
</div>
</div>
</nav>
<div id="background">
<div id="section1" class="container">
<div class="row">
<div class="col-xs-2"><img class=" img-responsive img-circle my-photo" src="https://media.licdn.com/mpr/mpr/shrinknp_400_400/AAEAAQAAAAAAAAMcAAAAJGVhNmJlMDc1LTQyNDMtNDIyMS1iNDY0LTBjMWZhZjNhYjJkZA.jpg" width="100%"/> </div>
<div class="col-xs-10">
<p>Coding is my passion. I always enjoyed science, math, and technical things as a kid, but I didn't get into software engineering until I was in college. After seeing how much I enjoyed it, I decided to major in software engineering from San Jose State University. </p>
</div>
</div>
<hr>
<p id="language-text"> I am using these languages to build awsome websites and mobile applications </p>
<div class="social-icon">
<img id="css" style="display:none" src="http://findicons.com/files/icons/2420/coded/128/page_css.png" width="90px"/>
<img id="html" style="display:none" src="http://findicons.com/files/icons/2420/coded/128/page_html.png " width="90px"/>
<img id="js" style="display:none" src=" http://findicons.com/files/icons/2420/coded/128/page_javascript.png" width="90px"/>
<img id="python" style="display:none" src="http://findicons.com/files/icons/2420/coded/128/page_python.png " width="90px"/>
<img id="java" style="display:none" src=" http://findicons.com/files/icons/1861/xml_docs_x_tended/128/crystal_java.png" width="68px"/>
</div>
</div>
<div id="section2" class="container">
<h3 style="color:black; text-align:center; margin-top:40px; font-size:30px; color:#666600; font-family:Open Sans">Some of my Work</h3>
<br>
<div class="row">
<div class="col-sm-4">
<p class="showcase-text" style="color:black; color:#996600">Restaurant Search Engine /Python,CSS,Html</p>
<img src="https://scontent.fsnc1-1.fna.fbcdn.net/hphotos-xpa1/v/t1.0-9/3770_978599402188642_2191270248423594345_n.jpg?oh=86221d05f2f6e383cd0a423b818c8072&oe=570442D5" class="img-responsive" style="width:100%; height:320px" alt="Image">
</div>
<div class="col-sm-4">
<p class="showcase-text" style="color:black; margin-left:60px;color:#996600">Photo Sharing Android Application/Java</p>
<img id="android-app" src="https://scontent.fsnc1-1.fna.fbcdn.net/hphotos-xap1/v/t1.0-9/6841_978599355521980_5665277873740762854_n.jpg?oh=734e2b545542a741571fb453c32ec53c&oe=5713AF11" class="img-responsive" style="width:55%" alt="Image">
</div>
<div class="col-sm-4">
<p class="showcase-text" style="color:#996600">Dating Profile Form/ Javascript,CSS,Html</p>
<img src="https://scontent.fsnc1-1.fna.fbcdn.net/hphotos-xpf1/v/t1.0-9/10653399_978601942188388_4779088688053733024_n.jpg?oh=988e3678bcec712fbc580d4d34327998&oe=5713D704" class="img-responsive" width="100%" alt="Image" >
</div>
</div>
<br>
</div>
</div>
<div id="section3" class="container">
<p class="text"> Ways to contact me:</p>
<div class="social-icon">
<img src="https://cdn1.iconfinder.com/data/icons/social-networks-3/512/linkedin-128.png" width="70px"/>
<img src="https://cdn4.iconfinder.com/data/icons/bettericons/354/github-128.png " width="87px"/>
<img src="https://cdn4.iconfinder.com/data/icons/bettericons/354/send-mail-circle-128.png" width="73px"/>
</div>
</div>
<!-- Footer -->
<footer class="container-fluid bg-4 text-center">
<p > Theme Made By Ai Truong © 2016</p>
</footer>
</body>
</html>
Replace your following CSS:
#background{
background-image: url('http://slodive.com/wp-content/uploads/2011/09/textured-backgrounds/wrinkled-paper.jpg');
}
With:
body{
background-image: url('http://slodive.com/wp-content/uploads/2011/09/textured-backgrounds/wrinkled-paper.jpg');
background-repeat: repeat;
}
Tryed with:
#ImageBackground {
background-size: cover;
Width: 100%;
Height: auto;
}
Else you can try with:
#ImageBackground {
Width: 100%;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Related
I made a fixed sidebar after the navbar in bootstrap. There is an issue in it when i used top:0 it works fine when i add new blocks in the sidebar but when I remove top:0 from the .sidenav class the scroll starts working when i adding a least two blocks after the screen reached its 100% height. Moreover, the last block after them will not remain visible in screen even after scrolling. Everything works fine with the use of top:0 but the navbar overlaps it when i used it.
when i used top:0:
when i don't used top:0 :
However, if i remove top:0 and half block remain after screen it doesn't make scroll for that.
Scroll for last block visibility not showing:
Here is the code:
HTML:
<html>
<head>
<title>Website</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">
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/register.css">
<link rel="stylesheet" href="css/home.css">
</head>
<body>
<div class="cotainer-fluid navbar-fixed-top">
<div class="row panel-head">
<div class="col-sm-4">
<span>For Business Queries: </span>
<span class="glyphicon glyphicon-earphone phone-icon"></span>+923214868587
</div>
<div class="col-sm-4">
<span>Email :</span>
ourwebsite#gmail.com
</div>
<div class="col-sm-4">
<span>Join Us: </span>
<a title="Facebook" href=""><img src="./assets/images/if_facebook_circle_color_107175.png" alt="fb" height="25" width="25"></a>
<a title="Twitter" href=""><img src="./assets/images/if_twitter_circle_color_107170.png" alt="twitter" height="25" width="25"></a>
<a title="Instagram" href=""><img src="./assets/images/if_instagram_circle_color_107172.png" alt="instagram" height="25" width="25"></a>
<a title="Google+" href=""><img src="./assets/images/if_google_circle_color_107180.png" alt="google+" height="25" width="25"></a>
</div>
</div>
<nav class="navbar navbar-default" id="nav_bar">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
FoodieHighway
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right" id="nav">
<li id="Home" class="active2">
HOME
</li>
<li>
LOGOUT
</li>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
</div>
<div class="container-fluid after-navbar-body">
<div class="row">
<div class="col-lg-2">
<div class="sidenav">
<div class="row">
<div class="col-sm-12 order-detail-1">
<p class="order-p">Order ID #5624</p>
<p>Name : Ibrahim Amar Khan</p>
<p>ETA : 5 Mins</p>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<p class="order-p">Order ID #5624</p>
<p>Name : Ibrahim Amar Khan</p>
<p>ETA : 5 Mins</p>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<p class="order-p">Order ID #5624</p>
<p>Name : Ibrahim Amar Khan</p>
<p>ETA : 5 Mins</p>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<p class="order-p">Order ID #5624</p>
<p>Name : Ibrahim Amar Khan</p>
<p>ETA : 5 Mins</p>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<p class="order-p">Order ID #5624</p>
<p>Name : Ibrahim Amar Khan2222</p>
<p>ETA : 5 Mins</p>
</div>
</div>
</div>
</div>
</div>
</div>
<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>
</body>
</html>
CSS:
.sidenav {
height: 100%; /* Full-height: remove this if you want "auto" height */
width: 250px; /* Set the width of the sidebar */
position: fixed; /* Fixed Sidebar (stay in place on scroll) */
z-index: 1; /* Stay on top */
left: 0;
border:1px solid black;
overflow-y:scroll;
overflow-x:hidden;
}
.after-navbar-body
{
padding-top: 110px;
}
#media (max-width:767px)
{
.after-navbar-body
{
padding-top: 151px;
}
}
.sidenav .row:nth-child(1) div
{
background-color: rgb(236,212,212);
}
.sidenav .row:nth-child(2) div
{
background-color:rgb(241,233,233);
}
.sidenav .row:nth-child(3) div
{
background-color:rgb(241,233,233);
}
.sidenav .row:nth-child(4) div
{
background-color: rgb(230, 238, 231);
}
.sidenav .row:nth-child(5) div
{
background-color: rgb(219, 240, 222);
}
.sidenav .row
{
border-bottom:1px solid black;
}
.sidenav p
{
color:black;
font-weight:700;
}
.order-p
{
padding-top:20px;
}
I've been working on a website using Bootstrap 4 where there are three images inside a .row div. The problem I'm having, however, is that I want all the images to have the same height, so I created my own class where I set height: 20% and width: auto The images look exactly how I want them to, however, for each image a certain amount of pixels are added under that div and it sets a huge gap between the section that has the images and the section that follows it. I was wondering what would be a way to avoid this from happening since I don't want to keep that gap between both sections. Here's a fiddle with what I'm talking about https://jsfiddle.net/wxg51v5x/ (Comment out the images to see the difference in action). Thanks!
EDIT: Included the code itself.
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Illicit Mind Inc. - Programs</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0, shrink-to-fit=no" />
<link rel="stylesheet" href="./css/bootstrap.min.css" />
<link rel="stylesheet" href="./css/font-awesome.min.css" />
<link rel="stylesheet" href="./css/styles.css" />
</head>
<body>
<!-- Navbar -->
<nav class="navbar navbar-expand-md fixed-top">
<a class="navbar-brand" href="./index.html"><img src="./imgs/logo.png" alt="Illicit Mind Inc."/></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar">
<span class="navbar-toggler-icon"><i class="fas fa-bars"></i></span>
</button>
<div class="collapse navbar-collapse" id="navbar">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="./programs.html">Programs</a>
</li>
<li class="nav-item">
<a class="nav-link" href="./about-us.html">About Us</a>
</li>
<li class="nav-item">
<a class="nav-link" href="./contact-us.html">Contact Us</a>
</li>
</ul>
<div>
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="./login.html">Login/Signup</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- Navbar -->
<!-- Background Image -->
<div class="full-height bg-image"></div>
<!-- Background Image -->
<!-- BWNF -->
<div class="absolute-top" id="bwnf">
<div class="d-flex align-items-center justify-content-center full-height full-width">
<div class="text-center">
<h1 class="text-white font-heavy text-center display-1">Build With, Not For</h1>
<hr class="bg-white main-hr" />
</div>
</div>
</div>
<!-- BWNF -->
<!-- Programs -->
<div class="container-fluid" id="programs">
<div class="d-flex align-items-center justify-content-center">
<div class="text-center">
<div class="logo-buffer"></div>
<div class="logo-buffer"></div>
<h3 class="font-heavy">Our Great Programs</h3>
<br />
<div class="row">
<div class="col-md-4">
<img class="program-logo" src="./imgs/cite-logo.png" alt="Caribbeans In Tech + Entrepreneurship" />
<br /> <br />
<h4>CITE</h4>
<p>A professional collective of Caribbeans in the innovation ecosystem.</p>
<button class="btn">Learn More</button>
</div>
<div class="col-md-4">
<img class="program-logo" src="./imgs/bwnf-logo.png" alt="Build With, Not For" />
<br /> <br />
<h4>Build With, Not For</h4>
<p>A series of hackathons where we encourage community members, hackers, business people and students to come together and create solutions to problems in their communities.</p>
<button class="btn">Register</button>
</div>
<div class="col-md-4">
<img class="program-logo" src="./imgs/gsd-logo.png" alt="Get Shit Done" />
<br /> <br />
<h4>Get Shit Done</h4>
<p>An annual summit, Classes and workshops that teaches innovation in a non-traditional educational method and setting.</p>
<button class="btn">Attend</button>
</div>
</div>
</div>
</div>
</div>
<!-- Programs -->
<!-- Formula -->
<div class="container-fluid" id="formula">
<div class="d-flex align-items-center justify-content-center">
<div class="text-center">
<h3 class="font-heavy">Tribe Secret Formula</h3>
<h6>In all of our programming, we provide the three fundamental things that it takes to create a successful innovator.</h6>
<br />
<div class="row">
<div class="col-md-4">
<h1 class="lead"><span class="fas fa-flask fa-4x"></span></h1>
<p>Experiences</p>
<p>Our exciting events are packed with creativity, content and connection! At our highly collaborative events you get the chance discover your internal uniqueness.</p>
</div>
<div class="col-md-4">
<h1 class="lead"><span class="fas fa-users fa-4x"></span></h1>
<p>Connections</p>
<p>You are the average of the five people you spend the most time with" - Jim Rohn. Connect with peers that will help you positively progress into your future.</p>
</div>
<div class="col-md-4">
<h1 class="lead"><span class="far fa-lightbulb fa-4x"></span></h1>
<p>Knowledge</p>
<p>Our open, direct and community style approach to education allows individuals to gain invaluable hands-on knowledge that will accelerate their success.</p>
</div>
</div>
</div>
</div>
</div>
<!-- Formula -->
<!-- Footer -->
<footer class="full-width text-center">
<div>
<p>
© <span id="year"></span> Illicit Mind Inc. All Rights Reserved.<br />
<span> </span>
<span> </span>
</p>
</div>
</footer>
<!-- Footer -->
<script type="text/javascript" src="./js/jquery.min.js"></script>
<script type="text/javascript" src="./js/jquery-ui.min.js"></script>
<script type="text/javascript" src="./js/bootstrap.min.js"></script>
<script type="text/javascript" src="./js/scripts.js"></script>
</body>
</html>
CSS:
#font-face {
font-family: 'Futura Book';
src: url('./fonts/futura-book-webfont.woff2') format('woff2'),
url('./fonts/futura-book-webfont.woff') format('woff');
font-style: normal;
}
#font-face {
font-family: 'Futura Heavy';
src: url('./fonts/futura-heavy-webfont.woff2') format('woff2'),
url('./fonts/futura-heavy-webfont.woff') format('woff');
font-style: bold;
}
* {font-family: 'Futura Book', Arial, sans-serif}
.absolute-top {
top: 0;
position: absolute;
}
.absolute-bottom {
bottom: 0;
position: absolute;
}
.logo {
width: auto;
height: 15vh;
}
.navbar-brand > img {
width: auto;
height: 55px;
}
.program-logo {
width: auto;
height: 20%;
}
nav {
background-color: white;
box-shadow: 0px 1px 10px 0px #4191B4;
}
.bg-image {
background: url('../imgs/bwnf-3.jpg') no-repeat center center fixed;
background-size: cover;
}
footer {
padding-top: 10px;
line-height: 1.25;
}
.login-divider hr {
width: 42.5vw;
margin-left: auto;
margin-right: auto;
border: .25px solid rgba(134, 142, 150, .25);
}
.main-hr {width: 0}
.interests {padding-left: 25px}
.profile-picture {height: 25vh}
.font-book {font-family: 'Futura Book', Arial, sans-serif}
.font-heavy {font-family: 'Futura Heavy', Arial, sans-serif}
body {overflow-x: hidden}
.padding-top {padding-top: 95px}
.left-hr {float: left}
.right-hr {float: right}
.logo-buffer {height: 10px}
a:hover {text-decoration: none}
input {text-align: center}
.fa-bars, a {color: rgba(65, 145, 180, .95)}
.fa-bars:hover, a:hover {color: rgba(65, 145, 180, 1)}
.bg-google {background-color: #EA4335}
.bg-fb {background-color: #3B5998}
.full-width {width: 100vw}
.full-height {height: 100vh}
.card-header {cursor: pointer}
/* #programs {background-image: linear-gradient(to top, #4191B4 5%, white 100%)}
#formula {background-image: linear-gradient(to top, white 0%, #4191B4 95%)} */
The problem was coming from your program-logo class and the large images.
I used the img-fluid class for the images as well as the px-5 class for the third image and also re-arranged things a little bit by using the container class instead of container-fluid and nesting images into their own row-column pairs for easier manipulation using Bootstrap 4 native classes alone (without any custom css).
Also note: I added the background color classes (bg-warning and bg-secondary) just to see what's happening and commented out some your other stuff that was unnecessary in my option. Feel free to adjust that as needed.
I only dealt with the upper section and the spacing underneath because that was your question. But you might want to do some adjustments for the bottom section because that container-fluid doesn't make it look good on wide 4K screens.
Here's the code:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="container bg-warning" id="programs">
<!-- <div class="d-flex align-items-center justify-content-center">-->
<div class="text-center">
<!--
<div class="logo-buffer"></div>
<div class="logo-buffer"></div>
-->
<h3 class="font-heavy mt-3">Our Great Programs</h3>
<br />
<div class="row">
<div class="col-md-4 pb-3">
<div class="row">
<div class="col-8 col-md-10 col-xl-8 offset-2 offset-md-1 offset-xl-2 pb-3">
<img class="img-fluid" src="https://illicitmind.com/static/img/2%20CITE_CITE%20Logo%20C.png" alt="Caribbeans In Tech + Entrepreneurship" />
</div>
</div>
<h4>CITE</h4>
<p>A professional collective of Caribbeans in the innovation ecosystem.</p>
<button class="btn">Learn More</button>
</div>
<div class="col-md-4 pb-3">
<div class="row">
<div class="col-8 col-md-10 offset-2 offset-md-1 pb-3">
<img class="img-fluid" src="https://illicitmind.com/static/img/bwn4.png" alt="Build With, Not For" />
</div>
</div>
<h4>Build With, Not For</h4>
<p>A series of hackathons where we encourage community members, hackers, business people and students to come together and create solutions to problems in their communities.</p>
<button class="btn">Register</button>
</div>
<div class="col-md-4 pb-3">
<div class="row">
<div class="col-8 col-md-10 col-xl-8 offset-2 offset-md-1 offset-xl-2 pb-3">
<img class="img-fluid px-5" src="https://illicitmind.com/static/img/Gsd-Logo.png" alt="Get Shit Done" />
</div>
</div>
<h4>Get Shit Done</h4>
<p>An annual summit, Classes and workshops that teaches innovation in a non-traditional educational method and setting.</p>
<button class="btn">Attend</button>
</div>
</div>
</div>
<!-- </div>-->
</div>
<div class="container-fluid bg-secondary" id="formula">
<!-- <div class="d-flex align-items-center justify-content-center">-->
<div class="text-center">
<h3 class="font-heavy">Tribe Secret Formula</h3>
<h6>In all of our programming, we provide the three fundamental things that it takes to create a successful innovator.</h6>
<br />
<div class="row">
<div class="col-md-4">
<h1 class="lead"><span class="fas fa-flask fa-4x"></span></h1>
<p>Experiences</p>
<p>Our exciting events are packed with creativity, content and connection! At our highly collaborative events you get the chance discover your internal uniqueness.</p>
</div>
<div class="col-md-4">
<h1 class="lead"><span class="fas fa-users fa-4x"></span></h1>
<p>Connections</p>
<p>You are the average of the five people you spend the most time with" - Jim Rohn. Connect with peers that will help you positively progress into your future.</p>
</div>
<div class="col-md-4">
<h1 class="lead"><span class="fas fa-lightbulb fa-4x"></span></h1>
<p>Knowledge</p>
<p>Our open, direct and community style approach to education allows individuals to gain invaluable hands-on knowledge that will accelerate their success.</p>
</div>
</div>
</div>
<!-- </div>-->
</div>
The space you are talking about is coming because you use .program-logo width:auto; i changed the property and the space is gone i did it in below code you should try it.
<!DOCTYPE html>
<html>
<head>
<title>Illicit Mind Inc. - Programs</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0, shrink-to-fit=no" />
<link rel="stylesheet" href="./css/bootstrap.min.css" />
<link rel="stylesheet" href="./css/font-awesome.min.css" />
<link rel="stylesheet" href="./css/styles.css" />
</head>
<body>
<!-- Navbar -->
<nav class="navbar navbar-expand-md fixed-top">
<a class="navbar-brand" href="./index.html"><img src="./imgs/logo.png" alt="Illicit Mind Inc."/></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar">
<span class="navbar-toggler-icon"><i class="fas fa-bars"></i></span>
</button>
<div class="collapse navbar-collapse" id="navbar">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="./programs.html">Programs</a>
</li>
<li class="nav-item">
<a class="nav-link" href="./about-us.html">About Us</a>
</li>
<li class="nav-item">
<a class="nav-link" href="./contact-us.html">Contact Us</a>
</li>
</ul>
<div>
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="./login.html">Login/Signup</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- Navbar -->
<!-- Background Image -->
<div class="full-height bg-image"></div>
<!-- Background Image -->
<!-- BWNF -->
<div class="absolute-top" id="bwnf">
<div class="d-flex align-items-center justify-content-center full-height full-width">
<div class="text-center">
<h1 class="text-white font-heavy text-center display-1">Build With, Not For</h1>
<hr class="bg-white main-hr" />
</div>
</div>
</div>
<!-- BWNF -->
<!-- Programs -->
<div class="container-fluid" id="programs">
<div class="d-flex align-items-center justify-content-center">
<div class="text-center">
<div class="logo-buffer"></div>
<div class="logo-buffer"></div>
<h3 class="font-heavy">Our Great Programs</h3>
<br />
<div class="row">
<div class="col-md-4 col-sm-12">
<img class="program-logo" src="./imgs/cite-logo.png" alt="Caribbeans In Tech + Entrepreneurship" />
<br /> <br />
<h4>CITE</h4>
<p>A professional collective of Caribbeans in the innovation ecosystem.</p>
<button class="btn">Learn More</button>
</div>
<div class="col-md-4 col-sm-12">
<img class="program-logo" src="./imgs/bwnf-logo.png" alt="Build With, Not For" />
<br /> <br />
<h4>Build With, Not For</h4>
<p>A series of hackathons where we encourage community members, hackers, business people and students to come together and create solutions to problems in their communities.</p>
<button class="btn">Register</button>
</div>
<div class="col-md-4 col-sm-12">
<img height="20%" width="auto" src="./imgs/gsd-logo.png" alt="Get Shit Done" />
<br /> <br />
<h4>Get Shit Done</h4>
<p>An annual summit, Classes and workshops that teaches innovation in a non-traditional educational method and setting.</p>
<button class="btn">Attend</button>
</div>
</div>
</div>
</div>
</div>
<!-- Programs -->
<!-- Formula -->
<div class="container-fluid" id="formula">
<div class="d-flex align-items-center justify-content-center">
<div class="text-center">
<h3 class="font-heavy">Tribe Secret Formula</h3>
<h6>In all of our programming, we provide the three fundamental things that it takes to create a successful innovator.</h6>
<br />
<div class="row">
<div class="col-md-4">
<h1 class="lead"><span class="fas fa-flask fa-4x"></span></h1>
<p>Experiences</p>
<p>Our exciting events are packed with creativity, content and connection! At our highly collaborative events you get the chance discover your internal uniqueness.</p>
</div>
<div class="col-md-4">
<h1 class="lead"><span class="fas fa-users fa-4x"></span></h1>
<p>Connections</p>
<p>You are the average of the five people you spend the most time with" - Jim Rohn. Connect with peers that will help you positively progress into your future.</p>
</div>
<div class="col-md-4">
<h1 class="lead"><span class="far fa-lightbulb fa-4x"></span></h1>
<p>Knowledge</p>
<p>Our open, direct and community style approach to education allows individuals to gain invaluable hands-on knowledge that will accelerate their success.</p>
</div>
</div>
</div>
</div>
</div>
<!-- Formula -->
<!-- Footer -->
<footer class="full-width text-center">
<div>
<p>
© <span id="year"></span> Illicit Mind Inc. All Rights Reserved.<br />
<span> </span>
<span> </span>
</p>
</div>
</footer>
<!-- Footer -->
<script type="text/javascript" src="./js/jquery.min.js"></script>
<script type="text/javascript" src="./js/jquery-ui.min.js"></script>
<script type="text/javascript" src="./js/bootstrap.min.js"></script>
<script type="text/javascript" src="./js/scripts.js"></script>
</body>
</html>
CSS:
#font-face {
font-family: 'Futura Book';
src: url('./fonts/futura-book-webfont.woff2') format('woff2'),
url('./fonts/futura-book-webfont.woff') format('woff');
font-style: normal;
}
#font-face {
font-family: 'Futura Heavy';
src: url('./fonts/futura-heavy-webfont.woff2') format('woff2'),
url('./fonts/futura-heavy-webfont.woff') format('woff');
font-style: bold;
}
* {font-family: 'Futura Book', Arial, sans-serif}
.absolute-top {
top: 0;
position: absolute;
}
.absolute-bottom {
bottom: 0;
position: absolute;
}
.logo {
width: auto;
height: 15vh;
}
.navbar-brand > img {
width: auto;
height: 55px;
}
.program-logo {
width: 40%;
height: 20%;
}
nav {
background-color: white;
box-shadow: 0px 1px 10px 0px #4191B4;
}
.bg-image {
background: url('../imgs/bwnf-3.jpg') no-repeat center center fixed;
background-size: cover;
}
footer {
padding-top: 10px;
line-height: 1.25;
}
.login-divider hr {
width: 42.5vw;
margin-left: auto;
margin-right: auto;
border: .25px solid rgba(134, 142, 150, .25);
}
.main-hr {width: 0}
.interests {padding-left: 25px}
.profile-picture {height: 25vh}
.font-book {font-family: 'Futura Book', Arial, sans-serif}
.font-heavy {font-family: 'Futura Heavy', Arial, sans-serif}
body {overflow-x: hidden}
.padding-top {padding-top: 95px}
.left-hr {float: left}
.right-hr {float: right}
.logo-buffer {height: 10px}
a:hover {text-decoration: none}
input {text-align: center}
.fa-bars, a {color: rgba(65, 145, 180, .95)}
.fa-bars:hover, a:hover {color: rgba(65, 145, 180, 1)}
.bg-google {background-color: #EA4335}
.bg-fb {background-color: #3B5998}
.full-width {width: 100vw}
.full-height {height: 100vh}
.card-header {cursor: pointer}
/* #programs {background-image: linear-gradient(to top, #4191B4 5%, white 100%)}
#formula {background-image: linear-gradient(to top, white 0%, #4191B4 95%)} */
Let me proceed by saying that I have searched Google and Stack Overflow to find the answer to this. I have tried many solutions, but none are working.
The main issue right now is the fact that my CSS won't override the Bootstrap CSS in the jumbotron. It won't change the background color, background image or nav bar settings.
I have tried using !important. I have tried calling my stylesheet after calling the bootstrap one. In my current version, I have the #import code to call the Bootstrap CSS at the beginning of my own CSS file. None have worked. For a few items, I changed the bootstrap file, but only for color.
Please help me figure out why my file will not override bootstrap. You can see the site at http://www.dismantledesign.com/testsite2/
The site is incomplete. I just can't proceed with styling until I figure this out.
Sorry if any code ends up missing. SO doesn't always like my pastes from TextWrangler. Feel free to look at it via the source code in the link.
Code below:
#import url("bootstrap.min.css");
body{
font-family: 'Raleway', Helvetica, Arial;
font-size: 16px;
color: #666666;
font-weight: 400;
letter-spacing: 1px;
}
p{
line-height: 20pt;
font-weight: 400;
}
h1, h2, h3, h4, h5, h6{
color: #333333;
text-transform: uppercase;
font-family: 'Raleway', Helvetica, Arial;
font-weight: 700;
}
a{
color: #00acec;
text-decoration: none;
font-family: 'Raleway', Helvetica, Arial;
font-weight: 600;
}
a:hover, a:focus{
color: #5a5e61;
text-decoration: none;
}
.btn-default{
border-radius: 2px;
border: 1px solid #a7adb0;
font-size: 14px;
color: #a7adb0;
font-weight: 700;
text-transform: uppercase;
padding: 11px 20px;
}
.btn-default:hover{
background: #5a5e61;
color: #a7adb0;
}
/*end*/
/*logo*/
.navbar-brand{
width: 174px;
height: 50px;
padding: 0;
margin: 0;
text-indent: -9999px;
}
/*end*/
/*navigation*/
.navbar-default{
background: none;
border: none;
padding: 0 0 60px 0;
}
.navbar-default .navbar-nav>li>a{
font-size: 20px;
font-weight: 600;
text-transform: uppercase;
color: #a7adb0;
padding: 11px 0;
text-align: center;
}
.navbar-default .navbar-nav>li>a:hover[
color: #fff;
}
.navbar-default .navbar-nav>.active>a, .navbar-default .navbar-nav>.active>a:focus, .navbar-default .navbar-nav>.active>a:hover{
background: none;
outline: 0;
color: #fff;
}
.navbar-toggle{
border: none;
margin-top: 0;
margin-right: 0;
width:32px;
height: 32px;
text-align: center;
}
.navbar-default .navbar-collapse{
border: none;
background: rgba(0,0,0,0.1) !important;
border-radius: 2px;
box-shadow: none;
}
.jumbotron{
background: #363737 url("img/tempjumbotron.jpg") no-repeat;
background-size: cover;
max-height: 800px;
padding: 60px 0;
margin: 0;
}
/*end*/
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<!--Hey, this is the CC title!-->
<title>Contra Coda Media | Audio | Photo | Video</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<!--This is where the CSS comes from. -->
<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
</head>
<body>
<div class="jumbotron">
<div class="container">
<nav class="navbar navbar-default" role="navigation">
<!-- Brand and toggle get grouped for better mobile display-->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
<span class="sr-only"> Toggle Navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#"><img src="img/logo5.png"></a>
</div>
<!-- Collect Nav Content -->
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Services</li>
<li>Gallery</li>
<li>Contact</li>
</ul>
</div><!--END NAVBAR COLLAPSE-->
</nav>
<div class="row text-center">
<h1>THIS IS CONTRA CODA</h1>
<h3>where the music never ends</h3>
LEARN MORE
</div>
</div>
</div>
<!--END JUMBOTRON-->
<div class="whatsnew">
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img class="img-responsive" src="img/levelup.jpg" alt="">
</div>
<div class="item">
<img class="img-responsive" src="img/heartwhole.jpg" alt="">
</div>
</div>
</div>
</div>
<!--END WHATS NEW-->
<div class="services">
<div class="container">
<div class="row">
<div class="services-audio text-center">
<div class="col-md-4">
<span style="font-size: 30px" class="glyphicon glyphicon-headphones"> </span>
<h4>AUDIO</h4>
<p>We believe in good, thoroughly crafted recording and mixing with great care in order to achieve a high-quality result.</p>
learn more
</div>
</div>
<div class="services-photo text-center">
<div class="col-md-4">
<span style="font-size: 30px" class="glyphicon glyphicon-camera"> </span>
<h4>PHOTO</h4>
<p>We believe in good, thoroughly crafted recording with great care in order to achieve a high-quality result.</p>
learn more
</div>
</div>
<div class="services-video text-center">
<div class="col-md-4">
<span style="font-size: 30px" class="glyphicon glyphicon-facetime-video"> </span>
<h4>VIDEO</h4>
<p>We believe in good, thoroughly crafted recording with great care in order to achieve a high-quality result.</p>
learn more
</div>
</div>
</div>
</div>
</div>
<!--END SERVICES-->
<div class="clients">
<div class="heading">
<div class="container">
<div class="row">
<div class="col-md-6 text-center">
<h1>Clients</h1>
</div>
<div class="col-md-6 text-center">
see more
</div>
</div>
</div>
</div>
<!--END HEADING-->
<div class="gallery">
<!--GALLERY START-->
<div class="galleryinner">
<img src="img/clients/ivey.jpg" alt="" class="img-responsive" />
<div class="caption">
<div class="captionheading">
<h4>IVEY</h4>
<small>see more</small>
</div>
<div class="btn-group btn-trigger">
Link
More
</div>
</div>
<!--END CAPTION-->
</div>
<!--END GALLERY INNER-->
<div class="galleryinner">
<img src="img/clients/rufus.jpg" alt="" class="img-responsive" />
<div class="caption">
<div class="captionheading">
<h4>RUFUS DAWKINS</h4>
<small>see more</small>
</div>
<div class="btn-group btn-trigger">
Link
More
</div>
</div>
<!--END CAPTION-->
</div>
<!--END GALLERY INNER-->
<div class="galleryinner">
<img src="img/clients/seddymac.jpg" alt="" class="img-responsive" />
<div class="caption">
<div class="captionheading">
<h4>SEDDY MAC</h4>
<small>see more</small>
</div>
<div class="btn-group btn-trigger">
Link
More
</div>
</div>
<!--END CAPTION-->
</div>
<!--END GALLERY INNER-->
<div class="galleryinner">
<img src="img/clients/lomax.jpg" alt="" class="img-responsive" />
<div class="caption">
<div class="captionheading">
<h4>MELISSA LOMAX</h4>
<small>see more</small>
</div>
<div class="btn-group btn-trigger">
Link
More
</div>
</div>
<!--END CAPTION-->
</div>
<!--END GALLERY INNER-->
<div class="galleryinner">
<img src="img/clients/jeremy.jpg" alt="" class="img-responsive" />
<div class="caption">
<div class="captionheading">
<h4>JEREMY WILLIAMS</h4>
<small>see more</small>
</div>
<div class="btn-group btn-trigger">
Link
More
</div>
</div>
<!--END CAPTION-->
</div>
<!--END GALLERY INNER-->
<div class="galleryinner">
<img src="img/clients/echoing.jpg" alt="" class="img-responsive" />
<div class="caption">
<div class="captionheading">
<h4>WHEN ALL KEPT ECHOING</h4>
<small>see more</small>
</div>
<div class="btn-group btn-trigger">
Link
More
</div>
</div>
<!--END CAPTION-->
</div>
<!--END GALLERY INNER-->
<div class="galleryinner">
<img src="img/clients/delisle.jpg" alt="" class="img-responsive" />
<div class="caption">
<div class="captionheading">
<h4>RAISTLIN DELISLE</h4>
<small>see more</small>
</div>
<div class="btn-group btn-trigger">
Link
More
</div>
</div>
<!--END CAPTION-->
</div>
<!--END GALLERY INNER-->
</div>
<!--END GALLERY-->
</div>
<!---END CLIENTS-->
<div class="firstcontact">
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="email text-center">
<span style="font-size: 30px" class="glyphicon glyphicon-envelope"> </span>
<h5>EMAIL</h5>
<p>layne#contracoda.com</p>
</div>
</div>
<div class="col-md-8">
<div class="social text-center">
<span class="icon-sprite sprite-ig"> </span>
<span class="icon-sprite sprite-fb"> </span>
<span class="icon-sprite sprite-twitter"> </span>
<span class="icon-sprite sprite-soundcloud"> </span>
</div>
</div>
</div>
</div>
</div>
<!---END FIRST CONTACT-->
<footer>
<div class="container">
<div class="row">
<div class="col-md-6 text-center">
<div class="copyright">
<small>© 2017 CONTRA CODA MEDIA</small>
</div>
</div>
<div class="col-md-6 text-center">
<div class="design">
<small>WEB DESIGN BY DISMANTLE DESIGN</small>
</div>
</div>
</div>
</div>
</footer>
<!---END CLIENTS-->
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/bootstrap.js"></script>
On line 82 you are using a square bracket [ instead of an squiggle {, swap this and it will work:
.navbar-default .navbar-nav>li>a:hover {
This basically makes everything after the error not work, thus why your background wont change :) Also your background image will not change unless it looks the line looks like this (line 110):
background: #363737 url(../img/tempjumbotron.jpg) no-repeat;
Koda
For some reason, my CSS code doesn't work for the .transform class, but it does for the rest of the code.
HTML code
{% load staticfiles %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>{% block title %}Home{% endblock %}</title>
<link rel = 'stylesheet' type="text/css" href="{% static 'change/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>
<link rel = 'stylesheet' type="text/css" href='{% static 'change/css/base.css' %}'>
</head>
<body>
<nav class="navbar-fixed-top navbar navbar-default navbar-inverse" id = 'navbar'>
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active">Link <span class="sr-only">(current)</span></li>
<li>Link</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Link</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<section id = 'cover'>
<div id = 'cover-caption'>
<div class = 'container-fluid'>
<div class = 'col-md-12' id = 'text'>
<h1>Get Fit Fast</h1>
<p>Get a six pack, big arms, wide shoulders in less than 12 weeks.</p>
<p>Live your life to the fullest!</p>
</div>
</div>
</div>
</section>
{#Jumbotron beginning#}
<section class = 'transform'>
<div class = 'jumbotron text-center'>
<h1>Transformations</h1>
<p class = 'lead'>Following our fitness program will help you lose weight and gain muscle in a short amount of time.</p>
<p class = 'lead'>But dont take for it!</p>
<hr class = 'focus'>
<div class = 'container-fluid'>
<div class="row">
<div class="col-sm-3 row-md-3">
<div class="thumbnail change">
<img src="{% static 'change/img/ba1.png' %}">
</div>
</div>
<div class="col-sm-3 row-md-3">
<div class="thumbnail change">
<img src="{% static 'change/img/ba2.png' %}">
</div>
</div>
<div class="col-sm-3 row-md-3">
<div class="thumbnail change">
<img src="{% static 'change/img/ba3.png' %}">
</div>
</div>
<div class="col-sm-3 row-md-3">
<div class="thumbnail change">
<img src="{% static 'change/img/ba4.png' %}">
</div>
</div>
</div>
</div>
<hr class = 'focus'>
<p>Be quiet, Im doing a toast</p>
<p class = 'lead'>learn more..</p>
</div>
</section>
{#End of jumbotron#}
<section class ='packs'>
<div class = 'container-fluid'>
<div class="row">
<div class="col-sm-4 row-md-4">
<div class="thumbnail">
<img src="{% static 'change/img/arms.jpg' %}" alt="...">
<div class="caption">
<h3>Thumbnail label</h3>
<p>sss</p>
<p>Button Button</p>
</div>
</div>
</div>
<div class="col-sm-4 row-md-4">
<div class="thumbnail">
<img src="{% static 'change/img/chest.jpg' %}" alt="...">
<div class="caption">
<h3>Thumbnail label</h3>
<p>sss</p>
<p>Button Button</p>
</div>
</div>
</div>
<div class="col-sm-4 row-md-4">
<div class="thumbnail">
<img src="{% static 'change/img/shoulders.jpg' %}" alt="...">
<div class="caption">
<h3>Thumbnail label</h3>
<p>sss</p>
<p>Button Button</p>
</div>
</div>
</div>
</div>
</div>
</section>
</body>
</html>
CSS code
#navbar {
background: #000000;
}
html, body {
height: 100%;
}
body{
padding-top: 50px;
}
#cover {
background: #222222 url('../img/cover.jpg') center center no-repeat;
color:white;
height: 100%;
display: flex;
text-align: center;
align-items: center;
justify-content: center;
}
.jumbotron{
position: relative;
padding:0;
margin-top:70px;
background: floralwhite;
margin-top: 23px;
text-align:center;
margin-bottom: 0;
}
.container-fluid{
padding:0 ;
}
.col-sm-3{
background:rgba(157,52,99,0.7);
}
.transform {
width: 100%;
}
.transform img {
width: 100%;
height: 500px;
}
.packs {
width: 100%;
}
.packs img {
max-width: 100%;
height:200px;
}
transform is a property name. Change class name to transform1 , that might work.
I am having trouble with the layout of my HTML & CSS site.
There are meant to be 4 boxes under the top image, At the moment there are only 3. I would like them to be spread out evenly across the page. The one that isn't visible is history of gaming, I believe that for some reason it is underneath the image...
here is the code:
.jumbotron h1 {
color: #ffffff;
font-size: 150px;
font-family: Sans-serif;
font-weight: bold;
text-align: center;
margin-top: 0px;
}
.jumbotron {
background-image: url('http://i118.photobucket.com/albums/o117/Shawnthebro/bandicam2014-03-2311-20-03-210_zpse7f7712f.jpg');
position: absolute;
left: 0px;
top: 100px;
height: 350px;
display: block;
}
.nav li {
display: inline;
text-align: center;
color: #ff0000;
font-size: 50px;
bottom: 350px;
padding-left: 35px;
font-family: Sans-serif;
}
.page ul {
color: #000000;
font-size: 20px;
font-family: Calibri;
padding-left: 75px;
.page ul li {
display: inline;
}
.page a {
color: #000000;
font-size: 15px;
font-family: Calibri;
padding-left: 70px;
div.img {
margin: 5px;
border: 1px solid #ccc;
float: left;
width: 275px;
}
div.img:hover {
border: 1px solid #777;
}
div.img img {
width: 100%;
height: auto;
}
div.desc {
padding: 15px;
text-align: center;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="home.css">
<title>Gaming T,N & B</title>
<style>
div.img {
margin: 5px;
border: 1px solid #ccc;
float: left;
width: 275px;
}
div.img:hover {
border: 1px solid #777;
}
div.img img {
width: 100%;
height: auto;
}
div.desc {
padding: 15px;
text-align: center;
}
</style>
</head>
<body>
<div class="jumbotron">
<div class="container">
<h1>Gaming: Then, Now & Beyond</h1>
</div>
</div>
<div class="nav">
<div class="container">
<ul>
<li>History of Gaming
</li>
<li>Atari
</li>
<li>Other Games
</li>
<li>Future
</li>
</ul>
</div>
</div>
<div class="img">
<a target="_blank" href="history.png">
<img src="history.png" alt="The History of Gaming" width="300" height="200">
</a>
</div>
<div class="desc">
<div class="page">
<div class="container">
<h3>History of Gaming</h3>
<ul>
<li>What is gaming?</li>
<li>Pong</li>
<li>Technology Boom</li>
</ul>
<p>Learn more about the history of gaming
</p>
</div>
</div>
</div>
<div class="img">
<a target="_blank" href="atari.jpg">
<img src="atari.jpg" alt="Atari" width="600" height="400">
</a>
<div class="desc">
<div>
<h3>Atari</h3>
<ul>
<li>40 years of fun</li>
<li>Who is Nolan Bushnell</li>
<li>Bought & Sold</li>
</ul>
<p>Learn more about Atari
</p>
</div>
</div>
</div>
<div class="img">
<a target="_blank" href="xbox_ps1.jpg">
<img src="xbox_ps1.jpg" alt="Other Games" width="600" height="400">
</a>
<div class="desc">
<div>
<h3>Other Games</h3>
<ul>
<li>PC</li>
<li>Xbox</li>
<li>PlayStation</li>
</ul>
<p>Learn more about other games
</p>
</div>
</div>
</div>
<div class="img">
<a target="_blank" href="future_ocu.jpg">
<img src="future_ocu.jpg" alt="Future Gaming" width="600" height="400">
</a>
<div class="desc">
<div>
<h3>Future</h3>
<ul>
<li>Gaming in society</li>
<li>Who is driving who?</li>
<li>CrowdFunding</li>
</ul>
<p>Learn about future gaming
</p>
</div>
</div>
</div>
</div>
</div>
</div>
<iframe width="1150" height="315" src="http://www.youtube.com/embed/X1tBEKFYKJg?autoplay=1" style="border:5px dotted red">
</iframe>
</body>
</html>
Many Thanks
Adam
Bootstrap Example
Someone suggested to use bootstrap, so I created a simple example for you. I hope it is close to what you are looking for.
body {height 100%;
background:
url("http://www.designbolts.com/wp-content/uploads/2013/02/Rough-horizonal-lines-Grey-Seamless-Pattern-For-Website-Background.jpg");
}
.navbar {
margin: 0;
}
div.container {
width: 100%;
padding: 0;
text-align: center;
}
div.container>div.jumbotron {
color: white;
background-image:
url('http://i118.photobucket.com/albums/o117/Shawnthebro/bandicam2014-03-2311-20-03-210_zpse7f7712f.jpg');
text-shadow: black 2px 2px 8px;
}
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"
integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7"
crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css"
integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r"
crossorigin="anonymous">
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed"
data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"
aria-expanded="false">
<span class="sr-only">Toggle navigation</span> <span
class="icon-bar"></span> <span class="icon-bar"></span> <span
class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Some Title</a>
</div>
<div class="collapse navbar-collapse"
id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active">History of Gaming</li>
<li>Atari</li>
<li>Other Games</li>
<li>Future</li>
</ul>
</div>
</div>
</div>
</nav>
<div class="container">
<div class="jumbotron">
<h1>Gaming: Then, Now & Beyond</h1>
<p>Some extra text</p>
</div>
</div>
<article class="container">
<section class="row">
<div class="col-sm-6 col-md-4">
<div class="thumbnail">
<img
src="http://images5.fanpop.com/image/photos/28000000/randomised-random-28065165-1024-819.jpg"
alt="...">
<div class="caption">
<h3>Atari</h3>
<ul>
<li>40 years of fun</li>
<li>Who is Nolan Bushnell</li>
<li>Bought & Sold</li>
</ul>
<p>
<a
href="file:///Users/AdamMahmoud/Documents/School/Year%2010/IT/website_name/hog.html">Learn
more about the history of gaming</a>
</p>
</div>
</div>
</div>
<div class="col-sm-6 col-md-4">
<div class="thumbnail">
<img
src="http://images5.fanpop.com/image/photos/28000000/randomised-random-28065165-1024-819.jpg"
alt="...">
<div class="caption">
<h3>Other Games</h3>
<ul>
<li>PC</li>
<li>Xbox</li>
<li>PlayStation</li>
</ul>
<p>
<a
href="file:///Users/AdamMahmoud/Documents/School/Year%2010/IT/website_name/othergames.html">Learn
more about other games</a>
</p>
</div>
</div>
</div>
<div class="col-sm-6 col-md-4">
<div class="thumbnail">
<img
src="http://images5.fanpop.com/image/photos/28000000/randomised-random-28065165-1024-819.jpg"
alt="...">
<div class="caption">
<h3>History of Gaming</h3>
<ul>
<li>What is gaming?</li>
<li>Pong</li>
<li>Technology Boom</li>
</ul>
<p>
<a
href="file:///Users/AdamMahmoud/Documents/School/Year%2010/IT/website_name/hog.html">Learn
more about the history of gaming</a>
</p>
</div>
</div>
</div>
</section>
<section class="panel panel-default">
<div class="panel-heading">YouTube Video</div>
<div class="panel-body">
<div class="embed-responsive embed-responsive-16by9">
<iframe width="1150" height="315"
src="http://www.youtube.com/embed/X1tBEKFYKJg?autoplay=0">
</iframe>
</div>
</div>
</section>
</article>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"
integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS"
crossorigin="anonymous" type="text/javascript"></script>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="home.css">
<title>Gaming T,N & B</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"
integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7"
crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css"
integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r"
crossorigin="anonymous">
<style>
body {height 100%;
background:
url("http://www.designbolts.com/wp-content/uploads/2013/02/Rough-horizonal-lines-Grey-Seamless-Pattern-For-Website-Background.jpg");
}
.navbar {
margin: 0;
}
div.container {
width: 100%;
padding: 0;
text-align: center;
}
div.container>div.jumbotron {
color: white;
background-image:
url('http://i118.photobucket.com/albums/o117/Shawnthebro/bandicam2014-03-2311-20-03-210_zpse7f7712f.jpg');
text-shadow: black 2px 2px 8px;
}
</style>
</head>
<body>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed"
data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"
aria-expanded="false">
<span class="sr-only">Toggle navigation</span> <span
class="icon-bar"></span> <span class="icon-bar"></span> <span
class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Some Title</a>
</div>
<div class="collapse navbar-collapse"
id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active">History of Gaming</li>
<li>Atari</li>
<li>Other Games</li>
<li>Future</li>
</ul>
</div>
</div>
</div>
</nav>
<div class="container">
<div class="jumbotron">
<h1>Gaming: Then, Now & Beyond</h1>
<p>Some extra text</p>
</div>
</div>
<article class="container">
<section class="row">
<div class="col-sm-6 col-md-4">
<div class="thumbnail">
<img
src="http://images5.fanpop.com/image/photos/28000000/randomised-random-28065165-1024-819.jpg"
alt="...">
<div class="caption">
<h3>Atari</h3>
<ul>
<li>40 years of fun</li>
<li>Who is Nolan Bushnell</li>
<li>Bought & Sold</li>
</ul>
<p>
<a
href="file:///Users/AdamMahmoud/Documents/School/Year%2010/IT/website_name/hog.html">Learn
more about the history of gaming</a>
</p>
</div>
</div>
</div>
<div class="col-sm-6 col-md-4">
<div class="thumbnail">
<img
src="http://images5.fanpop.com/image/photos/28000000/randomised-random-28065165-1024-819.jpg"
alt="...">
<div class="caption">
<h3>Other Games</h3>
<ul>
<li>PC</li>
<li>Xbox</li>
<li>PlayStation</li>
</ul>
<p>
<a
href="file:///Users/AdamMahmoud/Documents/School/Year%2010/IT/website_name/othergames.html">Learn
more about other games</a>
</p>
</div>
</div>
</div>
<div class="col-sm-6 col-md-4">
<div class="thumbnail">
<img
src="http://images5.fanpop.com/image/photos/28000000/randomised-random-28065165-1024-819.jpg"
alt="...">
<div class="caption">
<h3>History of Gaming</h3>
<ul>
<li>What is gaming?</li>
<li>Pong</li>
<li>Technology Boom</li>
</ul>
<p>
<a
href="file:///Users/AdamMahmoud/Documents/School/Year%2010/IT/website_name/hog.html">Learn
more about the history of gaming</a>
</p>
</div>
</div>
</div>
</section>
<section class="panel panel-default">
<div class="panel-heading">YouTube Video</div>
<div class="panel-body">
<div class="embed-responsive embed-responsive-16by9">
<iframe width="1150" height="315"
src="http://www.youtube.com/embed/X1tBEKFYKJg?autoplay=0">
</iframe>
</div>
</div>
</section>
</article>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"
integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS"
crossorigin="anonymous" type="text/javascript"></script>
</body>
</html>
You have a div class "img" for the three boxes below the jumbotron. each has a div class "desc" inside it. for the history of gaming, you need to nest the "desc" class div inside the "img" class div, as such:
<div class="img">
<a target="_blank" href="history.png">
<img src="history.png" alt="The History of Gaming" width="300" height="200">
</a>
<div class="desc">
<div class="page">
<div class="container">
<h3>History of Gaming</h3>
<ul>
<li>What is gaming?</li>
<li>Pong</li>
<li>Technology Boom</li>
</ul>
<p>Learn more about the history of gaming
</p>
</div>
</div>
</div>
</div>
what you posted has the desc class div outside the first img class div.
table{
TABLE-LAYOUT:FIXED;
border:solid;
width:100%;
}
td{
padding:5px;
width:25%;
border:solid grey
}
<table>
<tr>
<td>test</td>
<td>test</td>
<td>test</td>
<td>veryveryverylongtest</td>
</tr>
</table>
My first answer. I'm quite inexperienced at answering questions
I'm not sure if this is intended, but there are no closing curly brackets for .page a .page a {
color: #000000;
font-size: 15px;
font-family: Calibri;
padding-left: 70px;
div.img {
margin: 5px;
border: 1px solid #ccc;
float: left;
width: 275px;
}
Also, <div class="desc">
<div class="page">
<div class="container">
<h3>History of Gaming</h3>
<ul>
<li>What is gaming?</li>
<li>Pong</li>
<li>Technology Boom</li>
</ul>
<p>Learn more about the history of gaming
</p>
</div>
</div>
</div>
should be in the same <div> as the image. Something like this: <div class="img">
<a target="_blank" href="history.png">
<img src="history.png" alt="The History of Gaming" width="300" height="200">
</a>
<div class="desc">
<div class="page">
<div class="container">
<h3>History of Gaming</h3>
<ul>
<li>What is gaming?</li>
<li>Pong</li>
<li>Technology Boom</li>
</ul>
<p>Learn more about the history of gaming
</p>
</div>
</div>
</div>
</div>This aligns the four boxes (add padding to move them down afterwards if you want)
I edited it because I think there was a badge for doing so.