I have been building a website on my laptop since a month, the website looks all nice and dandy on my machine(15 inch screen. However when I run it on different machines(17 inch and 13 inch) ones, it all goes haphazard. I have used bootstrap, my website is responsive to some extent but not fully.
Since I don't fully know which all parts of the site and responsible for the "un-responsiveness", I will post the whole code here.
HTML:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"></link>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="main.css"></link>
<link rel="stylesheet" href="css/navbar.css">
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="js/script.js"></script>
<title>Big Data for your city!</title>
</head>
<body>
<header>
<div class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class = "navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#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" rel="home" href="#" title="Explore around">
<img style="max-width:150px; margin-top: -7px;"
src="Images/logo.png">
</a>
</div>
<div class="collapse navbar-collapse" id="collapse">
<ul class="nav navbar-nav navbar-right">
<li>SIGN UP</li>
<li>LOG IN</li>
<li>ABOUT</li>
</ul>
</div>
</div>
</div>
</header>
<div class="jumbotron">
<div class="container-fluid">
<h1><center>Find amazing places near your city.</center></h1>
<p>Places you could travel to and explore in a weekend.</p>
<a class = "explore-anc" href="#Cities"><button id "exlpore-button" class="btn sm explore">Explore</button></a>
<p>OR</p>
<div class = "seach-area">
<form id="searchBox" action="/search" style="display:inline;" method="get">
<center><input id="text-enter" name="q" size="80" type="text" placeholder="Enter a place "/>
<input id="search-button" value="Search" type="submit"/></center>
</form>
</div>
</div>
</div>
<div class="learn-more" id ="learn">
<div class="container">
<div class = "row">
<div class = "col-md-4">
<h3>Cities with service</h3>
<p>Find all the cities here!</p>
</div>
<div class = "col-md-4">
<h3>Analyze</h3>
<p>Big data analyics</p>
</div>
<div class = "col-md-4">
<h3>Vlue</h3>
<p>Add value to all your stuff here!</p>
</div>
</div>
</div>
</div>
<div id = "Cities" class = "neighborhood-guides">
<div class = "container">
<h2>Cities:</h2>
<p>Start exploring places around your city</p>
<div class = "row">
<div class = "col-md-4">
<div class = "thumbnail" ng-click = "city NY">
<image src = "Images/NY.jpg"/>
</div>
<div class = "thumbnail" ng-click = "city mum">
<image src = "Images/Mum.jpg"/>
</div>
</div>
<div class = "col-md-4">
<div class = "thumbnail" ng-click = "city SF">
<image src = "Images/SF.jpg"/>
</div>
<div class = "thumbnail" ng-click = "city LA">
<image src = "Images/LA.jpg"/>
</div>
</div>
<div class = "col-md-4">
<div class = "thumbnail" ng-click = "city del">
<image src = "Images/Del.jpg"/>
</div>
<div class = "thumbnail" ng-click = "city MA">
<image src = "Images/MA.jpg"/>
</div>
</div>
</div>
</div>
</div>
<div id = "analytics" class = "analytics">
<div class = "container">
<div>
<h2><center>Plan better with data</center></h2>
<p>Data is constantly churned, filtered and updated. Forget numbers, use graphs and make your every trip a perfect one</p>
</div>
<div class="row">
<div class="col-md-6">
<img src="Images/india-home.png" />
</div>
<div class="col-md-6">
<ul type = "">
<li>Weather patterns, rainfall graphs on every city.</li>
<li>Popularity pattern, interest rate graphs on each and every place</li>
<li>The size of the circle in this map represents the number of places covered in that city</li>
<li>Go to your city and find analytics there. Also, each place get its own graphs</li>
</ul>
</div>
</div>
</div>
</div>
</body>
</html>
CSS:
Navbar:
html, body{height: 100%;min-height:100%;}
header .navbar {
padding-left: 0px;
padding-right: 0px;
padding-top:30px;
transition: all .5s ease-out;
}
header .navbar-brand {
background-repeat: no-repeat;
background-position: 15px 0;
height: auto;
}
header .navbar-default {
background-color: transparent;
border:none !important;
}
header .navbar-default .navbar-nav li {
color: white;
font-size: 22px;
padding: 5px 8px;
font-weight: 700;
}
header .navbar-default .navbar-nav a {
color: white;
font-size: 14px;
padding: 5px 8px;
border-radius: 20px;
}
header .navbar-default .navbar-nav a:active {
color: white;
font-size: 14px;
padding: 5px 8px;
border-radius: 20px;
}
/** Navbar Brand **/
header .navbar-brand {
margin-left:0px;
padding: 0px;
}
/*Navbar toggle*/
header .navbar-toggle {
background-color: #279182;
}
header .navbar-default .navbar-toggle .icon-bar {
background-color: white;
}
#media only screen
and (max-width: 768px) {
header .navbar-collapse.in {
background-color: rgba(0,0,0, .5);
}
}
/*Links Navbar*/
header .navbar-default .navbar-nav a:hover {
color: rgba(0,0,0,0.5);
background-color: white;
border: 2px solid white;
}
header .navbar-default .navbar-nav a:focus{
color: white;
}
header .navbar-default .navbar-nav a:hover {
color: rgba(0,0,0,0.5);
background-color: white;
border: 2px solid white;
}
Main CSS:
.jumbotron {
position: relative;
background-image:url('Images/B.jpg');
width: 100%;
min-height: 100%;
background-repeat: no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
margin-bottom:0px;
}
.jumbotron .container-fluid {
position: relative;
top:105px;
}
.jumbotron h1 {
color: #fff;
font-size: 60px;
font-family: Arial;
font-weight: 700;
opacity:1;
}
.jumbotron p {
font-size: 20px;
color: #fff;
text-align:center;
font-weight: 700;
opacity:1;
padding-top:10px;
}
.jumbotron a {
text-decoration: none;
width:15%;
}
.search-area{
display:block;
padding-top: 100px;
margin-top: 100px;
}
#search-button {
background:transparent;
color:white;
font: 'trebuchet ms', trebuchet;
padding:13px 25px;
border-radius:0 9px 9px 0;
-moz-border-radius:0 9px 9px 0;
-webkit-border-radius:0 9px 9px 0;
-o-border-radius:0 10px 10px 0;
border:2px solid white;
font-weight:bold;
margin-left:-4px;
}
#search-button:hover{
background-color: #5CDEBD;
border: 2px solid #5CDEBD;
}
#text-enter {
background: white;
padding:15px;
border-radius:10px 0 0 10px;
-moz-border-radius:10px 0 0 10px;
-webkit-border-radius:10px 0 0 10px;
-o-border-radius:10px 0 0 10px;
border:0 none;
width:30%;
}
/*Learn*/
.learn-more {
padding: 30px;
background-color: #8715CE;
color: white;
font-weight: 500;
font-size: 17px;
}
.learn-more h3 {
padding-top:30px;
padding-bottom:30px;
font-family: Arial, sans-serif;
font-size: 20px;
font-weight: 800;
}
.learn-more a {
color: white;
padding:10px;
border: 2px solid white;
}
.learn-more a:hover {
background-color:white;
color: rgba(0,0,0, 0.5);
text-decoration:none;
}
/*neighborhood*/
.neighborhood-guides{
background-color: #efefef;
border-bottom: 1px solid #DBDBDB;
min-height: 100%;
box-shadow: none;
}
.neighborhood-guides .row .thumbnail{
box-shadow: none;
background-color:black;
}
.neighborhood-guides .row .thumbnail img:hover {
background-color: #000;
opacity: 0.6;
}
.neighborhood-guides .container{
padding-top:25px;
}
.neighborhood-guides .container .row{
padding-top:30px;
}
.neighborhood-guides h2{
padding-top:50px;
font-weight:800;
color: #393c3d;
font-size: 48px;
}
.neighborhood-guides p{
margin-bottom:13px;
font-size: 20px;
}
.analytics
{
background-color: #15CE68;
min-height: 130%;
color:white;
}
.analytics ul li{
list-style: none;
padding-top: 60px;
font-size: 20px;
font-weight: 700;
}
.analytics h2{
font-weight: 900;
padding-top:6%;
font-size: 48px;
}
.analytics .container p{
padding-top: 10px;
padding-bottom: 10px;
text-align: center;
font-size: 20px;
}
.analytics img{
max-height: 600px;
}
If somebody could help me with this, I would be really grateful, this has been burdening me for a week now.
There are a couple of things that you might find helpful
Remove the second jQuery link. You are already getting jQuery from the Google CDN
Remove the min-height for your images, or use percentages instead of a fixed pixel value
Always better to use percentages than fixed pixel length for the overall layout styles for your website
Don't mix up with both percentage and pixel values for the same element, unless it is unavoidable
Related
My bootstrap rows are not stacking on top of each other in mobile view. I have a row of 3 cols and a row of 4 cols. The rows that aren't collapsing are the .about-content row in the #about section and 4 col row is in the #member section. Any help would be appreciated, Thanks! Here's the website: https://alex-carver.github.io/Smart-Carnival/
/*element style--------*/
section{
margin-top: 100px;
margin-bottom: 100px;
width: 100%;
}
hr{
width: 100%;
margin-left: auto;
margin-right: auto;
background-color: #c1282d;
height: 4px;
}
.hr-2{
width: 100%;
margin-left: auto;
margin-right: auto;
background-color: #fff;
height: 4px;
}
h1, h2{
font-family: 'chunkfiveregular' , sans-serif;
}
h2{
font-size: 45px;
color: #020304;
}
p{
font-family:'proxima_novasemibold' , sans-serif;
}
/*---nav styles----------*/
nav, .navbar .navbar-default{
margin-bottom: 0!important;
height: 80px;
}
.navbar-default {
background-color: #fff;
border-color: transparent;
position: absolute;
left: 0px;
top: 0px;
width: 100%;
height: 80px;
z-index: 4;
opacity: .9;
}
.navbar-right {
margin-right: 20px;
padding-top: 25px;
background:transparent!important;
}
.navbar-default .navbar-brand {
color:#c1282d;
}
.navbar-brand .logo{
float: left;
height: 60px;
padding-bottom: 10px;
}
.navbar-default .navbar-nav>li>a {
color:#c1282d;
font-size: 22px;
background:#fff;
font-family: 'proxima_novasemibold', sans-serif;
font-weight: 400;
}
.navbar-default .navbar-nav>.open>a, .navbar-default .navbar-nav>.open>a:focus, .navbar-default .navbar-nav>.open>a:hover {
color: #fff;
background-color: #c1282d;
}
.dropdown-menu {
position: absolute;
top: 100%;
left: 0;
z-index: 1000;
display: none;
float: left;
min-width: 160px;
padding: 5px 0;
margin: 2px 0 0;
font-size: 14px;
text-align: left;
list-style: none;
background-color: #c1282d;
-webkit-background-clip: padding-box;
background-clip: padding-box;
border: 1px solid #ccc;
border: 1px solid rgba(0,0,0,.15);
border-radius: 4px;
-webkit-box-shadow: 0 6px 12px rgba(0,0,0,.175);
box-shadow: 0 6px 12px rgba(0,0,0,.175);
color:#fff;
}
.dropdown-menu>li>a{
color: #fff;
font-size: 15px;
}
.navbar-right{
margin-right: 20px;
}
/*-------header styles-------*/
header{
width:100%;
height: 710px;
background:url(../img/header2.png);
background-position: center;
background-repeat: no-repeat;
margin:0;
padding: 0;
}
.jumbotron{
background: transparent;
margin-top: 45px;
color:#fff;
width:100%;
}
.header-text-color{
color: #c1282d;
font-size: 90px;
}
.jumbotron h1{
margin-bottom: 25px;
font-size: 80px;
letter-spacing: 3px;
font-family: 'chunkfiveregular' , sans-serif!important;
}
.jumbotron p {
margin-bottom: 25px;
font-size: 30px;
font-family: 'proxima_novasemibold' , sans-serif;
}
.btn-primary{
background:#c1282d;
color:#fff;
border:none;
box-shadow: 3px 5px 5px rgba(0,0,0,0.5);
margin-right: 20px;
font-family: 'proxima_novathin' , sans-serif;
padding:15px;
}
.btn-primary:hover{
background:#fff;
color: #c1282d;
-webkit-transition: .5s ease-in-out;
transition: .5s ease-in-out;
}
.photos-btn{
background:#828383;
color: #fff;
}
.social-icons {
margin-left: 20px;
margin-top: 5px;
}
.social-icons a{
color: #fff;
}
.social-icons a:hover{
color: #c1282d;
-webkit-transition: .5s ease-in-out;
transition: .5s ease-in-out;
}
i {
margin-right: 5px;
}
/*-------------About Section----------*/
.about-text-color{
color:#c1282d;
font-size: 50px;
}
.about-content{
height: 400px;
text-align: center;
padding:20px;
font-size: 20px;
font-family: 'proxima_novasemibold' , sans-serif;
}
.about-text{
padding:50px;
font-size: 30px;
background: #f2f2f2;
border-radius: 10px;
margin-top: 20px;
color: #020304;
}
/*-------Team Section Styles---------*/
#team{
height: 520px;
border-top: 1px solid #828383;
}
.member-heading{
margin-top: 40px;
}
.member-text-color{
color: #c1282d;
font-size: 50px;
}
.member-wrapper{
background:#fff;
border-radius: 10px;
padding:20px;
box-shadow: 6px 5px 5px rgba(0,0,0,0.5);
margin-left: auto;
margin-right: auto;
}
.member-content{
background:#c1282d;
text-align: center;
padding:20px;
color: #020304;
font-family: 'proxima_novasemibold' , sans-serif;
margin-top:20px;
}
/*----------Footer Styles------------*/
footer{
width: 100%;
text-align: center;
margin:0;
}
.footer-logo{
height: 100px;
width: 300px;
text-align: center;
}
/*----------media queries----------*/
#media (max-width: 767px){
.navbar-nav .open .dropdown-menu {
position: static;
float: none;
width: 100%;
margin-top: 0;
background-color:#c1282d;
border: 0;
-webkit-box-shadow: none;
box-shadow: none;
}
.navbar-default .navbar-nav .open .dropdown-menu>li>a {
color: #020304;
}
.navbar-default .navbar-nav>li>a {
color: #c1282d;
font-size: 22px;
background: #fff;
font-family: 'Roboto', sans-serif;
font-weight: 400;
border:1px, solid #000;
}
.navbar-default .navbar-nav>li>a:focus, .navbar-default .navbar-nav>li>a:hover {
color: #020304;
background-color: #fff;
}
}
/* ----------- iPhone 6, 6S, 7 and 8 ----------- */
/* Portrait and Landscape */
#media only screen
and (min-device-width: 375px)
and (max-device-width: 667px)
and (-webkit-min-device-pixel-ratio: 2) {
.navbar-brand {
float: left;
height: 50px;
padding: 15px 30px;
font-size: 30px;
line-height: 20px;
font-weight: 400;
font-family: 'Roboto', sans-serif;
}
.navbar-default .navbar-toggle {
border-color: #c1282d;
}
.navbar-default .navbar-toggle .icon-bar {
background-color: #c1282d;
}
header{
width:100%;
height: 670px;
background: linear-gradient(rgba(0, 0, 0, .5), rgba(0, 0, 0, .5)), url("../img/header2.png") no-repeat center;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
margin:0;
padding: 0;
}
.jumbotron{
background: transparent;
margin-top: 120px;
color:#fff;
padding-bottom: 0px;
margin-bottom: 0px;
}
.social-icons-small a{
color: #fff;
}
.social-icons-small a:hover{
color: #c1282d;
-webkit-transition: .5s ease-in-out;
transition: .5s ease-in-out;
}
#team{
height: 800px;
border-top: 1px solid #828383;
}
.jumbotron h1{
margin-bottom: 20px;
font-size: 40px;
letter-spacing: 3px;
font-family: 'chunkfiveregular' , sans-serif!important;
}
.header-text-color{
color: #c1282d;
font-size: 40px;
}
/*-------------About Section----------*/
h2{
font-size: 40px;
color: #020304;
}
.about-text-color{
color:#c1282d;
font-size: 40px;
}
.about-content{
height: 400px;
padding:20px;
font-size: 20px;
font-family: 'proxima_novasemibold' , sans-serif;
}
.about-text{
padding:50px;
font-size: 20px;
background: #f2f2f2;
border-radius: 10px;
margin-top: 20px;
color: #020304;
text-align: left;
}
/*-------Team Section Styles---------*/
#team{
width: 100%;
border-top: 1px solid #828383;
height: 400px;
}
.member-heading{
margin-top: 40px;
}
.member-text-color{
color: #c1282d;
font-size: 40px;
}
.member-wrapper{
background:#fff;
border-radius: 10px;
padding:20px;
box-shadow: 6px 5px 5px rgba(0,0,0,0.5);
width: 100%;
}
.member-content{
background:#c1282d;
text-align: center;
padding:0px;
color: #020304;
font-family: 'proxima_novasemibold' , sans-serif;
margin-top:20px;
font-size: 15px;
}
.photos-btn{
background:#828383;
color: #fff;
}
}
<!DOCTYPE html>
<html lang="eng">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<head>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="./css/custom.css">
<title>Smart Carnival</title>
</head>
<body>
<nav class="navbar navbar-default">
<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="#myNavbar" 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="index.html"><img class="logo img-responsive" src="./img/logo.png"></a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li>Find My Photos</li>
<li class="dropdown">
About Us <span class="caret"></span>
<ul class="dropdown-menu">
<li>Why Smart Carnival</li>
<li>The Team</li>
</ul>
</li>
<li class="dropdown">
Clients <span class="caret"></span>
<ul class="dropdown-menu">
<li>Products</li>
<li>Value Proposition</li>
<li>Pricing</li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<header>
<div class="container">
<div class="jumbotron">
<h1><span class="header-text-color">S</span>mart <span class="header-text-color">C</span>arnival</h1>
<p>Modernizing and Amplifying the Attractions<br>and Amusements Industry.</p>
<p class="contact-button"><a class="btn btn-primary btn-lg" href="#" role="button">Contact Us</a><span><a class="photos-btn btn btn-primary btn-lg" href="#" role="button">Find My Photos</a></span></p>
</div>
</div>
</header>
<section id="about">
<div class="container">
<div class="row">
<div class="col-xs-12 text-center">
<h2>Why<span class="about-text-color"> Smart Carnival</span></h2>
<hr>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-xs-12 text-center">
<p class="about-text">
Smart Carnival’s mission is to modernize the amusement, carnival and inflatables industries with hardware and software that enhances the <br>carnival-goer’s experience and enhances revenue for its customers.
</p>
</div>
</div>
<div class="row about-content">
<div class="col-xs-4">
<img class="img-responsive" src="./img/camera.png">
<p class="text-content" >Smart Carnival’s camera is waterproof and has a super hydrophobic lens, so water will never ruin your photo. </p>
</div>
<div class="col-xs-4">
<img class="img-responsive" src="./img/photos.png">
<p class="text-contentt">Photos and slow motion videos can be edited, clipped, filtered downloaded straight to your phone or shared on social media! No other company offers as seamless a photo experience.</p>
</div>
<div class="col-xs-4">
<img class="img-responsive" src="./img/battery.png">
<p class="text-content">With an 8 hour battery life, Smart Carnival captures the special and fun moments all day long without needing to be recharged or replaced.</p>
</div>
</div>
</div>
</section>
<section id="team">
<div class="container">
<div class="row">
<div class="col-xs-12 text-center">
<h2 class="member-heading">The<span class="member-text-color"> Smart Carnival </span>Team</h2>
</div>
</div>
</div>
<div class="container-fluid">
<div class="row member-content">
<div class="col-xs-3">
<div class="member-wrapper">
<img class="img-responsive" src="./img/member1.png">
<p class="text-content" >Jesse Ou<br>
Founder & CEO</p><br>
<p class="text-content">Lead Security Engineer,<br>Salesforce.com</p>
</div>
</div>
<div class="col-xs-3">
<div class="member-wrapper">
<img class="img-responsive" src="./img/member2.png">
<p class="text-content" >Larry Trowell<br>
CTO</p><br>
<p class="text-content">Principal Consaltunt,<br><b>Synopsys</b></p>
</div>
</div>
<div class="col-xs-3">
<div class="member-wrapper">
<img class="img-responsive" src="./img/member3.png">
<p class="text-content" >Josh Johns<br>
Co Founder & Sales</p><br>
<p class="text-content">Owner<br><b>J. Johns Studios</b></p>
</div>
</div>
<div class="col-xs-3">
<div class="member-wrapper">
<img class="img-responsive" src="./img/member4.png">
<p class="text-content" >Sara Abernethy<br>
Director of Business Development</p><br>
<p class="text-content"><b>Senior Strategist,<br>Idea Couture</b></p>
</div>
</div>
</div>
</div>
</section>
<!-- ==========================
FOOTER SECTION
=========================== -->
<footer>
<div class="container-fluid">
<div class="row">
<div class="col-xs-12 text-center">
<img class="footer-logo" src="./img/logo.png">
<p>All Rights Reserved. © 2018 Smart Carnival</p>
</div>
</div>
</div>
</footer>
<!-- ==========================
FOOTER SECTION END
=========================== -->
<script
src="https://code.jquery.com/jquery-3.2.1.min.js"
integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>
</html>
https://alex-carver.github.io/Smart-Carnival/
They aren't collapsing because you specified them to be uncollapsable.
col-xs-* means at the smallest screen.
So, 3x col-xs-4 is 12 which is a full row.
I'm trying to remove the white space at the bottom and right side of the website. On the right side it seems that it's caused by the black navbar but I don't have a clue how to fix it.
/* Navbar */
.navbar-default {
background-color: transparent;
border-color: transparent;
}
.navbar-fixed-top .navbar-brand,
.navbar-fixed-top .navbar-nav>li>a {
color: #fff;
}
.navbar-default .navbar-toggle {
border-color: #000;
}
.navbar-default .navbar-toggle:focus,
.navbar-default .navbar-toggle:hover {
background-color: #fff;
}
.navbar-default .navbar-toggle,
.navbar-default .navbar-toggle {
background-color: transparent;
}
.navbar-fixed-top.scrolled {
background: black;
}
.navbar-toggle {
position: relative;
float: right;
padding: 9px 10px;
margin-top: 8px;
margin-right: 15px;
margin-bottom: 8px;
background-color: transparent;
background-image: none;
border: 1px solid transparent;
border-radius: 4px;
}
.non-underline {
text-decoration: none;
}
.navbar-fixed-top .navbar-brand,
.navbar-fixed-top .navbar-nav>li>a {
color: #fff!important;
}
.navbar-fixed-top .navbar-brand,
.navbar-fixed-top .navbar-nav>li>a:hover {
text-decoration: underline;
background-color: transparent;
color: #fff!important;
}
.navbar-nav>li>a:focus,
.navbar-nav>li>a:active,
.navbar-nav>li>a.active {
background-color: transparent;
color: #fff!important;
}
#logo-img {
width: 70%;
}
/* End Navbar */
/* Jumbotron */
#first {
padding: 0;
}
.jumbotron-image {
max-width: 100%;
height: auto;
}
h2>a {
color: #565656;
}
a:hover {
text-decoration: none;
}
#h1first {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: #FFF;
font-family: 'Philosopher', sans-serif;
}
/* End Jumbotron */
/* About */
#abouth2 {
visibility: hidden;
}
#about-section {
padding-top: 8%;
padding-bottom: 10%;
}
.fadeInBlock {
opacity: 0;
}
#p-about {
font-size: 180%;
font-family: 'Raleway', sans-serif;
}
#img-about {
padding: 0;
}
/*End About*/
/*Portfolio*/
#portfolio-section {
background-color: ;
background: #B5927E;
background: -webkit-linear-gradient(left top, #B5927E, #6C5461);
background: -o-linear-gradient(bottom right, #B5927E, #6C5461);
background: -moz-linear-gradient(bottom right, #B5927E, #6C5461);
background: linear-gradient(to bottom right, #B5927E, #6C5461);
padding-top: 2%;
padding-bottom: 10%;
}
.headline {
font-family: 'Merriweather', serif;
color: #484A4A;
}
.headline.fadeInBlock>a {
color: #484A4A;
}
.headline.fadeInBlock>a:hover {
color: #484A4A;
}
#portfolio-id {
margin-bottom: 2%;
}
/*End Portfolio*/
/*Contact*/
#contact-section {
background-color: #4D3C4F;
padding-top: 2%;
padding-bottom: 5%;
}
.social-icons {
color: #b7b7b7;
}
.fa {
font-size: 40px;
padding: 20px;
transition: 0.5s;
}
.fa-facebook-official {
vertical-align: middle;
margin: auto;
}
.fa-twitter {
vertical-align: middle;
margin: auto;
}
.fa-free-code-camp {
vertical-align: middle;
margin: auto;
}
.fa-envelope {
vertical-align: middle;
margin: auto;
}
#facebook:hover {
color: #3b5998;
}
#twitter:hover {
color: #00aced;
}
#fcc:hover {
color: #006401;
}
#email:hover {
color: #92b8f4;
}
ul {
list-style: none;
}
/*End Contact*/
/*Footer*/
footer {
background-color: #382F4A;
}
#copy {
color: #FFFFFF;
}
/*End Footer*/
<!--Navbar-->
<div class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand"><img src="http://i64.tinypic.com/27wy82r.png" id="logo-img"></a>
<a class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav pull-right">
<li>Home</li>
<li>About</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</div>
</div>
</div>
<!--End Navbar-->
<!--Jumbotron-->
<div class="row">
<div class="col-md-12">
<div class="jumbotron" id="first" href="#home">
<img class="jumbotron-image" src="http://netdna.webdesignerdepot.com/uploads/2014/07/featured36.jpg">
<h1 class="text-center fadeInPage" id="h1first">
Welcome to Cosmos<br> web design
</h1>
</div>
</div>
</div>
<!--End Jumbotron-->
<!--About-->
<div class="container" id="about-section">
<div class="row">
<div class="col-md-6">
<h2 class="text-center" id="abouth2"><a name="about">About</a></h2>
<p class="fadeInBlock" id="p-about">Cosmos Web Design was created by George Kech. I provide web solutions that require HTML, CSS, JavaScript and JQuery. I focus on serving the needs of each customer individually with complete satisfaction as my goal.</p>
</div>
<div class="col-md-6">
<img src="https://www.topechelon.com/wp-content/uploads/2016/07/devices-web-design.png" alt="web design" class="img-responsive">
</div>
</div>
</div>
<!--End About-->
<!--Portfolio-->
<div class="container-inner" id="portfolio-section">
<h2 class="text-center headline fadeInBlock" id="portfolio-id"><a name="portfolio">Portfolio</a> is coming soon...</h2>
<div class="container">
<div class="row text-center">
<div class="col-md-4">
<img src="https://lh4.googleusercontent.com/-fj6pace2cv0/U9Jt75Kq8PI/AAAAAAAARtE/ttg-4YuCOfQ/s250/exe_empty_thumbnail.jpg">
</div>
<div class="col-md-4">
<img src="https://lh4.googleusercontent.com/-fj6pace2cv0/U9Jt75Kq8PI/AAAAAAAARtE/ttg-4YuCOfQ/s250/exe_empty_thumbnail.jpg">
</div>
<div class="col-md-4">
<img src="https://lh4.googleusercontent.com/-fj6pace2cv0/U9Jt75Kq8PI/AAAAAAAARtE/ttg-4YuCOfQ/s250/exe_empty_thumbnail.jpg">
</div>
</div>
</div>
</div>
<!--End Portfolio-->
<!--Contact-->
<div class="container-fluid">
<div class="row" id="contact-section">
<div class="col-md-12">
<div class="text-center">
<i class="social-icons fa fa-facebook-official" id="facebook"></i>
<i class="social-icons fa fa-twitter" id="twitter"></i>
<i class="social-icons fa fa-free-code-camp" id="fcc"></i>
<i class="social-icons fa fa-envelope" id="email"></i>
<h3 id="contactMe">
<a name="contact"></a>
</h3>
</div>
</div>
</div>
</div>
<!--End Contact-->
<!--Footer-->
<footer>
<p class="text-center" id="copy">George Kech © 2017</p>
</footer>
And here's the link to the codepen: Codepen
I think it's your top level nesting. You need to wrap the jumbotron into a container div as well. You can make it fluid if you need full width:
<div class="container-fluid">
<div class="row">
...
</div>
Generally speaking, if you look at basic templates provided by boostrap's documentation, they place all body content into a container div.
This is due to the fact that each row has a -15px margin.
It's caused by your Bootstrap:
Every .row has a negative margin left and right, while every .col-* has a padding left and right by the same amount.
We have to get rid of that. But we need it back inside .container classes.
Look here: https://codepen.io/anon/pen/QpOyyo
I added this CSS:
/* Don't add padding to all elements that have classes like "col-md-*" */
[class^="col-md-"],
[class*=" col-md-"] {
padding-right: 0;
padding-left: 0;
}
/* Add back the Bootstrap padding, if inside .container */
.container [class^="col-md-"],
.container [class*=" col-md-"] {
padding-right: 15px;
padding-left: 15px;
}
/* Don't add negative margin for all rows */
.row {
margin-left: 0;
margin-right: 0;
}
/* Add back the Bootstrap margin, if inside .container */
.container .row {
margin-left: -15px;
margin-right: -15px;
}
Update: Add this as well to address the footer issue.
.container-fluid {
padding-right:0px;
padding-left:0px;
}
footer p{
margin:0;
}
its caused by the padding-right on the div .col-md-12. Set it to 0 and its fine.
The white space at the bottom is caused by the #copy in the footer, add margin-bottom: 0 to it.
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.
So when I fully reduce the browser size, I have my website looking like this, which is how I want it to look:
http://oi66.tinypic.com/10x7zw4.jpg
But when I start stretching out the browser, the position of my picture in the center will begin to change and move all the way to the left. I want the picture to stay on the center regardless of whether I stretch out the browser or reduce it. Is there a way I can fix this issue? Been trying to find out how to solve the issue but cannot find any clue. Please help, thank you.
My HTML:
<html>
<head>
<title>Jason H Kang</title>
<link href='https://fonts.googleapis.com/css?family=Source+Sans+Pro' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<link rel="stylesheet" href="style.css">
</head>
<body>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
</div>
<div>
<ul class="nav navbar-nav">
<li>Home</li>
<li>About</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</div>
</div>
</nav>
<div id="span">
<h1 class="text-center">Jason H Kang</h1>
<div class="intro">
<p class="text-center">23 Years Old | Junior Web Developer | NJ</p>
</div>
<div class="hello">
<p class="text-center">
Hello I am Jason Kang. Welcome to my personal website!</br>Please feel free to contact me if you have further inquiries.</p>
</div>
</div>
<div class="image">
<img src="kangjason.jpg" alt="face" class="img-circle">
</div>
<!-- <div class="button">
<button type="button" class="btn btn-success">Contact Me!</button>
</div> -->
<div id="footer">
<p class="copyright">Copyright: Jason Kang 2015</p>
</div>
</body>
</html>
My CSS:
body {
background-color: #F8F8FF;
color: #000000;
}
.navbar {
background: rgba(114, 180, 39, 1)
}
.navbar .brand, .navbar .nav > li > a {
color: #FFFFFF;
margin-left: 14em;
padding-right: 0em;
font-family: Gill Sans;
font-size: 1.0em;
}
.navbar .brand, .navbar .nav > li > a:hover {
color: #000000;
}
#footer {
background:#000000;
width:100%;
height:47px;
position:fixed;
bottom:0px;
left: 0px;
}
.copyright {
padding-top: 19px;
padding-left: 1.3%;
font-family: Arial;
font-size: 0.9em;
color: white;
}
.intro {
padding-left: 0.35%;
font-family: 'Source Sans Pro', sans-serif;
position: relative;
}
.hello {
padding-top: 1.5%;
padding-left: 5%;
font-family: 'Source Sans Pro', sans-serif;
position: relative;
}
.img-circle {
width: 11.0em;
height: 11.0em;
border: 1px solid black;
margin-left: 10em;
margin-top: 1em;
position: relative;
}
To center a block level element, you use margin:auto:
.img-circle {
width: 11.0em;
height: 11.0em;
border: 1px solid black;
margin: auto;
margin-top: 1em;
position: relative;
display:block;
}
JSFiddle Demo
Or, alternatively, you can set the parent to text-align:center;:
.image {
text-align: center;
}
JSFiddle Demo
Change your css for the img-circle class as follows
.img-circle {
width: 11.0em;
height: 11.0em;
margin: 0 auto;
border: 1px solid black;
display: flex;
}
Check my website at 90.231.109.239 please.
I cannot get the font to work for my content area.
The text "Norra Strandv. 10" should be in Courgette but I only get the standard font.
Could somebody please help ?
here is my index.html
<
!DOCTYPE html>
<html>
<head>
<title> Lasses hem </title>
<link rel = "stylesheet" href = "/css/main.css" type = "text/css"/>
</head>
<body>
<div id="page">
<div id="header" class="frame">
<h1> Lasses hem</h1>
</div>
<div id = "menu" class = "frame">
<ul>
<li> <a id="home" href='/index.html'>Home</a> </li>
<li> <a id="away" href='/info.php'>Away</a> </li>
<li> <a id="Temp" href='/temperature.php'>Temp</a> </li>
<li> <a id="Led" href='/controller.php'>Led</a> </li>
</ul>
</ul>
</div>
<div = "content" class ="frame h1">
Norra Strandv. 10
</div>
</div>
</body>
</html>
And here is my css-file
#import url(http://fonts.googleapis.com/css?family=The+Girl+Next+Door);
#import url(http://fonts.googleapis.com/css?family=Courgette);
#import url(http://fonts.googleapis.com/css?family=Pacifico);
#page{
width:700px;
margin: auto;
border:solid 1px #CCC;
border-radius:5px;
background-color:#FFF;
}
.frame {
width: 700px;
margin: 0px;
padding: 0px;
background-color: #FFF;
}
.frame h1{
text-align: center;
font-size: 300%;
}
#header {
background-color: #1DB21A;
color: #FFF;
height: 55px;
font-family: 'Courgette', cursive;
}
#menu {
height: 22px;
font-family: Arial, Helvetica, sans-serifs;
background-color: #000;
color: #FFF;
float: left;
}
#menu ul {
list-style-type:none;
margin: 0px;
padding: 0px 50px;
}
#menu li {
display: inline;
float: left;
}
#menu a {
display: block;
width: 60px;
height: 22px;
text-decoration:none;
background-color: #000;
color: #FFF;
}
#menu a:hover{
background-color: #1DB21A;
color: #FFF;
}
#content {
padding: 40px 50px;
width: 600px;
font-family: 'Courgette', cursive;
font-size: 150%;
}
You forgot the id attribute
<div = "content" class ="frame h1">
Change into
<div id="content" class ="frame h1">
Change
<div = "content" class ="frame h1">
Norra Strandv. 10
</div>
to
<div id= "content" class ="frame h1">
Norra Strandv. 10
</div>
You just typed error.
You miss the id...
just type id before = "content" in indexhtml files ...