I was working on my footer and I messed up something some where and made it so there is a white space past the screen on the right that you can scroll to. How do I remove this? Here is my code.
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">
<meta name="description" content="">
<meta name="author" content="">
<title>Ingraham PE</title>
<!-- Bootstrap Core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="css/main.css" rel="stylesheet">
<!-- Custom Fonts -->
<link href="font-awesome-4.2.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<link href="http://fonts.googleapis.com/css?family=Lora:400,700,400italic,700italic" rel="stylesheet" type="text/css">
<link href="http://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" type="text/css">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body id="about" data-spy="scroll" data-target=".navbar-fixed-top">
<!-- Navigation -->
<nav class="navbar navbar-custom navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-main-collapse">
<i class="fa fa-bars"></i>
</button>
<a class="navbar-brand" href="index.html">
<span class="light">Home</span>
</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navbar-right navbar-main-collapse">
<ul class="nav navbar-nav">
<!-- Hidden li included to remove active class from about link when scrolled up past about section -->
<li class="hidden">
</li>
<li class="active">
About
</li>
<li>
Contact
</li>
<li class="dropdown">
Assignments <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>Weight Training</li>
<li>Personal Fitness</li>
<li>Lifetime Activities</li>
<li>Team Sports</li>
</ul>
</li>
<li>
Mr.Elvig
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
<header class="intro">
<div class="intro-body">
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<h1 class="brand-heading">About</h1>
<img src="img/arrow-down.png">
</div>
</div>
</div>
</div>
</header>
<span class="anchor" id="main"></span>
<div class="content">
<div class="row">
<div class="col-md-3 col-md-offset-2 ing"><img src="img/Ingraham.png"></div>
<div class="col-md-6"><p class="content-text">“Intelligence and skill can only function at the peak of their capacity when the body is healthy and strong.” John F. Kennedy <br/><br/>Exercise can help prevent excess weight gain or help maintain weight loss. When you engage in physical activity, you burn calories. The more intense the activity, the more calories you burn. You don't need to set aside large chunks of time for exercise to reap weight-loss benefits. If you can't do an actual workout, get more active throughout the day in simple ways — by taking the stairs instead of the elevator or revving up your household chores.</p></div>
</div>
</div>
<footer class="footer">
<div class='row'>
</div>
</footer>
<!-- jQuery -->
<script src="js/jquery.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.min.js"></script>
<!-- Plugin JavaScript -->
<script src="js/jquery.easing.min.js"></script>
<!-- Google Maps API Key - Use your own API key to enable the map feature. More information on the Google Maps API can be found at https://developers.google.com/maps/ -->
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCRngKslUGJTlibkQ3FkfTxj3Xss1UlZDA&sensor=false"></script>
<!-- Custom Theme JavaScript -->
<script src="js/main.js"></script>
</body>
</html>
CSS
body {
width: 100%;
height: 100%;
font-family: Lora,"Helvetica Neue",Helvetica,Arial,sans-serif;
color: #fff;
background-color: #000;
}
html {
width: 100%;
height: 100%;
}
h1,
h2,
h3,
h4,
h5,
h6 {
margin: 0 0 35px;
text-transform: uppercase;
font-family: Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif;
font-weight: 700;
letter-spacing: 1px;
}
p {
margin: 0 0 25px;
font-size: 18px;
line-height: 1.5;
}
#media(min-width:767px) {
p {
margin: 0 0 35px;
font-size: 20px;
line-height: 1.6;
}
}
a {
color: #219ab3;
-webkit-transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
}
a:hover,
a:focus {
text-decoration: none;
color: #11505d;
}
.light {
font-weight: 400;
}
.navbar-custom {
margin-bottom: 0;
border-bottom: 1px solid rgba(255,255,255,.3);
text-transform: uppercase;
font-family: Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif;
background-color: #000;
}
.navbar-custom .navbar-brand {
font-weight: 700;
}
.navbar-custom .navbar-brand:focus {
outline: 0;
}
.navbar-custom .navbar-brand .navbar-toggle {
padding: 4px 6px;
font-size: 16px;
color: #fff;
}
.navbar-custom .navbar-brand .navbar-toggle:focus,
.navbar-custom .navbar-brand .navbar-toggle:active {
outline: 0;
}
.navbar-custom a {
color: #fff;
}
.navbar-custom .nav li.active {
outline: nonte;
background-color: rgba(255,255,255,.3);
}
.navbar-custom .nav li a {
-webkit-transition: background .3s ease-in-out;
-moz-transition: background .3s ease-in-out;
transition: background .3s ease-in-out;
}
.navbar-custom .nav li a:hover,
.navbar-custom .nav li a:focus {
outline: 0;
background-color: rgba(255,255,255,.3);
}
#media(min-width:767px) {
.navbar {
padding: 20px 0;
border-bottom: 0;
letter-spacing: 1px;
background: 0 0;
-webkit-transition: background .5s ease-in-out,padding .5s ease-in-out;
-moz-transition: background .5s ease-in-out,padding .5s ease-in-out;
transition: background .5s ease-in-out,padding .5s ease-in-out;
}
.top-nav-collapse {
padding: 0;
background-color: #000;
}
.navbar-custom.top-nav-collapse {
border-bottom: 1px solid rgba(255,255,255,.3);
}
}
.intro {
display: table;
width: 100%;
height: auto;
padding: 100px 0;
text-align: center;
color: #fff;
background: url(../img/intro-bg.jpg) no-repeat bottom center fixed;
background-color: #000;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
-o-background-size: cover;
}
.intro .intro-body {
display: table-cell;
vertical-align: middle;
}
.intro .intro-body .brand-heading {
font-size: 40px;
}
.intro .intro-body .intro-text {
font-size: 18px;
}
#media(min-width:767px) {
.intro {
height: 100%;
padding: 0;
}
.intro .intro-body .brand-heading {
font-size: 80px;
}
.intro .intro-body .intro-text {
font-size: 20px;
}
}
#-webkit-keyframes pulse {
0 {
-webkit-transform: scale(1);
transform: scale(1);
}
50% {
-webkit-transform: scale(1.2);
transform: scale(1.2);
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
}
}
#-moz-keyframes pulse {
0 {
-moz-transform: scale(1);
transform: scale(1);
}
50% {
-moz-transform: scale(1.2);
transform: scale(1.2);
}
100% {
-moz-transform: scale(1);
transform: scale(1);
}
}
::-moz-selection {
text-shadow: none;
background: #fcfcfc;
background: rgba(255,255,255,.2);
}
::selection {
text-shadow: none;
background: #fcfcfc;
background: rgba(255,255,255,.2);
}
img::selection {
background: 0 0;
}
img::-moz-selection {
background: 0 0;
}
body {
webkit-tap-highlight-color: rgba(255,255,255,.2);
}
.content {
margin: 150px 0px 150px 0px;
background-color: white;
color: black;
}
p.content-text {
margin: 0px 10px 0px 10px;
}
#about {
background: url(../img/intro-bg.jpg) no-repeat;
}
.ing {
margin-top: 55px;
}
.anchor{
display: block;
height: 51px; /*same height as header*/
margin-top: -51px; /*same height as header*/
visibility: hidden;
}
.footer {
height: 50px;
background-color: grey;
}
Thanks in advance, Ian.
Add a container class to the content div. In bootstrap a row needs to be inside a container class.
<div class="content container"> <-- add container class here
<div class="row">
<div class="col-md-3 col-md-offset-2 ing"><img src="img/Ingraham.png"></div>
<div class="col-md-6"><p class="content-text">....</p></div>
</div>
</div>
Edit:
Just checked again your content class is messing up the containers margins so better doing it like this.
<div class="content">
<div class="container"><-- add container class here
<div class="row">
<div class="col-md-3 col-md-offset-2 ing"><img src="img/Ingraham.png"></div>
<div class="col-md-6"><p class="content-text">....</p></div>
</div>
</div>
</div>
Related
i inserted a div in between my text and my header picture. please can anyone help me. i would be grateful. When i placed the div it goes to the back of the text and moves up. what can i do.I am finding it hard to add the code file. but this is the div overlapping
MY JSFIDDLE IS HERE JS FIDDLE
/*REVEAL LINK*/
.revela {
width: 100%;
text-align: center;
height: 100px;
background-color: #8080ff;
}
.button, .button:focus {
background-color: black;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
font-family: 'Bree Serif', serif;
text-transform: uppercase;
}
.button:hover {
background-color: #8080ff;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
/*IMAGE DESIGN*/
img {
width: 100%;
height: auto;
margin: 0;
padding: 0;
/*margin-top: -50px;*/
}
.exampleClass {
padding: 0;
margin: 0;
}
*{
margin: 0;
padding: 0;
}
/*NAVBAR*/
nav {
width: 100%;
}
/*body {
padding-top: 70px;
}*/
.dropdown:hover .dropdown-menu {
display: block;
}
.dropdown-menu {
top: calc(100% + 9px);
}
.navbar {
padding: 10px 0;
margin:0;
border-radius:0;
border:none;
width: 100% !important;
/*z-index: 1;*/
font-family: 'Bree Serif', serif;
}
.navbar-default{
background-color: #8080ff;
width: 100% !important;
}
.navbar-default .navbar-header > a, .navbar-default .navbar-header > a:focus, .navbar-default .navbar-header > a:hover {
color:white;
font-size: 2em;
}
.navbar-header button {
border:none;
}
.navbar-default .navbar-toggle .icon-bar {
background-color: white;
}
.navbar-default .navbar-toggle:focus, .navbar-default .navbar-toggle:hover {
background-color: transparent;
}
.navbar-default .navbar-nav > li > a {
color: white;
transition: color 0.5s;
font-size: 1.1em;
}
.navbar-default .navbar-nav > li > a:focus, .navbar-default .navbar-nav > li > a:hover{
color: white;
}
.navbar-default .navbar-nav>li.list:after {
content: "";
display:block;
border-bottom: 2px solid white;
transform: scale(0);
transition: transform 0.8s ease-in;
transform-origin: 0% 50%;
}
.navbar-default .navbar-nav>li.list:hover:after {
transform:scaleX(1);
}
/*ABOUT COMPANY*/
.works {
margin:30px 50px;
}
.history, .about{
font-family: 'Lato', sans-serif;
color:black;
}
.history{
font-size: 50px;
font-weight: 700;
}
.about {
font-size: 22px;
font-weight: 400;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<title>Allamit | Agric Engineering</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Acme" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Bree+Serif" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Lato:300,400,700" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=PT+Sans:400,400i" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="./css/allamit.css">
</head>
<body>
<nav class="navbar navbar-default">
<div class= "container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-demo">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
ALLAMIT
</div>
<div class="collapse navbar-collapse" id="bs-demo">
<ul class="nav navbar-nav navbar-right">
<li class="list">ABOUT</li>
<li class="list">COMPANY WORKS</li>
<li class="list">CONTACT</li>
</ul>
</div>
</div>
</nav>
<div class="col-xs-12 exampleClass">
<img class="image" src="https://s18.postimg.org/q7qolxsmx/garri_processing.jpg">
</div>
<div class="revela">
<a class="button" href="revealmaster/index.html">Click Here For A Presentation About The Website</a>
<div class="clearfix"></div>
</div>
<div class="works">
<!-- <div class="col-lg-12"> -->
<h2 class="history">Our Company History</h2>
<p class="about"> The company was incorporated February 1999 (RC 350443). Allamit (Nig). Limited is one of the eminent manufacturers and exporters of quality agricultural and industrial machines in Nigeria. Our company specializes in research and development and promotion of the following machines ... <a class="more" class="more" href="Director/company_profile.html">Read More</a></p>
</div>
<script src="http://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script type="text/javascript" src="./js/allamit.js"></script>
</body>
</html>
this is the div when the picture is removed. it seems the div goes under the bootstrap header
This is the div class revela
After looking into your code, there is a floating happen inside your <div class="revela"> tag,
So you just need to add <div class="clearfix"></div> before <div class="revela"> tag.
So it will look something like:
Hope this may help you.
I am editing a template and I am having trouble getting the navigation menu button to align next to my logo when viewed on mobile devices. It also slightly covers the header image on mobile as well.
Mobile view
Desktop view
Any help is greatly appreciated! Here is my code:
#import url(http://fonts.googleapis.com/css?family=Dosis:400,200,300,500,600,700,800);
#import url(http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz:400,300,200,700);
/*************************
*******Typography******
**************************/
body {
font-family: 'Dosis', sans-serif;
font-size: 17px;
color: #fff
}
.btn {
border-radius: 0;
font-family: 'Yanone Kaffeesatz','sans-serif';
font-size: 20px;
padding: 9px 23px;
}
a {
-webkit-transition: 300ms;
-moz-transition: 300ms;
-o-transition: 300ms;
transition: 300ms;
}
a:focus,
a:hover {
text-decoration: none;
outline: none
}
h1, h2, h3, h4, h5, h6 {
font-family: 'Yanone Kaffeesatz', 'sans-serif';
font-weight: 300;
text-transform: uppercase;
}
h2 {
font-size: 36px
}
.navbar-toggle {
margin-top: 12px
}
.navbar-toggle .icon-bar {
background-color: #fff;
}
.navbar-toggle,
.navbar-toggle:focus {
border:1px solid #fff;
outline: none;
}
/*************************
*******Header CSS******
**************************/
.header-top {
display: block;
overflow: hidden;
padding: 25px;
}
.main-nav {
position: absolute;
width: 100%;
z-index: 999;
}
.main-nav
.container {
width: 100%
}
.social-icons a {
font-size: 18px;
color: #fff;
padding-left:20px;
}
.social-icons .fa-facebook:hover {
color: #3B5997
}
.social-icons .fa-twitter:hover {
color:#29C5F6
}
.social-icons .fa-google-plus:hover {
color:#D13D2F
}
.social-icons .fa-youtube:hover{
color: #ec5538
}
.navbar-brand {
background-color: #ff0080;
height: 90px;
margin-bottom: 20px;
position: relative;
width: 435px;
}
.navbar-brand img {
position: absolute;
top: -35px;
}
.navbar-right {
background-color: #ff0080;
padding:0 95px 0 0;
opacity: .9
}
.navbar-right li a {
padding: 35px 21px;
font-size: 22px;
color: #fff;
text-transform: uppercase;
font-family: 'Yanone Kaffeesatz', 'sans-serif';
font-weight: 300;
}
.navbar-right li a:hover,
.navbar-right li a:focus,
.navbar-right .active a {
background-color: #fff;
color: #16728f
}
.fixed-menu {
background-color: #ff0080;
position: fixed;
top: 0;
}
.fixed-menu .navbar-right {
padding: 0;
}
.fixed-menu .navbar-right li a {
font-size: 18px;
padding: 20px 25px;
text-shadow:inherit;
}
.fixed-menu .navbar-brand {
height: 60px;
margin-top: 0;
padding: 0;
margin-bottom: 0;
width: 435px;
}
.fixed-menu .navbar-brand img {
height:60px;
top: 0;
}
.fixed-menu .header-top {
display: none;
}
/*************************
*******Home CSS******
**************************/
#home {
position: relative;
overflow: hidden;
}
#main-slider img {
width: 100%
}
#main-slider
.carousel-caption {
background: none repeat scroll 0 0 #000000;
bottom: 14%;
float: left;
left: 0;
opacity: 0.8;
padding:10px 60px 35px;
right: inherit;
text-transform: uppercase;
color: #fff;
text-align: left;
}
#main-slider
.carousel-caption h2 {
font-size: 38px;
}
#main-slider
.carousel-caption h4 {
font-size: 24px;
}
#main-slider
.carousel-caption a {
font-size: 22px;
color: #2da1c5
}
#main-slider
.carousel-caption a:hover {
color: #2588a6
}
#main-slider
.carousel-caption a:hover i {
margin-left: 35px
}
#main-slider
.carousel-caption a i {
margin-left: 15px;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
#main-slider
.carousel-indicators li {
background-color:#ff0080;
border: 1px solid #ff0080;
}
#main-slider
.carousel-indicators li.active {
background-color:#fff;
border: 1px solid #fff;
}
/*************************
*******Explore CSS******
**************************/
#explore {
background-color: #C34C39;
background-image: url("../images/event-bg.jpg");
background-position: center bottom;
background-size: contain;
background-repeat:no-repeat;
position: relative;
overflow: hidden;
padding: 130px 0 100px;
}
.watch {
position: absolute;
left: 0;
top: 7%;
}
#explore h2 {
font-size: 42px;
text-transform: uppercase;
text-align: center;
}
#countdown {
display: block;
overflow: hidden;
text-align: center;
padding: 0
}
#countdown li {
list-style: none;
display:inline-block;
margin-right: 40px;
text-align: center;
text-transform: uppercase;
font-size: 18px;
position: relative;
}
#countdown li:last-child {
margin-right: 0
}
#countdown li span {
display: block;
font-size: 40px;
font-weight: 700;
height: 82px;
line-height: 79px;
width: 75px;
border-radius: 10px;
border-right: 1px solid #c34c39;
border-bottom: 1px solid #c34c39;
}
#countdown li .days {
background-color: #45b29d;
border-top: 1px solid #c34c39;
border-left: 1px solid #c34c39;
}
#countdown li .hours {
background-color: #efc94c;
border-top: 1px solid #c34c39;
border-left: 1px solid #c34c39;
}
#countdown li .minutes {
background-color: #e27a3f;
border-top: 1px solid #c34c39;
border-left: 1px solid #c34c39;
}
#countdown li .seconds {
background-color: #df5a49;
border-top: 1px solid #c34c39;
border-left: 1px solid #c34c39;
}
#countdown li:before {
background-color: #c34c39;
content: "";
height: 11px;
left: 0;
position: absolute;
top: 36px;
width: 1px;
}
#countdown li:after {
background-color: #c34c39;
content: "";
height: 11px;
right:0;
position: absolute;
top: 36px;
width: 1px;
}
.cart {
background-color: #b34534;
position: absolute;
right:-200px;
top: 37%;
width:252px;
-webkit-transition: all 0.7s ease-in-out;
-moz-transition: all 0.7s ease-in-out;
-ms-transition: all 0.7s ease-in-out;
-o-transition: all 0.7s ease-in-out;
transition: all 0.7s ease-in-out;
}
.cart:hover {
right:0;
}
.cart a {
color: #FFFFFF;
display: block;
font-size: 24px;
text-transform: uppercase;
}
.cart a i {
font-size: 30px;
padding: 20px 12px;
background-color: #A64030;
margin-right: 3px;
}
/*************************
*******Event CSS******
**************************/
#event {
background-color: #33888F;
background-image: url("../images/performar-bg.jpg");
background-position: 50% 0;
background-size: contain;
position: relative;
background-repeat: no-repeat;
}
.guitar {
position: absolute;
right:0;
top: 0
}
#event h2 {
color: #FFFFFF;
font-size: 36px;
font-weight: 300;
margin-bottom: 40px;
margin-top: 70px;
text-transform: uppercase;
}
.single-event {
margin-bottom: 70px;
}
.single-event h4 {
color: #FFFFFF;
font-size: 24px;
font-weight: 300;
line-height: 26px;
margin-top: 25px;
text-transform: uppercase;
}
.single-event h5 {
font-size: 18px;
font-weight: 100;
display: block;
}
#event-carousel {
position: relative;
}
.even-control-left,
.even-control-right {
position: absolute;
font-size: 24px;
color: #fff;
top: 0;
}
.even-control-left {
right: 3%
}
.even-control-right {
right: 0;
}
/*************************
*******About CSS**********
**************************/
#about {
background-color: #75B46E;
position: relative;
width: 100%;
display: flex;
}
.guitar2 {
top: 0;
width: 50%;
}
.guitar2 img {
padding-top: 3%;
}
.about-content {
width: 50%;
background-image: url("../images/about-bg.jpg");
background-position: left bottom;
background-repeat: no-repeat;
background-size: cover;
padding: 70px 70px 110px;
}
#about h2 {
margin-bottom: 23px;
}
.about-content p {
font-size: 17px;
font-family: 'Dosis',sans-serif;
}
#about .btn-primary {
background-color: #137c61;
color: #fff;
text-transform: capitalize;
border: none;
margin-top: 28px;
}
#about .btn-primary:hover {
background-color: #126d55
}
/*************************
******Twitter CSS****
**************************/
#twitter {
background-color: #ecedef;
background-image: url("../images/twitter-bg.jpg");
background-position: center bottom;
background-size: cover;
background-repeat:no-repeat;
position: relative;
padding: 95px 0 90px;
overflow: hidden;
}
.twit {
position: absolute;
left: 0;
top:-42%;
}
#twitter-feed .item {
text-align: center;
}
#twitter-feed .item img {
display: inline-block;
width: 78px;
height: 78px;
border-radius: 50%;
background-color: #c5c8ce;
padding: 5px;
margin-bottom: 30px;
}
#twitter-feed .item a,
#twitter-feed .item p {
font-size: 24px;
font-weight: 300;
font-family: 'Yanone Kaffeesatz','sans-serif';
}
#twitter-feed .item p {
color: #3D3D3D;
}
#twitter-feed .item a {
color:#00c3ff;
}
.twitter-control-left,
.twitter-control-right {
position: absolute;
color: #00c3ff;
top: 59%;
font-size: 24px
}
.twitter-control-left {
left: 0;
}
.twitter-control-right {
right:0;
}
/*************************
******Sponsor CSS****
**************************/
#sponsor {
background-color: #1881a2;
background-image: url("../images/sponsor-bg.jpg");
background-position:50% 0;
background-size: cover;
background-repeat:no-repeat;
position: relative;
}
.light {
position: absolute;
right: 0;
bottom: 0;
}
#sponsor .col-sm-10 {
z-index: 10;
}
#sponsor h2 {
margin-top: 90px;
margin-bottom: 40px;
}
#sponsor .item ul {
font-size: 0;
padding: 0;
}
#sponsor .item ul li {
display: inline-block;
list-style: none;
width: 33.33%;
margin-bottom: 75px;
}
#sponsor .item ul li:last-child {
margin-right: 0
}
.sponsor-control-left,
.sponsor-control-right {
color: #FFFFFF;
font-size: 24px;
position: absolute;
top: 20%;
}
.sponsor-control-left {
right: 12%
}
.sponsor-control-right {
right: 10%
}
/*************************
******Map CSS****
**************************/
#map {
position: relative;
}
#gmap {
height:450px;
}
/*************************
******Contact CSS****
**************************/
.contact-section {
background-color: #f7ab24;
background-image: url("../images/contact-bg.jpg");
background-position:60% 0;
background-size:contain;
background-repeat:no-repeat;
position: relative;
}
.ear-piece {
position: absolute;
left: 0;
top: 0;
}
#contact .container {
padding-top:47px;
}
#contact h3 {
text-transform:inherit;
color: #373737;
}
#contact-section h3 {
margin-bottom: 25px
}
#contact address {
font-size: 18px;
color: #373737;
}
.contact-text {
margin-bottom: 35px;
display: block;
}
#contact-section .form-control {
border-color: #ae750d;
box-shadow:none;
outline: 0 none;
border-radius: 0;
color: #797979;
font-size: 18px;
}
#contact-section .form-control:focus {
border-color: #ae750d;
}
#contact-section input {
height: 44px;
}
#contact-section textarea {
height: 90px;
resize:none;
}
#contact-section .btn-primary {
background-color: #373737;
color: #f7ab24;
border: none;
font-size: 24px;
padding: 6px 42px;
margin-bottom: 110px;
margin-top: 10px
}
#contact-section .btn-primary:hover {
background-color: #212020;
color: #fff
}
/*************************
******Footer CSS****
**************************/
#footer {
background-color: #212121;
background-image: url("../images/footer-bg.jpg");
background-position: center bottom;
background-repeat: no-repeat;
background-size: cover;
color: #FFFFFF;
font-size: 20px;
padding: 35px 0;
}
#footer a {
color:#f7ab24
}
#footer a:hover {
color:#ff0080
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<title>Melodie Rooker Music</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/font-awesome.min.css" rel="stylesheet">
<link href="css/main.css" rel="stylesheet">
<link href="css/animate.css" rel="stylesheet">
<link href="css/responsive.css" rel="stylesheet">
<script src="https://use.fontawesome.com/6740b2e08a.js"></script>
<!--[if lt IE 9]>
<script src="js/html5shiv.js"></script>
<script src="js/respond.min.js"></script>
<![endif]-->
<link rel="shortcut icon" href="images/ico/favicon.ico">
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="images/ico/apple-touch-icon-144-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="images/ico/apple-touch-icon-114-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="images/ico/apple-touch-icon-72-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="images/ico/apple-touch-icon-57-precomposed.png">
</head><!--/head-->
<body>
<header id="header" role="banner">
<div class="main-nav">
<div class="container">
<div class="header-top">
<div class="pull-right social-icons">
<i class="fa fa-facebook"></i>
<i class="fa fa-youtube"></i>
<i class="fa fa-apple"></i>
<i class="fa fa-spotify"></i>
</div>
</div>
<div class="row">
<div class="navbar-header">
<button type="button" class="navbar-toggle" 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>
<a class="navbar-brand" href="index.html">
<img class="img-responsive" src="images/logo.png" alt="logo">
</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li class="scroll active">Home</li>
<li class="scroll">Explore</li>
<li class="scroll">Biography</li>
<li class="no-scroll">Sample</li>
<li class="scroll">Contact</li>
</ul>
</div>
</div>
</div>
</div>
</header>
<!--/#header-->
<section id="home">
<div id="main-slider" class="carousel slide" data-ride="carousel">
<!-- <ol class="carousel-indicators">
<li data-target="#main-slider" data-slide-to="0" class="active"></li>
<li data-target="#main-slider" data-slide-to="1"></li>
<li data-target="#main-slider" data-slide-to="2"></li>
</ol> -->
<div class="carousel-inner">
<div class="item active">
<img class="img-responsive" src="images/slider/bg1.jpg" alt="slider">
<!-- <div class="carousel-caption">
<h2>register for our next event </h2>
<h4>full event package only #$199</h4>
GRAB YOUR TICKETS <i class="fa fa-angle-right"></i>
</div> -->
</div>
<!--<div class="item">
<img class="img-responsive" src="images/slider/bg2.jpg" alt="slider">
<div class="carousel-caption">
<h2>register for our next event </h2>
<h4>full event package only #$199</h4>
GRAB YOUR TICKETS <i class="fa fa-angle-right"></i>
</div>
</div>
<div class="item">
<img class="img-responsive" src="images/slider/bg3.jpg" alt="slider">
<div class="carousel-caption">
<h2>register for our next event </h2>
<h4>full event package only #$199</h4>
</i>
</div>
</div>
</div>
</div> -->
</section>
<!--/#home-->
<section id="explore">
<div class="container">
<div class="row">
<div class="watch">
<img class="img-responsive" src="images/watch.png" alt="">
</div>
<div class="col-md-4 col-md-offset-2 col-sm-5">
<h2>Upcoming Show<br>McLeod's Publick House</h2>
</div>
<div class="col-sm-7 col-md-6">
<ul id="countdown">
<li>
<span class="days time-font">00</span>
<p>days </p>
</li>
<li>
<span class="hours time-font">00</span>
<p class="">hours </p>
</li>
<li>
<span class="minutes time-font">00</span>
<p class="">minutes</p>
</li>
<li>
<span class="seconds time-font">00</span>
<p class="">seconds</p>
</li>
</ul>
</div>
</div>
<div class="cart">
<i class="fa fa-map-o"></i> <span>Get Directions</span>
</div>
</div>
</section><!--/#explore-->
<section id="event">
<div class="container">
<div class="row">
<div class="col-sm-12 col-md-9">
<div id="event-carousel" class="carousel slide" data-interval="false">
<h2 class="heading">Explore</h2>
<a class="even-control-left" href="#event-carousel" data-slide="prev"><i class="fa fa-angle-left"></i></a>
<a class="even-control-right" href="#event-carousel" data-slide="next"><i class="fa fa-angle-right"></i></a>
<div class="carousel-inner">
<div class="item active">
<div class="row">
<div class="col-sm-4">
<div class="single-event">
<img class="img-responsive" src="images/melodie-ricky.jpg" alt="Melodie and Ricky Rooker">
<h4>Melodie and Ricky Rooker</h4>
<h5>vocals, lead guitar</h5>
</div>
</div>
<div class="col-sm-4">
<div class="single-event">
<img class="img-responsive" src="images/loudboyz.jpg" alt="Melodie Rooker and the Loud Boyz">
<h4>Melodie Rooker</h4>
<h5>and the Loud Boyz</h5>
</div>
</div>
<div class="col-sm-4">
<div class="single-event">
<img class="img-responsive" src="images/mcleods-family.jpg" alt="We had such a blast playing at McLeod's Publick House in Dothan, AL last night! We got invited to be part of the family, which means our poster got autographed and put up on the wall!">
<h4>McLeod's Publick House</h4>
<h5>We became a part of the "family"</h5>
</div>
</div>
</div>
</div>
<div class="item">
<div class="row">
<div class="col-sm-4">
<div class="single-event">
<img class="img-responsive" src="images/studio.jpg" alt="Melodie at FAME Studios in Muscle Shoals, Alabama">
<h4>FAME Studios</h4>
<h5>Muscle Shoals, AL</h5>
</div>
</div>
<div class="col-sm-4">
<div class="single-event">
<img class="img-responsive" src="images/ricky.jpg" alt="Ricky Rooker at FAME Studios in Muscle Shoals, Alabama">
<h4>FAME Studios</h4>
<h5>Muscle Shoals, AL</h5>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="guitar">
<img class="img-responsive" src="images/guitar.png" alt="guitar">
</div>
</div>
</div>
</section><!--/#event-->
<section id="about">
<div class="guitar2">
<img class="img-responsive" src="images/guitar2.jpg" alt="guitar">
</div>
<div class="about-content">
<h2>Biography</h2>
<p><stron>Melodie Rooker is a singer/songwriter based out of Nashville, TN. She has been singing since the day she was old enough to hold a microphone, and has fronted bands in Missouri, Mississippi, and Tennessee. Her current band, the Loud Boyz, consists of a rhythm/lead guitar (Ricky Rooker), bass (Colton Everhart), and drums (Justin Parker). Melodie Rooker & the Loud Boyz play Country, Blues, & Rock 'n Roll (all the good stuff)! Their shows are extremely high energy and interactive. All in all, this 4-piece band packs a powerful punch!<br><br>Melodie & the Loud Boyz are signed with Old Dog's Records based out of Nashville, TN. They have been interviewed on KTXR FM 101.3 (The Outlaw), and Browne Hill Radio (Africa).<br><br>Melodie Rooker & the Loud Boyz can play up to a 5 hour show, and can tweak their set list to play what the particular crowd wants to hear. They are open to traveling anywhere, and are available now for booking.</strong></p>
</div>
</section><!--/#about-->
<section id="twitter">
<div class="container">
<div class="row">
<div class="col-md-12">
<iframe width="100%" height="166" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/293251580&color=ff5500&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false"></iframe>
</div>
</div>
</div>
</section><!--/#twitter-feed-->
<section id="contact">
<!-- <div id="map">
<div id="gmap-wrap">
<div id="gmap">
</div>
</div>
</div><!--/#map-->
<div class="contact-section">
<div class="ear-piece">
<img class="img-responsive" src="images/ear-piece.png" alt="">
</div>
<div class="container">
<div class="row">
<div class="col-sm-3 col-sm-offset-4">
<div class="contact-text">
<h3>Contact</h3>
<address>
E-mail: melodie#melodierookermusic.com<br>
Phone: (417) 771-9817<br>
</address>
</div>
<div class="contact-address">
<h3>Find me in</h3>
<address>
Nashville, TN
</address>
</div>
</div>
<div class="col-sm-5">
<div id="contact-section">
<h3>Send a message</h3>
<div class="status alert alert-success" style="display: none"></div>
<form id="main-contact-form" class="contact-form" name="contact-form" method="post" action="sendemail.php">
<div class="form-group">
<input type="text" name="name" class="form-control" required="required" placeholder="Name">
</div>
<div class="form-group">
<input type="email" name="email" class="form-control" required="required" placeholder="Email">
</div>
<div class="form-group">
<textarea name="message" id="message" required="required" class="form-control" rows="4" placeholder="Enter your message"></textarea>
</div>
<div class="form-group">
<button type="submit" class="btn btn-primary pull-right">Send</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</section>
<!--/#contact-->
<footer id="footer">
<div class="container">
<div class="text-center">
<p> Copyright ©2017 Melodie Rooker All Rights Reserved</p>
</div>
</div>
</footer>
<!--/#footer-->
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script type="text/javascript" src="js/gmaps.js"></script>
<script type="text/javascript" src="js/smoothscroll.js"></script>
<script type="text/javascript" src="js/jquery.parallax.js"></script>
<script type="text/javascript" src="js/coundown-timer.js"></script>
<script type="text/javascript" src="js/jquery.scrollTo.js"></script>
<script type="text/javascript" src="js/jquery.nav.js"></script>
<script type="text/javascript" src="js/main.js"></script>
</body>
</html>
You are using Bootstrap, but you're not taking full advantage of Bootstrap's Grid System and positioning.
You can also check out Bootstrap Examples to find existing HTML structures that you can look at, copy and use.
In your case, the issue is that your .navbar-brand is using a fixed width instead of a responsive width set in percentages. This means that when you scale down the client window to Mobile size, your CSS still say that your .navbar-brand is suppose to be width: 435px;, which gives too little space for the button to appear on the same row.
If you don't want to use the Bootstrap Exampels that I linked to above, or the Bootstrap Grid System taht I also linked to above, you can solve this issue with a CSS Media Query.
For example:
#media(max-width: 767px) {
.navbar-brand {
width: 300px;
}
}
That would change the width of your .navbar-brand to 300px whenever the device has a smaller width than 768px (Usually considered mobile devices). However I suggest that you look at the two first links if you're already using Bootstrap.
I am trying to divide row into 2 (span4 & span8) but couldn't manage so far. The second div (span8) slides down. What I am missing?
Here is my related markup:
<section id="products" data-direction="from-left">
<div class="container">
<h1>
<span lang="tr">ÜRÜNLERİMİZ</span>
</h1>
<div class="container-fluid">
<div class="row-fluid">
<div class="span12">
<div class="carousel slide" id="myCarousel">
<div class="carousel-inner">
<div class="row-fluid item active">
<div class="bannerImage">
<img src="images/waspmote_pro_t.png" alt="">
<img src="images/waspmote_exp_radio_board_2-375_t.png" alt="">
<img src="images/u13_gw_t.png" alt="">
</div>
<div class="caption row-fluid">
<div class="span12">
<h3>Waspmote</h3>
</div>
<div class="row-fluid">
<div class="span4">
<ul style="list-style-type: none;">
<li><i class="fa fa-share-alt"></i> Connect any sensor</li>
<li><i class="fa fa-rss"></i> Using any wireless technology</li>
<li><i class="fa fa-cloud"></i> To any Cloud Platform</li>
</ul>
</div>
<div class="span8">
<ul style="list-style-type: none;">
<li><i class="fa fa-share-alt"></i> Connect any sensor</li>
<li><i class="fa fa-rss"></i> Using any wireless technology</li>
<li><i class="fa fa-cloud"></i> To any Cloud Platform</li>
</ul>
</div>
</div>
</div>
</div><!-- /Slide1 -->
</div>
<div class="control-box">
<a data-slide="prev" href="#myCarousel" class="carousel-control left">‹</a>
<a data-slide="next" href="#myCarousel" class="carousel-control right">›</a>
</div><!-- /.control-box -->
</div><!-- /#myCarousel -->
</div><!-- /.span12 -->
</div><!-- /.row -->
</div><!-- /.container -->
</div>
</section>
Here is the sample screenshot:
sample
Here is the FF debug:
sample
edit 1: It is Bootstrap v3.2.0
Here is my relevant custom CSS:
div {
word-break: break-all;
}
img {
max-width: 100%;
}
a {
-webkit-transition: all 150ms ease;
-moz-transition: all 150ms ease;
-ms-transition: all 150ms ease;
-o-transition: all 150ms ease;
transition: all 150ms ease;
}
a:hover {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
/* IE 8 */
filter: alpha(opacity=50);
/* IE7 */
opacity: 0.6;
text-decoration: none;
}
/* Container */
.container-fluid {
background: #fbf4e0;
margin: 40px auto 10px;
padding: 20px 0px;
max-width: 960px;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
}
/* Page Header */
.page-header {
background: #fbf4e0;
margin: -30px 0px 0px;
padding: 20px 40px;
border-top: 4px solid #ccc;
color: #a83b3b;
text-transform: uppercase;
}
.page-header h3 {
line-height: 0.88rem;
color: #a83b3b;
}
/* Thumbnail Box */
.caption {
height: 140px;
width: 100%;
margin: 10px 0px;
padding: 20px;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
.caption .span4,
.caption .span8 {
padding: 0px 20px;
}
.caption .span4 {
border-right: 1px dotted #CCCCCC;
}
.caption h3 {
color: #a83b3b;
line-height: 2rem;
margin: 0 0 20px;
text-transform: uppercase;
}
.caption p {
font-size: 1rem;
line-height: 1.6rem;
color: #a83b3b;
}
.caption ul{
color: #a83b3b;
}
.btn.btn-mini {
background: #a83b3b;
border-radius: 0 0 0 0;
color: #fbf4e0;
font-size: 0.63rem;
text-shadow: none !important;
}
.carousel-control {
top: 33%;
}
/* Footer */
.footer {
margin: auto;
width: 100%;
max-width: 960px;
display: block;
font-size: 0.69rem;
}
.footer,
.footer a {
color: #fff;
}
p.right {
float: right;
}
::selection {
background: #ff5e99;
color: #FFFFFF;
text-shadow: 0;
}
::-moz-selection {
background: #ff5e99;
color: #FFFFFF;
}
a,
a:focus,
a:active,
a:hover,
object,
embed {
outline: none;
}
:-moz-any-link:focus {
outline: none;
}
input::-moz-focus-inner {
border: 0;
}
.bannerImage img {
margin-left: 10%;
/*margin-right: 10%;*/
}
edit 2: Here is the other CSS files.
<!-- ==============================================
CSS
=============================================== -->
<link href='http://fonts.googleapis.com/css?family=Raleway:700,400,500' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/font-awesome.min.css">
Thanks in advance & Best Regards.
So the classes you are using for scaffolding (row-fluid and span*) are from an older version of bootstrap.
You need to use the scaffolding classes of Bootstrap 3 for example: container-fluid, row, col-md-*. Check the full documentation on the Bootstrap 3 grid system here.
Example:
Instead of:
<div class="container-fluid">
<div class="row-fluid">
<div class="span12"></div>
</div>
<div class="row-fluid">
<div class="span8"></div>
<div class="span4"></div>
</div>
</div>
Use:
<div class="container-fluid">
<div class="row">
<div class="col-md-12"></div>
</div>
<div class="row">
<div class="col-md-8"></div>
<div class="col-md-4"></div>
</div>
</div>
This is the HTML code for my BootStrap website:
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="../../favicon.ico">
<title>Yanni Pang</title><!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="/css/bootstrap.min.css" type="text/css"><!-- Custom styles for this template -->
<link href="/css/main.css" rel="stylesheet" type="text/css"><!-- Animate CSS -->
<link href="/css/animate.css" rel="stylesheet" type="text/css">
<link href="css/minimalpace.css" type="text/css">
<script src="plugins/pace.min.js" type="text/javascript">
</script>
<link href="css/minimalpace.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" type="text/css">
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript">
</script><!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js" type="text/javascript">
</script><!-- Just for debugging purposes. Don't actually copy these 2 lines! -->
<!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
<script src="../../assets/js/ie-emulation-modes-warning.js" type="text/javascript">
</script><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<!-- Analytics -->
<script type="text/javascript">
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-17399906-5', 'auto');
ga('send', 'pageview');
</script><!-- End -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="assets/css/bootstrap-responsive.css" rel="stylesheet" type="text/css">
</head>
<body>
<nav class="navbar navbar-inverse animated fadeIn">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"><span class="sr-only">Toggle navigation</span></button> <a class="navbar-brand animated slideInLeft" href="/index.html">Yanni Pang</a>
</div>
<div class="navbar-collapse collapse" id="navbar">
<ul class="nav navbar-nav navbar-right">
<li>Home</li>
<li class="disabled">Photos</li>
<li>Articles</li>
<li>Contact Me</li>
<li>test2</li>
</ul>
</div>
</div><!-- <ul class="nav nav-pills pull-right">
<li class="navbarpills">Home</li>
<li class="disabled">Photos</li>
<li>Articles</li>
<li>test1</li>
<li>test2</li>
</ul> -->
</nav>
<div class="container">
<div class="jumbotron jumbotronothercolor animated fadeIn">
<h1>Welcome to my website!</h1>
<p class="lead">On this site, I will post random stuff!</p>
</div>
<div class="row marketing">
<div class="col-lg-6">
<h4>Education</h4>
<p>I am a 9th grade High School student at RMHS. I am teaching myself how to program, and build things.</p>
</div>
<div class="col-lg-6">
<h4>Missions Trips</h4><!-- <ul class="missionslist"> -->
<ul class="missionslist">
<li style="list-style: none; display: inline">
<h5>Grace Chapel</h5>
</li>
<li>Trinidad 2014</li>
<li><a class="animated bounceIn" href="/navajonation">Navajo Nation 2015</a></li>
</ul>
</div>
</div>
<div class="row">
<div class="col-lg-6">
<h4>Sports</h4>
<p>I swim competitively for the Reading Rockets Men's Swim Team. I have earned my varsity letter. Here are my records:</p><br>
<p>50 Free: 26.75</p>
<p>100 Breast: 1:17.93</p>
<p>100 Free: 1:01:01</p>
<p>Breath Holding Personal Best: 1:30:57</p>
</div>
<div class="col-lg-6">
<h4>Hobbies</h4>
<p>Swimming</p>
<p>Coding</p>
<p>Making</p>
<p>Photography</p>
</div>
<div class="row">
<div class="col-lg-6 tempspace">
<h4>Coding Experience</h4>
<p>HTML</p>
<p>CSS</p>
<p>Some Java</p>
<p>Some AppleScript</p>
</div>
<div class="col-lg-6">
<h4>Photography Gear</h4>
<p>Canon EOS Rebel t6s</p>
<p>Video Ball Mount Tripod</p>
<p>Canon EF-S 18-135 Lens with Lens Hood</p>
<p>Canon EF 50mm STM</p>
</div>
</div>
<div class="row">
<div class="col-lg-12 social animated fadeIn">
<span class="fa-stack fa-lg"> </span> <span class="fa-stack fa-lg"> </span> <span class="fa-stack fa-lg"> </span>
</div>
</div>
<footer class="footer">
<p>© Yanni Pang 2014</p><img src="http://iplogger.org/1sF94.jpg">
</footer>
</div><!-- /container -->
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="../../assets/js/ie10-viewport-bug-workaround.js" type="text/javascript">
</script>
</div>
</body>
</html>
Here is my CSS:
/* Space out content a bit */
body {
background-color: #fff;
color: #000;
}
.jumbotronothercolor {
background: rgba(120, 163,rgba(210, 210, 210, 1)92, 0.79);
}
: : selection {
background: #74ff7d;
}
/* Everything but the jumbotron gets side spacing for mobile first views */
.header,.marketing,.footer,.singlepage {
padding-right: 15px;
padding-left: 15px;
}
/* MoreSpace for text */
.morespace {
padding-left: 80px;
}
.lessspace {
padding-left: 149px;
}
/* Nav Pills */
.nav-pills>li>a {
color: #76a25b;
}
/* End Nav Pills */
/* Text Centered */
.col-lg-12 > a {
text-decoration: none;
}
.col-lg-12 {
text-align: center;
}
.col-lg-12 a:hover {
text-decoration: none;
color: #ff9a00;
transition: .5s;
}
.col-lg-12 a {
text-decoration: none;
color: #76a25b;
transition: .5s;
}
/* Main Body Links */
.col-lg-6 a {
text-decoration: none;
color: #76a25b;
transition: .5s;
}
.col-lg-6 a:hover {
text-decoration: none;
color: #ff9a00;
}
.col-lg-6 {
text-align: center;
}
/* Main Body Links End */
/* Custom page header */
.header {
padding-bottom: 20px;
border-bottom: 1px solid #e5e5e5;
}
/* Make the masthead heading the same height as the navigation */
.header h3 {
margin-top: 0;
margin-bottom: 0;
line-height: 40px;
}
/* Custom page footer */
.footer {
padding-top: 19px;
color: #777;
border-top: 1px solid #e5e5e5;
text-align: center;
}
/* Customize container */
#media (min-width: 768px) {
.container {
max-width: 730px;
}
}
.container-narrow > hr {
margin: 30px 0;
}
/* Main marketing message and sign up button */
.jumbotron {
text-align: center;
border-bottom: 1px solid #e5e5e5;
color: #000;
}
/* Supporting marketing content */
.marketing {
margin: 40px 0;
}
.marketing p + h4 {
margin-top: 28px;
}
/* Responsive: Portrait tablets and up */
#media screen and (min-width: 768px) {
/* Remove the padding we set earlier */
.header,.marketing,.footer {
padding-right: 0;
padding-left: 0;
}
/* Space out the masthead */
.header {
margin-bottom: 30px;
}
/* Remove the bottom border on the jumbotron for visual effect */
.jumbotron {
border-bottom: 0;
}
}
.tempspace {
margin-top: 50px;
}
.missionslist {
list-style-type: disc;
list-style-position: inside;
margin: 0;
padding: 0;
}
.missionslist h4 {
margin: 0;
padding: 0;
}
/*Navbar*/
.navbar {
border-radius: 0;
}
.navbar-brand {
font-size: 180%;
}
.navbar-inverse .navbar-nav > li > a {
color: #74ff7d;
}
.navbar-inverse .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus {
color: #ff9a00;
}
.navbar-inverse .navbar-brand {
color: white;
}
.navbar-toggle {
border: none;
background: transparent !important;
}
.navbar-toggle:hover {
background: transparent !important;
}
.navbar-toggle .icon-bar {
width: 22px;
transition: all 0.2s;
}
.navbar-toggle .top-bar {
transform: rotate(45deg);
transform-origin: 10% 10%;
}
.navbar-toggle .middle-bar {
opacity: 0;
}
.navbar-toggle .bottom-bar {
transform: rotate(-45deg);
transform-origin: 10% 90%;
}
.navbar-toggle.collapsed .top-bar {
transform: rotate(0);
}
.navbar-toggle.collapsed .middle-bar {
opacity: 1;
}
.navbar-toggle.collapsed .bottom-bar {
transform: rotate(0);
}
/*End*/
/*NavajoNation*/
.singlepage {
border-bottom: 1px solid #e5e5e5;
text-align: center;
}
.navajonation {
font-family: Helvetica;
font-size: 1.2em;
text-align: auto;
line-height: 2em;
}
.navajonationdonate {
padding-top: 20px;
}
.navajocenter {
text-align: center;
}
/*NavajoNation End*/
/*Col Center*/
.row-centered {
text-align: center;
}
.col-centered {
display: inline-block;
float: none;
/* reset the text-align */
text-align: left;
/* inline-block space fix */
margin-right: -4px;
}
/*Col Center End*/
.tab {
margin-left: 40px;
}
/* Classes */
.pull-left {
float: left!important;
}
.pull-right {
float: right!important;
}
// Usage as mixins
.element {
}
.another-element {
}
.watermark {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: transparent url(http://yannipang.com/images/watermark.png) bottom right no-repeat;
z-index: 1100;
}
This is how it appears:
Website
How do I align 'Photography Gear' and 'Coding Experience' horizontally so they are parallel like the others? Also why is there a big space between the bottom of 'Sports' and 'Photography Gear'?This has been bugging me for a while now. Thanks for all your help!
You forgot close the div - second row (with sports and hobbies).
The second row div is not closed before starting the next row which causes them to be nested.
...
<div class="col-lg-6">
<h4>Hobbies</h4>
<p>Swimming</p>
<p>Coding</p>
<p>Making</p>
<p>Photography</p>
</div>
</div> <!-- This row closing tag is missing -->
<div class="row">
<div class="col-lg-6 tempspace">
<h4>Coding Experience</h4>
<p>HTML</p>
<p>CSS</p>
<p>Some Java</p>
<p>Some AppleScript</p>
</div>
...
Then you also have a stray closing div tag at the bottom before the closing body tag. You probably threw it down there by accident to fix a tag warning.
Would love to know how to make my images centered not floating to the left. I tried modifying the float attributes but things just go messy. Help please!
I'm using section tags no grid thingy whatsoever.
When I set the float to "none" this happens
#hover {
color: rgba(188, 175, 204, 0.9);
}
h2#testimonials {
color: #E72635;
}
div#all {
width: 100%;
height: 100%;
}
/* generic css */
.view {
margin: 10px;
float: left;
border: 10px solid #fff;
overflow: hidden;
position: relative;
text-align: center;
box-shadow: 1px 1px 2px #e6e6e6;
cursor: default;
background: #fff url(../images/bgimg.jpg) no-repeat center center
}
.view .mask, .view .content {
width: 300px;
height: 200px;
position: absolute;
overflow: hidden;
top: 0;
left: 0
}
.view img {
display: block;
position: relative
}
.view h2 {
text-transform: uppercase;
color: #fff;
text-align: center;
position: relative;
font-size: 17px;
font-family: "Josefin Slab","Helvetica Neue",Helvetica,Arial,sans-serif;
padding: 10px;
background: rgba(0, 0, 0, 0.8);
margin: 20px 0 0 0
}
.view p {
font-family: Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif;
font-style: italic;
font-size: 12px;
position: relative;
color: #fff;
padding: 0px 20px 0px;
text-align: center
}
.view a.info {
display: inline-block;
text-decoration: none;
padding: 7px 14px;
background: #000;
color: #fff;
font-family: Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif;
text-transform: uppercase;
box-shadow: 0 0 1px #000
}
.view a.info:hover {
box-shadow: 0 0 5px #000
}
/*2*/
.view-second img {
transition: all 0.2s ease-in;
-webkit-transition: all 0.2s ease-in;
}
.view-second .mask {
background-color: rgba(12, 19, 27, 0.6);
width: 400px;
padding: 105px;
height: 450px;
opacity: 0;
transition: all 0.2s ease-in-out 0s;
-webkit-transition: all 0.2s ease-in-out;
}
.view-second h2 {
border-bottom: 1px solid rgba(0, 0, 0, 0.3);
font-family: "Josefin Slab","Helvetica Neue",Helvetica,Arial,sans-serif;
background: transparent;
margin: 20px 40px 0px 40px;
opacity: 0;
color: #8F1925;
transform: scale(0);
transition: all 0.5s linear 0s;
}
.view-second p {
transform: scale(0);
transition: all 0.5s linear 0s;
}
.view-second a.info {
opacity: 0;
transform: scale(0);
transition: all 0.5s linear;
}
/* */
.view-second:hover .mask {
opacity:1;
transform: translate(-80px, -125px) rotate(45deg);
-webkit-transform: translate(-80px, -125px) rotate(45deg);
}
.view-second:hover h2,
.view-second:hover p,
.view-second:hover a.info{
transform: scale(1);
opacity: 3;
}
img#articlePic {
height: 200px;
width: 300px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>The University Digest</title>
<link rel="shortcut icon" href="img/logo1.png" />
<!-- Bootstrap Core CSS -->
<link href="font-awesome-4.1.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="css/template.css" rel="stylesheet">
<link href="css/indexObjects.css" rel="stylesheet">
<!-- Fonts -->
<link href="http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800" rel="stylesheet" type="text/css">
<link href="http://fonts.googleapis.com/css?family=Josefin+Slab:100,300,400,600,700,100italic,300italic,400italic,600italic,700italic" rel="stylesheet" type="text/css">
<link href="http://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" type="text/css">
</head>
<body id="page-top" data-spy="scroll" data-target=".navbar-fixed-top">
<!-- Header Container -->
<div class="container-full" id="headerC">
<header class="masthead">
<p id="headerP">The University Digest</p>
<p id="subheader">The Official Student Publication of Western Mindanao State University</p>
</header>
</div>
<!-- Navigation -->
<div id="nav">
<!-- Content Layout -->
<!-- Portfolio Grid Section -->
<section id="portfolio" class="bg-light-gray">
<div class="container">
<div class="rows">
<div class="col-lg-12">
<h2 class="section-heading">Articles</h2>
</div>
<div id="all">
<div class="view view-second">
<img src="http://goo.gl/n6eiy5" class="img-responsive img-full" alt="" id="articlePic" />
<div class="mask"></div>
<div class="content">
<h2 id="testimonials">Testimonials</h2>
<p>“A description of some sort between these tags. I am so cool ye and awesomely awesome. He was cool.”</p>
Read More
</div>
</div>
<div class="view view-second">
<img src="http://goo.gl/ikGTbN" class="img-responsive" alt="" id="articlePic" />
<div class="mask"></div>
<div class="content">
<h2 id="testimonials">Testimonials</h2>
<p>“A description of some sort between these tags. I am so cool ye and awesomely awesome. He was cool.”</p>
Read More
</div>
</div>
<div class="view view-second">
<img src="http://jacobstone.co.uk/Livetesting/guy.jpg" class="img-responsive" alt="" id="articlePic" />
<div class="mask"></div>
<div class="content">
<h2 id="testimonials">Testimonials</h2>
<p>“A description of some sort between these tags. I am so cool ye and awesomely awesome. He was cool.”</p>
Read More
</div>
</div>
<div class="view view-second">
<img src="http://jacobstone.co.uk/Livetesting/guy.jpg" class="img-responsive" alt="" id="articlePic"/>
<div class="mask"></div>
<div class="content">
<h2 id="testimonials">Testimonials</h2>
<p>“A description of some sort between these tags. I am so cool ye and awesomely awesome. He was cool.”</p>
Read More
</div>
</div>
<div class="view view-second">
<img src="http://jacobstone.co.uk/Livetesting/guy.jpg" class="img-responsive" alt="" id="articlePic"/>
<div class="mask"></div>
<div class="content">
<h2 id="testimonials">Testimonials</h2>
<p>“A description of some sort between these tags. I am so cool ye and awesomely awesome. He was cool.”</p>
Read More
</div>
</div>
<div class="view view-second">
<img src="http://jacobstone.co.uk/Livetesting/guy.jpg" class="img-responsive" alt="" />
<div class="mask"></div>
<div class="content">
<h2 id="testimonials">Testimonials</h2>
<p>“A description of some sort between these tags. I am so cool ye and awesomely awesome. He was cool.”</p>
Read More
</div>
</div>
</div>
</div>
</div>
</section>
</body>
</html>
Just make some changes in your css and you can easily get your desired result through the mentioned below css
CSS
div#all {
border: 1px solid;
display: block;
height: 100%;
overflow: hidden;
text-align: center;
width: 100%;
}
.view {
background: url("../images/bgimg.jpg") no-repeat scroll center center #FFFFFF;
border: 10px solid #FFFFFF;
box-shadow: 1px 1px 2px #E6E6E6;
cursor: default;
display: inline-block;
margin: 10px;
overflow: hidden;
position: relative;
text-align: center;
}
DEMO
what about the good old margin: 0 auto; for centering elements?
okay and what about this, for centering the images?
display: block;
margin-left: auto;
margin-right: auto
Another possible solution could be the display: table-cell; css rule and then with the horizontal/vertical alignment. I'm currently at work and cannot test it.
.view {
background: url("../images/bgimg.jpg") no-repeat scroll center center #fff;
border: 10px solid #fff;
box-shadow: 1px 1px 2px #e6e6e6;
cursor: default;
display: block;
margin: auto;
overflow: hidden;
position: relative;
text-align: center;
width: 300px;
}