I had a quick question about a website I am currently taking from design into code. I am using a simple grid layout with a few fixed-width columns, but for some reason when the browser wraps below 1500 pixels, the columns start wrapping. I'm super confused as to why this is happening as I have a width set on my container and the columns are fixed-width.
Here is a link to the site on my staging server: http://staging.slackrmedia.com/halfpast/
Here is a link to a jsFiddle: http://jsfiddle.net/PaFKW/
please note the "external resources" located in the jsFiddle
Here is the code:
HTML:
<body class="transition">
<div class="container center">
<header class="row">
<div class="col-1-3-fixed">
<nav>
<ul class="inline text-left">
<li>
The Chronique
</li>
<li>
Boutiques
</li>
</ul><!-- .inline .text-left -->
</nav>
</div><!-- .col-1-3-fixed -->
<div class="col-1-3-fixed">
<a href="">
<img src="http://staging.slackrmedia.com/halfpast/images/logo.png" class="img-center transition" alt="HalfPast Logo" />
</a>
</div><!-- .col-1-3-fixed -->
<div class="col-1-3-fixed">
<ul class="inline text-right">
<li>
Login
</li>
<li>
Register
</li>
</ul><!-- .inline .text-right -->
<nav>
<ul class="inline text-right">
<li>
Reviews
</li>
<li>
Features
</li>
</ul><!-- .inline .text-right -->
</nav>
</div><!-- .col-1-3-fixed -->
</header><!-- .row -->
</div><!-- .container .center -->
<div class="row">
<div class="col-1 masthead background-cover">
<div class="container center">
<h1 class="text-center">Use HalfPast to find local luxury watch dealers.</h1>
<h2 class="text-center">Register below or log in here</h2>
<form action="" class="center">
<input type="text" name="name" placeholder="First & Last Name:" />
<input type="email" name="email" placeholder="Email Address:" />
<input type="password" name="password" placeholder="Password:" />
<input type="submit" value="Create your account" class="btn" />
</form>
</div><!-- .container .center -->
</div><!-- .col-1 -->
</div><!-- .row -->
<div class="row how-does-halfpast">
<div class="container center">
<div class="col-1-fixed">
<img src="http://staging.slackrmedia.com/halfpast/images/seperator.png" />
<h1 class="tk-ltc-bodoni-175 text-center">How does HalfPast work?</1>
</div><!-- .col-1-fixed -->
<div class="col-1-2-fixed">
<img src="http://staging.slackrmedia.com/halfpast/images/imac.png" />
</div><!-- .col-1-2-fixed -->
<div class="col-1-2-fixed">
<p><span class="text-red">HalfPast works with brands and retailers to simplify the way you shop for luxury watches</span></p>
<p>Browse through our articles and request "Product Details" to connect with our network of manufacturer authorized dealers.</p>
<p>HalfPast will anonymously submit your request to your local authorized dealer, who will respond with additional information. Our service introduces you to high-quality retailers and allows you to engage with them in a low-pressure environment.</p>
<p>Authenticity is guaranteed.</p>
</div><!-- .col-1-2-fixed -->
</div><!-- .container .center -->
</div><!-- .row -->
<div class="row halfpast-features-services">
<div class="container center">
<div class="col-1-fixed text-center">
<h1 class="tk-ltc-bodoni-175">HalfPast Features & Services</h1>
<h4 class="center">HalfPast partners with brands and retailers to help you find the relevant authorized retailer in your geography</h4>
</div><!-- .col-1-fixed .text-center -->
<div class="col-1-2-fixed">
<div class="row">
<div class="col-1-8">
<p><span class="icon-map-marker text-red"></span></p>
</div><!-- .col-1-8 -->
<div class="col-7-8">
<p><span class="text-red">Find local watch dealers in your area</span></p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sodales rutrum mauris, a porta augue.</p>
</div><!-- .col-7-8 -->
<img src="http://staging.slackrmedia.com/halfpast/images/map.png" alt="Find local watch dealers in your area" class="img-border" />
</div><!-- .row -->
</div><!-- .col-1-2-fixed -->
<div class="col-1-2-fixed">
<div class="row">
<div class="col-1-8">
<p><span class="icon-info text-red"></span></p>
</div><!-- .col-1-8 -->
<div class="col-7-8">
<p><span class="text-red">Get exclusive content about brands</span></p>
<p>HalfPast partners with the leading brands in the luxury watch industry to provide exclusive branded content.</p>
</div><!-- .col-7-8 -->
<img src="http://staging.slackrmedia.com/halfpast/images/chrono-blue.png" alt="Get exclusive content about brands" class="img-border" />
</div><!-- .row -->
</div><!-- .col-1-2-fixed -->
</div><!-- .container .center -->
</div><!-- .row -->
<div class="row sign-up">
<div class="container center">
<div class="col-1-fixed text-center">
<h5 style="display: inline;">Sign up for a free HalfPast account — today</h5>
<a class="btn">Create your account</a>
</div><!-- .col-1-fixed -->
</div><!-- .container .center -->
</div><!-- .row -->
<footer class="row">
<div class="container center">
<div class="col-1-3-fixed footer-nav">
<p>Navigation</p>
<div class="row">
<div class="col-1-2">
<ul>
<li>
The Chronique
</li>
<li>
Reviews
</li>
<li>
Contact
</li>
</ul>
</div><!-- .col-1-2 -->
<div class="col-1-2">
<ul>
<li>
Boutiques
</li>
<li>
Features
</li>
<li>
Register/Login
</li>
</ul>
</div><!-- .col-1-2 -->
</div><!-- .row -->
</div><!-- .col-1-3-fixed -->
<div class="col-1-3-fixed"> </div>
<div class="col-1-3-fixed">
<p>Sign up for our newsletter</p>
<form action="">
<input type="email" placeholder="your email address" required /><span class="form_hint">Proper format "name#something.com"</span>
<input type="submit" value="SIGN UP" class="btn small" />
</form>
</div><!-- .col-1-3-fixed -->
<div class="col-1-fixed">
<img src="http://staging.slackrmedia.com/halfpast/images/logo-footer.png" class="img-center transition" />
</div><!-- .col-1-fixed -->
</div><!-- .container .center -->
</footer><!-- .row -->
CSS:
/* General
============================= */
html, html a {
padding-top: 20px;
text-shadow: 1px 1px 1px rgba(0,0,0,0.004);
font-smooth: always;
-webkit-font-smoothing: antialiased;
}
body { font: 1em/1.6 "myriad-pro", Arial, Helvetica, sans-serif; }
.left { float: left; }
.right { float: right; }
.center { margin: 0 auto; }
.img-center {
display: block;
margin: 0 auto;
}
.img-border { border: 5px solid #fff; }
/* Typography
============================= */
h1 { font-size: 2.2em; }
h2 { font-size: 2em; }
h3 { font-size: 1.8em; }
h4 { font-size: 1.6em; }
h5 { font-size: 1.4em; }
h6 { font-size: 12em; }
a {
color: #434343;
text-decoration: none;
}
a:hover { color: #000; }
.text-right { text-align: right; }
.text-left { text-align: left; }
.text-center { text-align: center; }
.text-red {
color: #c60202;
font-size: 1.313em;
}
/* Lists
============================= */
ul { list-style: none; }
ul li,
ol li { line-height: 2; }
ul.inline li,
ol.inline li { display: inline; }
ul.inline li:last-child,
ol.inline li:last-child { margin-right: 0px; }
input { -webkit-appearance: none; }
a:active, a:active *,
a:focus, a:focus *,
input:focus,
select:focus,
textarea:focus,
button:focus {
outline: none;
-moz-outline-style: none;
}
/* Effects
============================= */
.box-shadow {
-webkit-box-shadow: 0px 0px 3px 3px rgba(150, 150, 150, 0.3);
box-shadow: 0px 0px 3px 3px rgba(150, 150, 150, 0.3);
}
.border-radius {
-webkit-border-radius: 3px;
border-radius: 3px;
}
.transition,
a:hover {
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-ms-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
transition: all 0.2s linear;
}
.background-cover {
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
/* Selection
============================= */
*::selection {
background: #d31d1c;
color: #fff;
}
*::-moz-selection {
background: #d31d1c;
color: #fff;
}
*::-webkit-selection {
background: #d31d1c;
color: #fff;
}
/* Container (w/Micro-Clearfix)
============================= */
.container { max-width: 1080px; }
.container:before,
.container:after {
content: " ";
display: table;
}
.container:after { clear: both; }
.container {
width: 80%;
*zoom: 1;
}
/* Grid
============================= */
[class*='col-'] {
float: none;
width: 100%;
}
*, *:after, *:before {
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
.row { margin-left: -20px; }
.row:after {
clear: both;
content: "";
display: table;
}
/*
* Grid Gutters
*/
[class*='col-'] {
float: left;
padding-left: 20px;
}
.row-pad { padding: 20px 0 20px 20px; }
.row-pad [class*='col-']:last-of-type { padding-right: 20px; }
/*
* Fluid Grid Columns
*/
.col-1 { width: 100%; }
.col-7-8 { width: 75%; }
.col-2-3 { width: 66.66%; }
.col-1-2 { width: 50%; }
.col-1-3 { width: 33.33%; }
.col-1-4 { width: 25%; }
.col-1-8 { width: 12.5%; }
/*
* Fixed Grid Columns
*/
.col-1-fixed { width: 1080px; }
.col-7-8-fixed { width: 945px; }
.col-2-3-fixed { width: 720px; }
.col-1-2-fixed { width: 540px; }
.col-1-3-fixed { width: 360px; }
.col-1-4-fixed { width: 270px; }
.col-1-8-fixed { width: 135px; }
/* Header */
header img:hover { opacity: 0.6; }
header ul.inline li,
header nav ul.inline li { margin-right: 20px; }
header nav ul.inline li:last-of-type,
header ul.inline li:last-of-type { margin-right: 0px; }
header nav { margin-top: 90px; }
header.row .col-1-3-fixed:last-of-type nav { margin-top: 42px; }
header nav ul.inline li { margin-right: 80px; }
/* Masthead */
.masthead {
background: #000 url('../images/header.png') no-repeat center center;
color: #fff;
font-weight: 100;
min-height: 555px;
}
.masthead .container { margin-top: 90px; }
.masthead a { color: #c60202; }
.masthead a:hover { text-decoration: underline; }
.masthead h1,
.masthead h2 { font-weight: 100; }
.masthead h1 {
font-size: 2.625em;
margin-bottom: 5px;
}
.masthead h2 {
font-size: 2em;
margin-top: 10px;
}
.masthead form {
background: #fff;
margin-top: 60px;
padding: 20px;
width: 930px;
}
.masthead form input { height: 40px; }
.masthead form input[type="submit"].btn {
font-size: 1.25em;
line-height: 20px;
}
.masthead form ::-webkit-input-placeholder { color: #000; }
.masthead form :-moz-placeholder { color: #000; }
.masthead form ::-moz-placeholder { color: #000; }
.masthead form :-ms-input-placeholder { color: #000; }
/* Body */
.how-does-halfpast { margin-bottom: -65px; }
.how-does-halfpast .col-1-fixed img { padding-top: 40px; }
.halfpast-features-services {
background: #f4f4f4;
border-top: 1px solid #d9d9d9;
margin: 1px 0;
padding-top: 60px;
}
.halfpast-features-services h4 {
font-size: 1.313em;
font-weight: 100;
padding-bottom: 30px;
width: 600px;
}
.halfpast-features-services [class*='icon-'] {
font-size: 4em;
margin-left: 13px;
}
.halfpast-features-services img { margin: 0 0 -8px 20px; }
.halfpast-features-services img.img-border { border-bottom: 1px solid #fff; }
.sign-up {
border-top: 1px solid #d9d9d9;
padding: 100px 0;
}
.sign-up a.btn { margin: 0 0 -6px 30px; }
/* Footer */
footer {
background: #000;
color: #fff;
padding: 15px 0 30px;
}
footer a { color: #fff; }
footer a:hover { color: #ccc; }
footer ul { padding-left: 0px; }
footer ul li a { font-size: 0.875em; }
footer .col-1-3-fixed.footer-nav p { margin-bottom: 0px; }
footer form input { margin-right: 5px; }
footer .col-1-fixed { padding-top: 45px; }
footer .col-1-fixed img { opacity: 0.4; }
footer .col-1-fixed img:hover { opacity: 0.7; }
I would really appreciate any and all help on this. It's such a small, simple thing, but it's driving me absolutely crazy. Thanks anybody who helps me tackle this.
The .container div that holds your columns is set to 80% of the width of the page, so fixed width elements inside it will wrap when their parent container's computed width becomes too narrow. Max-width doesn't do anything if the computed width is smaller than 1080 - define the width of the .container as fixed, so that on smaller views you can just do a horizontal scroll.
Also, I personally browse at a browser width of 1280, so I would consider doing a little bit of refactoring to lessen whitespace, as in my view the top link bar also wraps around and breaks.
Related
I am creating a portfolio website from scratch. I am stuck on the footer part. The footer I have created for other pages works as intended but for the Resume page it stays in the middle of the page rather than at the bottom of the page. I have already tried to search for similar problem and try their solutions but sadly it didn't work for me.
Here is my HTML code
<!doctype html>
<html>
<head>
<title> Game Programmer </title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="reset-fonts-grids.css"/>
<link rel="stylesheet" type="text/css" href="resume.css"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="main.js"></script>
</head>
<body>
<ul id="nav">
<li>Home</li>
<li>Projects</li>
<li><a class="active" href="resume.html">Resume</a></li>
<li>Contact</li>
</ul>
<div id = "container">
<div id="doc2" class="yui-t7">
<div id="inner">
<div id="hd">
<div class="yui-gc">
<div class="yui-u first">
<h1>a</h1>
<h2>Game Programmer</h2>
</div>
<div class="yui-u">
<div class="contact-info">
<h3><a id="pdf" href="#">Download PDF</a></h3>
<h3>1#gmail.com</h3>
</div><!--// .contact-info -->
</div>
</div><!--// .yui-gc -->
</div><!--// hd -->
<div id="bd">
<div id="yui-main">
<div class="yui-b">
<div class="yui-gf">
<div class="yui-u first">
<h2>Profile</h2>
</div>
<div class="yui-u">
<p class="enlarge">
Game Programmer with 2+ years of experience with multiple game engine and a shipped AA title for PC and Consoles. Possesses a Masters in Game Programming.
</p>
</div>
</div><!--// .yui-gf -->
<div class="yui-gf">
<div class="yui-u first">
<h2>Skills</h2>
</div>
<div class="yui-u">
<div class="talent">
<h2>Time Management</h2>
</div>
<div class="talent">
<h2>Strong Work Ethics</h2>
</div>
<div class="talent">
<h2>Team Player</h2>
</div>
</div>
</div><!--// .yui-gf -->
<div class="yui-gf">
<div class="yui-u first">
<h2>Technical</h2>
</div>
<div class="yui-u">
<ul class="talent">
<li>C</li>
<li class="last">C++</li>
</ul>
<ul class="talent">
<li>C#</li>
<li class="last">Unity</li>
</ul>
<ul class="talent">
<li>Unreal Engine 4</li>
<li class="last">SVN / Perforce</li>
</ul>
</div>
</div><!--// .yui-gf-->
<div class="yui-gf">
<div class="yui-u first">
<h2>Experience</h2>
</div><!--// .yui-u -->
<div class="yui-u">
<div class="job">
<h2>a</h2>
<h3>b</h3>
<h4>c</h4>
<p>d</p>
<p>•e</p>
</div>
<div class="job">
<h2>a</h2>
<h3>b</h3>
<h4>c</h4>
<p>d</p>
</div>
<div class="job last">
<h2>a</h2>
<h3>b</h3>
<h4>c</h4>
<p>d</p>
<p>e</p>
</div>
</div><!--// .yui-u -->
</div><!--// .yui-gf -->
<div class="yui-gf last">
<div class="yui-u first">
<h2>Education</h2>
</div>
<div class="yui-u">
<h2>a</h2>
<h3>b</h3>
</div>
<div class="yui-u">
<h2>a</h2>
<h3>b</h3>
</div>
</div><!--// .yui-gf -->
</div><!--// .yui-b -->
</div><!--// yui-main -->
</div><!--// bd -->
</div><!-- // inner -->
</div><!--// doc -->
<!--Footer-->
<footer class="social-footer">
<div class="social-footer-icons">
<ul class="menu-simple">
<li><i class="fa fa-facebook" aria-hidden="true"></i></li>
<li><i class="fa fa-instagram" aria-hidden="true"></i></li>
<li><i class="fa fa-pinterest-p" aria-hidden="true"></i></li>
<li><i class="fa fa-twitter" aria-hidden="true"></i></li>
</ul>
</div>
</footer>
</div>
</body>
</html>
Here is CSS code
body {
background: url(Images/px_by_Gre3g.png);
font: 16px Helvetica, Arial, Sans-Serif; color: #636363;
}
/* //-- yui-grids style overrides -- */
#inner { padding: 10px 80px; margin: 80px auto; background: #f5f5f5; border: solid #666; border-width: 8px 0 2px 0; }
.yui-gf { margin-bottom: 2em; padding-bottom: 2em; border-bottom: 1px solid #ccc; }
/* //-- header, body, footer -- */
#hd { margin: 2.5em 0 3em 0; padding-bottom: 1.5em; border-bottom: 1px solid #ccc }
#hd h2 { text-transform: uppercase; letter-spacing: 2px; }
#bd, #ft { margin-bottom: 2em; }
/* //-- footer -- */
#ft { padding: 1em 0 5em 0; font-size: 92%; border-top: 1px solid #ccc; text-align: center; }
#ft p { margin-bottom: 0; text-align: centezr; }
/* //-- core typography and style -- */
#hd h1 { font-size: 48px; text-transform: uppercase; letter-spacing: 3px; margin-bottom: 10px;}
h2 { font-size: 152% }
h3, h4 { font-size: 122%; }
h1, h2, h3, h4 { color: #333; }
p { font-size: 100%; line-height: 18px; padding-right: 3em; }
a { color: #990003 }
a:hover { text-decoration: none; }
strong { font-weight: bold; }
li { line-height: 24px; border-bottom: 1px solid #ccc; }
p.enlarge { font-size: 144%; padding-right: 6.5em; line-height: 24px; }
p.enlarge span { color: #000 }
.contact-info { margin-top: 7px; }
.first h2 { font-style: italic; }
.last { border-bottom: 0 }
/* //-- section styles -- */
a#pdf { display: block; float: left; background: #666; color: white; padding: 6px 50px 6px 12px; margin-bottom: 6px; text-decoration: none; }
a#pdf:hover { background: #222; }
.job { position: relative; margin-bottom: 1em; padding-bottom: 1em; border-bottom: 1px solid #ccc; }
.job h4 { position: absolute; top: 0.35em; right: 0 }
.job h3 {margin-top : 5px; margin-bottom : 10px;}
.last { border: none; }
.skills-list ul { margin: 0; }
.skills-list li { margin: 3px 0; padding: 3px 0; }
.skills-list li span { font-size: 152%; display: block; margin-bottom: -2px; padding: 0 }
.talent { width: 32%; float: left }
.talent h2 { margin-bottom: 6px; }
#srt-ttab { margin-bottom: 100px; text-align: center; }
#srt-ttab img.last { margin-top: 20px }
/* --// override to force 1/8th width grids -- */
.yui-gf .yui-u{width:80.2%; padding-bottom: 20px;}
.yui-gf div.first{width:12.3%;}
ul#nav{
width: 1300px; list-style: none; overflow: hidden; margin: 80px 18em 0 auto;
}
#nav li {
width: 100px; height: 35px; float: left; padding: 13px 0 0 0;
background: url(Images/nav-bg.png);
font-weight: bold; text-align: center; text-transform: uppercase;
border-radius: 4px;
}
#nav li:nth-child(1) {
margin: 0 10px 0 0;
}
#nav li:nth-child(2) {
margin: 0 10px 0 0;
}
#nav li:nth-child(3) {
margin: 0 10px 0 0;
}
ul#nav li:nth-child(4) {
margin: 0 10px 0 0;
}
ul#nav li a.active {
color:cadetblue;
text-decoration: underline ;
}
ul#nav li a {
color: #616369; text-decoration: none;
}
ul#nav li a:hover {
color: #a12121;
}
#container {
width: 1300px;
margin: 0 250px;
}
.menu-simple {
margin:auto;
list-style:none;
display: inline-block;
}
.menu-simple li {
font-size:20px;
cursor:pointer;
width:100px;
margin:0;
padding:12px 0;
float:left;
display:block;
height:40px;
}
footer {
text-align: center;
position: absolute;
bottom: 0;
padding:10px 0 auto 0;
width: 100%;
}
.social-footer {
bottom:20px;
background: #8a8a8a;
height:50px;
position: absolute;
bottom: 0;
width: inherit;
}
.social-footer .social-footer-icons .fa {
font-size: 30px;
color: #fefefe;
}
.social-footer .social-footer-icons .fa:hover {
color: #4a4a4a;
transition: color 0.15s ease-in;
}
I am not a web designer so don't mind messy code.
Thanks in advance.
I think you need to change the position of both footer and .social-footer to 'relative' instead of 'absolute'
footer {
text-align: center;
//position: absolute;
position: relative;
bottom: 0;
padding:10px 0 auto 0;
width: 100%;
}
.social-footer {
bottom:20px;
background: #8a8a8a;
height:50px;
position: relative;
//position: absolute;
bottom: 0;
width: inherit;
}
This Stackoverflow thread seems to explain the difference between the two and when to use both.
Position Relative vs Absolute?
change your social-footer class like this :
.social-footer {
background: #8a8a8a;
height:50px;
position: relative;
left: 0;
bottom: 0;
width: inherit;
}
body {
background: url(Images/px_by_Gre3g.png);
font: 16px Helvetica, Arial, Sans-Serif; color: #636363;
}
/* //-- yui-grids style overrides -- */
#inner { padding: 10px 80px; margin: 80px auto; background: #f5f5f5; border: solid #666; border-width: 8px 0 2px 0; }
.yui-gf { margin-bottom: 2em; padding-bottom: 2em; border-bottom: 1px solid #ccc; }
/* //-- header, body, footer -- */
#hd { margin: 2.5em 0 3em 0; padding-bottom: 1.5em; border-bottom: 1px solid #ccc }
#hd h2 { text-transform: uppercase; letter-spacing: 2px; }
#bd, #ft { margin-bottom: 2em; }
/* //-- footer -- */
#ft { padding: 1em 0 5em 0; font-size: 92%; border-top: 1px solid #ccc; text-align: center; }
#ft p { margin-bottom: 0; text-align: centezr; }
/* //-- core typography and style -- */
#hd h1 { font-size: 48px; text-transform: uppercase; letter-spacing: 3px; margin-bottom: 10px;}
h2 { font-size: 152% }
h3, h4 { font-size: 122%; }
h1, h2, h3, h4 { color: #333; }
p { font-size: 100%; line-height: 18px; padding-right: 3em; }
a { color: #990003 }
a:hover { text-decoration: none; }
strong { font-weight: bold; }
li { line-height: 24px; border-bottom: 1px solid #ccc; }
p.enlarge { font-size: 144%; padding-right: 6.5em; line-height: 24px; }
p.enlarge span { color: #000 }
.contact-info { margin-top: 7px; }
.first h2 { font-style: italic; }
.last { border-bottom: 0 }
/* //-- section styles -- */
a#pdf { display: block; float: left; background: #666; color: white; padding: 6px 50px 6px 12px; margin-bottom: 6px; text-decoration: none; }
a#pdf:hover { background: #222; }
.job { position: relative; margin-bottom: 1em; padding-bottom: 1em; border-bottom: 1px solid #ccc; }
.job h4 { position: absolute; top: 0.35em; right: 0 }
.job h3 {margin-top : 5px; margin-bottom : 10px;}
.last { border: none; }
.skills-list ul { margin: 0; }
.skills-list li { margin: 3px 0; padding: 3px 0; }
.skills-list li span { font-size: 152%; display: block; margin-bottom: -2px; padding: 0 }
.talent { width: 32%; float: left }
.talent h2 { margin-bottom: 6px; }
#srt-ttab { margin-bottom: 100px; text-align: center; }
#srt-ttab img.last { margin-top: 20px }
/* --// override to force 1/8th width grids -- */
.yui-gf .yui-u{width:80.2%; padding-bottom: 20px;}
.yui-gf div.first{width:12.3%;}
ul#nav{
width: 1300px; list-style: none; overflow: hidden; margin: 80px 18em 0 auto;
}
#nav li {
width: 100px; height: 35px; float: left; padding: 13px 0 0 0;
background: url(Images/nav-bg.png);
font-weight: bold; text-align: center; text-transform: uppercase;
border-radius: 4px;
}
#nav li:nth-child(1) {
margin: 0 10px 0 0;
}
#nav li:nth-child(2) {
margin: 0 10px 0 0;
}
#nav li:nth-child(3) {
margin: 0 10px 0 0;
}
ul#nav li:nth-child(4) {
margin: 0 10px 0 0;
}
ul#nav li a.active {
color:cadetblue;
text-decoration: underline ;
}
ul#nav li a {
color: #616369; text-decoration: none;
}
ul#nav li a:hover {
color: #a12121;
}
#container {
width: 1300px;
margin: 0 250px;
}
.menu-simple {
margin:auto;
list-style:none;
display: inline-block;
}
.menu-simple li {
font-size:20px;
cursor:pointer;
width:100px;
margin:0;
padding:12px 0;
float:left;
display:block;
height:40px;
}
footer {
text-align: center;
position: absolute;
bottom: 0;
padding:10px 0 auto 0;
width: 100%;
}
.social-footer {
background: #8a8a8a;
height:50px;
position: relative;
left: 0;
bottom: 0;
width: inherit;
}
.social-footer .social-footer-icons .fa {
font-size: 30px;
color: #fefefe;
}
.social-footer .social-footer-icons .fa:hover {
color: #4a4a4a;
transition: color 0.15s ease-in;
}
<!doctype html>
<html>
<head>
<title> Game Programmer </title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="reset-fonts-grids.css"/>
<link rel="stylesheet" type="text/css" href="resume.css"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="main.js"></script>
</head>
<body>
<ul id="nav">
<li>Home</li>
<li>Projects</li>
<li><a class="active" href="resume.html">Resume</a></li>
<li>Contact</li>
</ul>
<div id = "container">
<div id="doc2" class="yui-t7">
<div id="inner">
<div id="hd">
<div class="yui-gc">
<div class="yui-u first">
<h1>a</h1>
<h2>Game Programmer</h2>
</div>
<div class="yui-u">
<div class="contact-info">
<h3><a id="pdf" href="#">Download PDF</a></h3>
<h3>1#gmail.com</h3>
</div><!--// .contact-info -->
</div>
</div><!--// .yui-gc -->
</div><!--// hd -->
<div id="bd">
<div id="yui-main">
<div class="yui-b">
<div class="yui-gf">
<div class="yui-u first">
<h2>Profile</h2>
</div>
<div class="yui-u">
<p class="enlarge">
Game Programmer with 2+ years of experience with multiple game engine and a shipped AA title for PC and Consoles. Possesses a Masters in Game Programming.
</p>
</div>
</div><!--// .yui-gf -->
<div class="yui-gf">
<div class="yui-u first">
<h2>Skills</h2>
</div>
<div class="yui-u">
<div class="talent">
<h2>Time Management</h2>
</div>
<div class="talent">
<h2>Strong Work Ethics</h2>
</div>
<div class="talent">
<h2>Team Player</h2>
</div>
</div>
</div><!--// .yui-gf -->
<div class="yui-gf">
<div class="yui-u first">
<h2>Technical</h2>
</div>
<div class="yui-u">
<ul class="talent">
<li>C</li>
<li class="last">C++</li>
</ul>
<ul class="talent">
<li>C#</li>
<li class="last">Unity</li>
</ul>
<ul class="talent">
<li>Unreal Engine 4</li>
<li class="last">SVN / Perforce</li>
</ul>
</div>
</div><!--// .yui-gf-->
<div class="yui-gf">
<div class="yui-u first">
<h2>Experience</h2>
</div><!--// .yui-u -->
<div class="yui-u">
<div class="job">
<h2>a</h2>
<h3>b</h3>
<h4>c</h4>
<p>d</p>
<p>•e</p>
</div>
<div class="job">
<h2>a</h2>
<h3>b</h3>
<h4>c</h4>
<p>d</p>
</div>
<div class="job last">
<h2>a</h2>
<h3>b</h3>
<h4>c</h4>
<p>d</p>
<p>e</p>
</div>
</div><!--// .yui-u -->
</div><!--// .yui-gf -->
<div class="yui-gf last">
<div class="yui-u first">
<h2>Education</h2>
</div>
<div class="yui-u">
<h2>a</h2>
<h3>b</h3>
</div>
<div class="yui-u">
<h2>a</h2>
<h3>b</h3>
</div>
</div><!--// .yui-gf -->
</div><!--// .yui-b -->
</div><!--// yui-main -->
</div><!--// bd -->
</div><!-- // inner -->
</div><!--// doc -->
<!--Footer-->
<footer class="social-footer">
<div class="social-footer-icons">
<ul class="menu-simple">
<li><i class="fa fa-facebook" aria-hidden="true"></i></li>
<li><i class="fa fa-instagram" aria-hidden="true"></i></li>
<li><i class="fa fa-pinterest-p" aria-hidden="true"></i></li>
<li><i class="fa fa-twitter" aria-hidden="true"></i></li>
</ul>
</div>
</footer>
</div>
</body>
</html>
Adding this tag to your css made everything seem okay for me!
html {
position: relative;
}
I used this as a reference: How can I position my div at the bottom of its container?
Some other folks have already pointed out that you need to have position set to relative, left set to 0, and only one value defined for the 'bottom' property. I don't want to steal their thunder. While looking through your code, I noticed that a lot of dimensions are hard-coded, though, and you seem to be doing your grid system from scratch. I think you could save yourself a lot of headache and make your page look more professional if you include this
<meta name="viewport" content="width=device-width, initial-scale=1">
in your header and define your dimensions in 'vw' (meaning "percent of view width") instead of px. You would probably be better off than that, even, if you were to at least reuse the grid system from Bootstrap, even if you don't want any styling from the rest of the framework.
Try to change the position from absolute to fixed
footer {
text-align: center;
position: fixed;
bottom: 0;
padding:10px 0 auto 0;
width: 100%;
}
.social-footer {
bottom:20px;
background: #8a8a8a;
height:50px;
position: fixed;
bottom: 0;
width: inherit;
}
I am working on a mobile first design approach, so please resize the screen to mobile size or inspect and set to any phone.
I am having trouble getting this form to behave. It won't center and the submit button won't align with the right side of the forms.
And when I switch between phone screens different border edges on the form inputs will be issing. On one screen its the top border for the name input that's missing, on one its all the right borders for each box, etc.
How do you fix this?
css
.container {
padding: 0 2em;
}
main {
position: relative;
top: -20%;
}
body, html {
width: 100%;
margin: 0;
padding: 0;
font-family: 'Raleway', sans-serif;
text-align: center;
overflow-x: hidden;
/*background: #CE2026;*/
}
/*-- ---------------------------------------------------------------- -->
<!-- NAVIGATION -->
<!-- --------------------------------------------------------------- --*/
.navbar {
background-color: #FFFFFF;
width: 100%;
height: 78px;
border-bottom: 8px solid #CE2026;
position: relative;
z-index: 1;
}
.navbar-links {
display: none;
}
#logo {
display: none;
}
.open-slide {
float: right;
margin-top: 25px;
margin-right: 20px;
display: block;
z-index: 4;
position: absolute;
right: 0;
}
.side-nav {
width: 0;
display: none;
height: 100%;
position: absolute;
top: 0;
background-color: #fff;
transition: 0.5s;
right: -1px;
text-align: right;
z-index: 15;
margin-top: 5%;
}
#side-hidden {
background-color: #000;
opacity: 0.9;
height: 100%;
position: absolute;
top: 0;
transition: 0.5s;
left: 0
margin: 0;
width: 0;
z-index: 6;
}
.side-nav ul {
display: block;
text-decoration: none;
z-index: 6;
/* Added this */
padding: 0;
position: relative;
top: -8%;
list-style: none;
}
/* Added this */
.nav-item {
display:block;
margin: 0;
}
.side-nav ul a {
position: relative;
width: 100%;
/* Changed this */
/* padding: 10px 130px 10px 100px;*/
padding: 20px 15px;
text-decoration: none;
color: #000;
margin-right: 20px;
z-index: 6;
/* Removed this */
/* right: 30px; */
text-align: right;
/* Added these */
display: block;
box-sizing: border-box;
}
.btn-close {
display: block;
background: #fff;
position: absolute;
top: 0;
/* Changed this */
/* left: 22px; */
left: 0;
font-size: 36px;
text-decoration: none;
color: #ccc;
right: 7px;
top: -10px;
}
.btn-close {
background: #fff;
color:#2F2E2E;
position: relative;
padding: 0;
margin: 0;
}
.btn-close a:hover {
color: #444;
cursor: pointer;
background: #fff;
}
.side-nav .btn-close:hover {
color: #fff
}
.side-nav li a:hover {
color: #fff;
background: #CE2026;
}
.side-active {
color: #ffffff !important;
background: #CE2026;
}
.mobile-logo {
position: relative;
top: 10%;
right: 0%;
padding: 0;
}
/*-- -------------------------------------------- -->
<!-- HERO STRIP -->
<!-- -------------------------------------------- -*/
#hero {
height: 100%;
width: 100%;
position: relative;
background:url("images/Landing.jpg") no-repeat center center fixed;
padding: 0;
margin: 0;
color: #fff;
border-bottom: 1px solid #CE2026;
}
#home-h {
width: 100%;
font-weight: 900;
font-size: 2.7em;
padding-top: .8em;
line-height: 1.4em;
margin-top: 0;
}
#home-p {
font-size: 1.25em;
padding-bottom: .8em;
font-weight: 350;
animation-delay: 0.3s;
margin: 0;
}
.learn {
display: inline-block;
border-style: solid;
border-width: 2px;
border-color: #FFFFFF;
font-size: 17px;
margin: 28px 0;
padding: 18px 80px;
color: #FFFFFF;
text-decoration: none;
animation-delay: 0.6s;
}
.heroText a:hover {
background: #fff;
border-color: #fff;
color: #CE2026;
transition: background 0.4s ease 0s;
transition-property: background;
transition-duration: 0.4s;
transition-timing-function: ease;
transition-delay: 0s;
cursor: pointer;
}
/*-- -------------------------------------------- -->
<!-- RED STRIP -->
<!-- -------------------------------------------- -*/
#red-strip {
background: #CE2026;
color: #fff;
height: 100%;
padding: 0;
margin: 0;
padding-bottom: 0em;
}
#strip-1 {
margin-top: 0;
padding-top: 0;
}
#strip-1 h3 {
font-size: 1.313em;
}
#strip-1 p {
line-height: 1.4em;
}
.top h3 {
margin-top: 0;
padding-top: 0;
}
.strip-1-center {
padding: 1.8em;
}
.strip-1-center h3 {
padding-top: 1em;
}
/*-- -------------------------------------------- -->
<!-- GIVE CALL -->
<!-- -------------------------------------------- -*/
#give-call {
margin-top: 1em;
padding: 0;
background: #fff;
height: 100%;
}
.gcn-call, .gcn-number {
font-size: 1.375em;
}
.gcn-call {
margin-bottom: 0;
padding-top: 3em;
}
.gcn-number {
margin-top: .4em;
}
.gcn-p {
line-height: 1.5em;
margin-bottom: 3em;
}
.give-call-number {
margin-bottom: 5em;
}
.give-call-number a {
border: 2px solid #000;
border-radius: 25px;
position: relative;
padding: 15px 25%;
margin-top: 2em;
margin-bottom: 2em;
text-decoration: none;
color:#2F2E2E;
}
.give-call-number a:hover {
background: #CE2026;
color: #fff;
border-color: #CE2026;
}
.give-call-email {
display: flex;
flex-direction: column;
padding-bottom: 3em;
}
#give-call img {
width: auto;
}
/*-- -------------------------------------------- -->
<!-- ICONS -->
<!-- -------------------------------------------- -*/
#icons {
background: #EEF0E4;
color: #2F2E2E;
height: 100%;
}
#icons i {
color: #CE2026;
}
.top-margin {
margin-top: 0;
padding-top: 3em;
font-size: 1.375em;
}
.margin-bottom {
margin-bottom: 3.5em;
}
#icons p {
line-height: 1.5em;
}
/*-- -------------------------------------------- -->
<!-- PARALLAX -->
<!-- -------------------------------------------- -*/
#parallax {
color: #fff;
height: 100%;
padding-bottom: 3em;
background: #CE2026;
}
.parallax-right h3 {
font-size: 2.375em;
margin-bottom: 0;
}
.parallax-margin-top {
margin-top: .2em;
}
.parallax-margin-top-1 {
margin-top: 0em;
padding-top: 1em;
}
.parallax-p {
line-height: 1.5em;
}
.parallax-p a {
text-decoration: none;
border: 2px solid #fff;
padding: 1em 25%;
color: #fff;
margin-top: 2em;
margin-bottom: 4em;
}
.parallax a:hover {
cursor: pointer;
background: white;
color: #CE2026;
}
/*-- -------------------------------------------- -->
<!-- CONTACT -->
<!-- -------------------------------------------- -*/
#contact-info {
text-align: left;
background: white;
color: #605E5E;
font-weight: 300;
padding-top: 3em;
height: 100%;
padding-bottom: 3.6em;
}
#adress p {
margin-bottom: 0;
margin-top: 0;
}
.red {
color: #ce2026;
font-weight: 400;
}
.form h6 {
font-size: 1.375em;
margin-bottom: 1em;
text-align: center;
}
.form {
width: 100%;
margin: .3em;
}
input, textarea {
margin: .4em;
font-size: 14px;
font-family: 'Raleway', sans-serif;
white-space: pre;
}
input[type=submit] {
background: #CE2026;
color: #fff;
font-size: 14px;
float: right;
padding: 7px 13px;
margin-right: 0;
border: none;
}
input[type=submit]:hover {
background: #831517;
cursor: pointer;
}
::-webkit-input-placeholder { /* Chrome */
color: #605E5E;
opacity: .5;
padding-left: 5px;
}
:-ms-input-placeholder { /* IE 10+ */
color: #605E5E;
opacity: .5;
margin-left: 5px;
padding-left: 5px;
}
::-moz-placeholder { /* Firefox 19+ */
color: #605E5E;
opacity: .5;
margin-left: 5px;
padding-left: 5px;
}
:-moz-placeholder { /* Firefox 4 - 18 */
color: red;
opacity: .5;
margin-left: 5px;
padding-left: 5px;
}
/*-- -------------------------------------------- -->
<!-- FOOTER -->
<!-- -------------------------------------------- -*/
footer {
color: #A0A09F;
background: #2F2E2E;
}
footer h3 {
font-size: 1em;
}
footer p {
font-size: .875em;
line-height: 1.5em;
}
footer li {
font-size: .875em;
line-height: 1.5em;
}
footer ul {
list-style: none;
text-align: center;
padding: 0;
}
.footer-item {
padding-top: 2em;
}
.margin-p {
margin-bottom: 0;
}
.facebook {
padding: 2em 0;
}
.facebook i {
color: #3b5998;
}
.copyright {
background: #242323;
color: #A0A09F;
}
.copy-center {
padding: 2em 0;
margin: 0;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css?family=Raleway:300,500,700,900" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Brushworks NW Inc.</title>
</head>
<body id="noScroll">
<!-- ----------------------------------------------------------------------------------- -->
<!-- NAVIGATION -->
<!-- ----------------------------------------------------------------------------------- -->
<nav class="navbar grid animated fadeIn ">
<div class="open-slide">
<div>
<a href="#" onclick="toggleNav()">
<svg width="30" height="30">
<path d="M0,5 35,5" stroke="#000" stroke-width="2"/>
<path d="M0,14 35,14" stroke="#000" stroke-width="2"/>
<path d="M0,23 35,23" stroke="#000" stroke-width="2"/>
</svg>
</a>
</div>
</div>
<img class="mobile-logo container" src="images/brushworks_logo.png" width="91px" height="91px">
<ul class="navbar-links">
<li><a class="active" href="#">HOME</a></li>
<li>ABOUT US</li>
<li>SERVICES</li>
<li>GALLERY</li>
<li>CONTACT US</li>
<li id="number">(360) 679-4444</li>
</ul>
</nav>
<div id="side-hidden-parent">
<div id="side-hidden"></div>
</div>
<div id="side-menu" class="side-nav">
<ul class="on-top">
<li>×</li>
<li class="nav-item"><a class="side-active" href="#">Home</a></li>
<li class="nav-item">About</li>
<li class="nav-item">Services</li>
<li class="nav-item">Contact</li>
</ul>
</div>
<main>
<section id="hero" class="grid">
<div class="container">
<img id="logo" class="animated fadeInRight" src="images/brushworks_logo.png" alt="brush roller">
<div class="heroText">
<h1 id="home-h" class="animated fadeInUp">The Best Painters For Your
Home or Business</h1>
<h2 id="home-p" class="animated fadeInUp">See why we're trusted for over 30 years to service Whidbey Island. Our results speak for themselves</h2>
<a class="learn animated fadeInRight href=">Services</a>
</div>
</div>
</section>
<!-- -------------------------------------------- -->
<!-- RED STRIP -->
<!-- -------------------------------------------- -->
<section id="red-strip" class="grid">
<div class="container">
<div id="strip-1" class="strip-1-center animated slideInUp">
<div class="top">
<h3>Residential</h3>
<p>Our qualified staff are trained to use the techniques and materials that are best suited for each individual home.</p>
</div>
<div class="line"></div>
<div class="flex-1">
<h3>Commercial</h3>
<p>No matter what business you're in or how big you facility is, we have the staff and equipment to get it done</p>
</div>
<div class="line"></div>
<div class="flex-1">
<h3>Interior/Exterior</h3>
<p>Whether it's inside or out, we have you covered. Our staff can manage any texture and any material</p>
</div>
</div>
</div>
</section>
<!-- -------------------------------------------- -->
<!-- GIVE CALL -->
<!-- -------------------------------------------- -->
<section id="give-call" class="grid">
<div class="container">
<div class="give-call-number">
<h3 class="gcn-call">Give us a call!</h3>
<h3 class="gcn-number">(360)679-444</h3>
<p class="gcn-p">We love working on Whidbey Island and the surrounding area. The diverse, eclectic and highly creative customer base keeps our staff and crew challenged and motivated to exceed our customers expectations.</p>
Contact Us
</div>
</div>
</section>
<!-- -------------------------------------------- -->
<!-- ICONS -->
<!-- -------------------------------------------- -->
<section id="icons" class="grid">
<div class="container">
<div class="icons-top">
<div>
<h4 class="top-margin">OFFERING YOU THE BEST SOLUTION FOR YOUR PROJECT</h4>
</div>
<div>
<p class="margin-bottom">We provide many painting services to our customers. All of our work is performed by our highly qualified staff and backed by our 100% customer satisfaction
guarantee.</p>
</div>
</div>
<div class="center-3">
<div class="local">
<div class="circle">
<i class="fas fa-map-pin fa-2x"></i>
</div>
<h2>LOCALLY OWNED</h2>
<p class="margin-bottom">With over 30 years experience as professional painters, we are one of the largest residential and commercial painting companies on Whidbey Island.</p>
</div>
<div class="value">
<div class="circle">
<i class="fas fa-dollar-sign fa-2x"></i>
</div>
<h2>BEST VALUE</h2>
<p class="margin-bottom">We are confident that we provide the highest quality work for the price. We take great pride in the work we do and refuse to let you pay for work that does not meet expectations.</p>
</div>
<div class="qualified">
<div class="circle">
<i class="fas fa-medal fa-2x"></i>
</div>
<h2>PROFESSIONALLY QUALIFIED</h2>
<p class="margin-bottom">We provide many painting services to our customers. All of our work is performed by our highly qualified staff and backed by our 100% customer satisfaction guarantee.</p>
</div>
</div>
</div>
</section>
<!-- -------------------------------------------- -->
<!-- PARALLAX -->
<!-- -------------------------------------------- -->
<section id="parallax" class="grid">
<div class="container">
<div class="parallax-left">
</div>
<div class="parallax-right">
<h3 class="parallax-margin-top-1">Any Project,</h3>
<h3 class="parallax-margin-top">Any Size</h3>
<div class="parallax-p">
<p>Our shop can handle projects from small to large. Over that last 30 years we have seen it all and done it all. </p><br>
<a class="read" href="#">READ MORE</a>
</div>
</div>
</div>
</section>
<!-- -------------------------------------------- -->
<!-- CONTACT INFO -->
<!-- -------------------------------------------- -->
<section id="contact-info" class="grid">
<div class="container">
<div id="adress">
<p class="red">Address</p>
<p class="regular">Brushworks NW <br>
691 Oak St. Unit I <br>
Oak Harbor, WA 98277
</p><br>
<p class="red">Telephone</p>
<p class="regular">Tel: (360) 679-4444 <br>
Fax: (360) 679-5026
</p><br>
<p class="red">Email</p>
<p class="regular">bwnwinc#gmail.com</p><br>
<p class="red">Opening Hours</p>
<p class="regular">Mon - Fri: 7am - 5pm</p>
</div>
<div class="form">
<div>
<h6>Call Or Email Us Today!</h6>
</div>
<form>
<input class="" type="text" name="name" placeholder="Full name" style="width: 100%; height: 30px"><br>
<input class="form" type="text" name="email" placeholder="Email" style="width: 100%; height: 30px"><br>
<textarea class="form" name="message" placeholder="Message" style="width: 99.5%; height: 100px"></textarea>
<input type="submit" value="Send">
</form>
</div>
</div>
</section>
</main>
</body>
</html>
Its better to use flex-box.
.container {
padding: 0 2em;
}
main {
position: relative;
top: -20%;
}
body, html {
width: 100%;
margin: 0;
padding: 0;
font-family: 'Raleway', sans-serif;
text-align: center;
overflow-x: hidden;
/*background: #CE2026;*/
}
/*-- ---------------------------------------------------------------- -->
<!-- NAVIGATION -->
<!-- --------------------------------------------------------------- --*/
.navbar {
background-color: #FFFFFF;
width: 100%;
height: 78px;
border-bottom: 8px solid #CE2026;
position: relative;
z-index: 1;
}
.navbar-links {
display: none;
}
#logo {
display: none;
}
.open-slide {
float: right;
margin-top: 25px;
margin-right: 20px;
display: block;
z-index: 4;
position: absolute;
right: 0;
}
.side-nav {
width: 0;
display: none;
height: 100%;
position: absolute;
top: 0;
background-color: #fff;
transition: 0.5s;
right: -1px;
text-align: right;
z-index: 15;
margin-top: 5%;
}
#side-hidden {
background-color: #000;
opacity: 0.9;
height: 100%;
position: absolute;
top: 0;
transition: 0.5s;
left: 0
margin: 0;
width: 0;
z-index: 6;
}
.side-nav ul {
display: block;
text-decoration: none;
z-index: 6;
/* Added this */
padding: 0;
position: relative;
top: -8%;
list-style: none;
}
/* Added this */
.nav-item {
display:block;
margin: 0;
}
.side-nav ul a {
position: relative;
width: 100%;
/* Changed this */
/* padding: 10px 130px 10px 100px;*/
padding: 20px 15px;
text-decoration: none;
color: #000;
margin-right: 20px;
z-index: 6;
/* Removed this */
/* right: 30px; */
text-align: right;
/* Added these */
display: block;
box-sizing: border-box;
}
.btn-close {
display: block;
background: #fff;
position: absolute;
top: 0;
/* Changed this */
/* left: 22px; */
left: 0;
font-size: 36px;
text-decoration: none;
color: #ccc;
right: 7px;
top: -10px;
}
.btn-close {
background: #fff;
color:#2F2E2E;
position: relative;
padding: 0;
margin: 0;
}
.btn-close a:hover {
color: #444;
cursor: pointer;
background: #fff;
}
.side-nav .btn-close:hover {
color: #fff
}
.side-nav li a:hover {
color: #fff;
background: #CE2026;
}
.side-active {
color: #ffffff !important;
background: #CE2026;
}
.mobile-logo {
position: relative;
top: 10%;
right: 0%;
padding: 0;
}
/*-- -------------------------------------------- -->
<!-- HERO STRIP -->
<!-- -------------------------------------------- -*/
#hero {
height: 100%;
width: 100%;
position: relative;
background:url("images/Landing.jpg") no-repeat center center fixed;
padding: 0;
margin: 0;
color: #fff;
border-bottom: 1px solid #CE2026;
}
#home-h {
width: 100%;
font-weight: 900;
font-size: 2.7em;
padding-top: .8em;
line-height: 1.4em;
margin-top: 0;
}
#home-p {
font-size: 1.25em;
padding-bottom: .8em;
font-weight: 350;
animation-delay: 0.3s;
margin: 0;
}
.learn {
display: inline-block;
border-style: solid;
border-width: 2px;
border-color: #FFFFFF;
font-size: 17px;
margin: 28px 0;
padding: 18px 80px;
color: #FFFFFF;
text-decoration: none;
animation-delay: 0.6s;
}
.heroText a:hover {
background: #fff;
border-color: #fff;
color: #CE2026;
transition: background 0.4s ease 0s;
transition-property: background;
transition-duration: 0.4s;
transition-timing-function: ease;
transition-delay: 0s;
cursor: pointer;
}
/*-- -------------------------------------------- -->
<!-- RED STRIP -->
<!-- -------------------------------------------- -*/
#red-strip {
background: #CE2026;
color: #fff;
height: 100%;
padding: 0;
margin: 0;
padding-bottom: 0em;
}
#strip-1 {
margin-top: 0;
padding-top: 0;
}
#strip-1 h3 {
font-size: 1.313em;
}
#strip-1 p {
line-height: 1.4em;
}
.top h3 {
margin-top: 0;
padding-top: 0;
}
.strip-1-center {
padding: 1.8em;
}
.strip-1-center h3 {
padding-top: 1em;
}
/*-- -------------------------------------------- -->
<!-- GIVE CALL -->
<!-- -------------------------------------------- -*/
#give-call {
margin-top: 1em;
padding: 0;
background: #fff;
height: 100%;
}
.gcn-call, .gcn-number {
font-size: 1.375em;
}
.gcn-call {
margin-bottom: 0;
padding-top: 3em;
}
.gcn-number {
margin-top: .4em;
}
.gcn-p {
line-height: 1.5em;
margin-bottom: 3em;
}
.give-call-number {
margin-bottom: 5em;
}
.give-call-number a {
border: 2px solid #000;
border-radius: 25px;
position: relative;
padding: 15px 25%;
margin-top: 2em;
margin-bottom: 2em;
text-decoration: none;
color:#2F2E2E;
}
.give-call-number a:hover {
background: #CE2026;
color: #fff;
border-color: #CE2026;
}
.give-call-email {
display: flex;
flex-direction: column;
padding-bottom: 3em;
}
#give-call img {
width: auto;
}
/*-- -------------------------------------------- -->
<!-- ICONS -->
<!-- -------------------------------------------- -*/
#icons {
background: #EEF0E4;
color: #2F2E2E;
height: 100%;
}
#icons i {
color: #CE2026;
}
.top-margin {
margin-top: 0;
padding-top: 3em;
font-size: 1.375em;
}
.margin-bottom {
margin-bottom: 3.5em;
}
#icons p {
line-height: 1.5em;
}
/*-- -------------------------------------------- -->
<!-- PARALLAX -->
<!-- -------------------------------------------- -*/
#parallax {
color: #fff;
height: 100%;
padding-bottom: 3em;
background: #CE2026;
}
.parallax-right h3 {
font-size: 2.375em;
margin-bottom: 0;
}
.parallax-margin-top {
margin-top: .2em;
}
.parallax-margin-top-1 {
margin-top: 0em;
padding-top: 1em;
}
.parallax-p {
line-height: 1.5em;
}
.parallax-p a {
text-decoration: none;
border: 2px solid #fff;
padding: 1em 25%;
color: #fff;
margin-top: 2em;
margin-bottom: 4em;
}
.parallax a:hover {
cursor: pointer;
background: white;
color: #CE2026;
}
/*-- -------------------------------------------- -->
<!-- CONTACT -->
<!-- -------------------------------------------- -*/
#contact-info {
text-align: left;
background: white;
color: #605E5E;
font-weight: 300;
padding-top: 3em;
height: 100%;
padding-bottom: 3.6em;
}
#adress p {
margin-bottom: 0;
margin-top: 0;
}
.red {
color: #ce2026;
font-weight: 400;
}
.form h6 {
font-size: 1.375em;
margin-bottom: 1em;
text-align: center;
}
.form {
/* width: 100%; */ // <-- Not required
margin: .3em;
}
/* Make the form flex box */
form {
display: flex;
flex-flow: row wrap;
}
input, textarea {
margin: .4em;
font-size: 14px;
font-family: 'Raleway', sans-serif;
white-space: pre;
}
input[type=submit] {
background: #CE2026;
color: #fff;
font-size: 14px;
float: right;
padding: 7px 13px;
/* margin-right: 0; */ // <-- Not required
border: none;
flex: 1 1 auto; // <-- If you want button of full width
}
input[type=submit]:hover {
background: #831517;
cursor: pointer;
}
::-webkit-input-placeholder { /* Chrome */
color: #605E5E;
opacity: .5;
padding-left: 5px;
}
:-ms-input-placeholder { /* IE 10+ */
color: #605E5E;
opacity: .5;
margin-left: 5px;
padding-left: 5px;
}
::-moz-placeholder { /* Firefox 19+ */
color: #605E5E;
opacity: .5;
margin-left: 5px;
padding-left: 5px;
}
:-moz-placeholder { /* Firefox 4 - 18 */
color: red;
opacity: .5;
margin-left: 5px;
padding-left: 5px;
}
/*-- -------------------------------------------- -->
<!-- FOOTER -->
<!-- -------------------------------------------- -*/
footer {
color: #A0A09F;
background: #2F2E2E;
}
footer h3 {
font-size: 1em;
}
footer p {
font-size: .875em;
line-height: 1.5em;
}
footer li {
font-size: .875em;
line-height: 1.5em;
}
footer ul {
list-style: none;
text-align: center;
padding: 0;
}
.footer-item {
padding-top: 2em;
}
.margin-p {
margin-bottom: 0;
}
.facebook {
padding: 2em 0;
}
.facebook i {
color: #3b5998;
}
.copyright {
background: #242323;
color: #A0A09F;
}
.copy-center {
padding: 2em 0;
margin: 0;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css?family=Raleway:300,500,700,900" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Brushworks NW Inc.</title>
</head>
<body id="noScroll">
<!-- ----------------------------------------------------------------------------------- -->
<!-- NAVIGATION -->
<!-- ----------------------------------------------------------------------------------- -->
<nav class="navbar grid animated fadeIn ">
<div class="open-slide">
<div>
<a href="#" onclick="toggleNav()">
<svg width="30" height="30">
<path d="M0,5 35,5" stroke="#000" stroke-width="2"/>
<path d="M0,14 35,14" stroke="#000" stroke-width="2"/>
<path d="M0,23 35,23" stroke="#000" stroke-width="2"/>
</svg>
</a>
</div>
</div>
<img class="mobile-logo container" src="images/brushworks_logo.png" width="91px" height="91px">
<ul class="navbar-links">
<li><a class="active" href="#">HOME</a></li>
<li>ABOUT US</li>
<li>SERVICES</li>
<li>GALLERY</li>
<li>CONTACT US</li>
<li id="number">(360) 679-4444</li>
</ul>
</nav>
<div id="side-hidden-parent">
<div id="side-hidden"></div>
</div>
<div id="side-menu" class="side-nav">
<ul class="on-top">
<li>×</li>
<li class="nav-item"><a class="side-active" href="#">Home</a></li>
<li class="nav-item">About</li>
<li class="nav-item">Services</li>
<li class="nav-item">Contact</li>
</ul>
</div>
<main>
<section id="hero" class="grid">
<div class="container">
<img id="logo" class="animated fadeInRight" src="images/brushworks_logo.png" alt="brush roller">
<div class="heroText">
<h1 id="home-h" class="animated fadeInUp">The Best Painters For Your
Home or Business</h1>
<h2 id="home-p" class="animated fadeInUp">See why we're trusted for over 30 years to service Whidbey Island. Our results speak for themselves</h2>
<a class="learn animated fadeInRight href=">Services</a>
</div>
</div>
</section>
<!-- -------------------------------------------- -->
<!-- RED STRIP -->
<!-- -------------------------------------------- -->
<section id="red-strip" class="grid">
<div class="container">
<div id="strip-1" class="strip-1-center animated slideInUp">
<div class="top">
<h3>Residential</h3>
<p>Our qualified staff are trained to use the techniques and materials that are best suited for each individual home.</p>
</div>
<div class="line"></div>
<div class="flex-1">
<h3>Commercial</h3>
<p>No matter what business you're in or how big you facility is, we have the staff and equipment to get it done</p>
</div>
<div class="line"></div>
<div class="flex-1">
<h3>Interior/Exterior</h3>
<p>Whether it's inside or out, we have you covered. Our staff can manage any texture and any material</p>
</div>
</div>
</div>
</section>
<!-- -------------------------------------------- -->
<!-- GIVE CALL -->
<!-- -------------------------------------------- -->
<section id="give-call" class="grid">
<div class="container">
<div class="give-call-number">
<h3 class="gcn-call">Give us a call!</h3>
<h3 class="gcn-number">(360)679-444</h3>
<p class="gcn-p">We love working on Whidbey Island and the surrounding area. The diverse, eclectic and highly creative customer base keeps our staff and crew challenged and motivated to exceed our customers expectations.</p>
Contact Us
</div>
</div>
</section>
<!-- -------------------------------------------- -->
<!-- ICONS -->
<!-- -------------------------------------------- -->
<section id="icons" class="grid">
<div class="container">
<div class="icons-top">
<div>
<h4 class="top-margin">OFFERING YOU THE BEST SOLUTION FOR YOUR PROJECT</h4>
</div>
<div>
<p class="margin-bottom">We provide many painting services to our customers. All of our work is performed by our highly qualified staff and backed by our 100% customer satisfaction
guarantee.</p>
</div>
</div>
<div class="center-3">
<div class="local">
<div class="circle">
<i class="fas fa-map-pin fa-2x"></i>
</div>
<h2>LOCALLY OWNED</h2>
<p class="margin-bottom">With over 30 years experience as professional painters, we are one of the largest residential and commercial painting companies on Whidbey Island.</p>
</div>
<div class="value">
<div class="circle">
<i class="fas fa-dollar-sign fa-2x"></i>
</div>
<h2>BEST VALUE</h2>
<p class="margin-bottom">We are confident that we provide the highest quality work for the price. We take great pride in the work we do and refuse to let you pay for work that does not meet expectations.</p>
</div>
<div class="qualified">
<div class="circle">
<i class="fas fa-medal fa-2x"></i>
</div>
<h2>PROFESSIONALLY QUALIFIED</h2>
<p class="margin-bottom">We provide many painting services to our customers. All of our work is performed by our highly qualified staff and backed by our 100% customer satisfaction guarantee.</p>
</div>
</div>
</div>
</section>
<!-- -------------------------------------------- -->
<!-- PARALLAX -->
<!-- -------------------------------------------- -->
<section id="parallax" class="grid">
<div class="container">
<div class="parallax-left">
</div>
<div class="parallax-right">
<h3 class="parallax-margin-top-1">Any Project,</h3>
<h3 class="parallax-margin-top">Any Size</h3>
<div class="parallax-p">
<p>Our shop can handle projects from small to large. Over that last 30 years we have seen it all and done it all. </p><br>
<a class="read" href="#">READ MORE</a>
</div>
</div>
</div>
</section>
<!-- -------------------------------------------- -->
<!-- CONTACT INFO -->
<!-- -------------------------------------------- -->
<section id="contact-info" class="grid">
<div class="container">
<div id="adress">
<p class="red">Address</p>
<p class="regular">Brushworks NW <br>
691 Oak St. Unit I <br>
Oak Harbor, WA 98277
</p><br>
<p class="red">Telephone</p>
<p class="regular">Tel: (360) 679-4444 <br>
Fax: (360) 679-5026
</p><br>
<p class="red">Email</p>
<p class="regular">bwnwinc#gmail.com</p><br>
<p class="red">Opening Hours</p>
<p class="regular">Mon - Fri: 7am - 5pm</p>
</div>
<div class="form">
<div>
<h6>Call Or Email Us Today!</h6>
</div>
<form>
<input class="" type="text" name="name" placeholder="Full name" style="width: 100%; height: 30px"><br>
<input class="form" type="text" name="email" placeholder="Email" style="width: 100%; height: 30px"><br>
<textarea class="form" name="message" placeholder="Message" style="width: 99.5%; height: 100px"></textarea>
<input type="submit" value="Send">
</form>
</div>
</div>
</section>
</main>
</body>
</html>
I have a 3 column tile responsive design that's 1 column in mobile and 3 columns in desktop and each tile has a content drawer that needs to stretch the FULL width of the screen (complete with blue background).
I have a working model in a pen below but can't get the drawers to stretch full width?
Not sure if it's CSS or if there's a more optimum HTML layout as doing the mobile first design and it works, just not in Desktop/wider views.
Codepen:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
function openDrawer(tile) {
var drawer = $(tile).attr("drawer");
if ( $(tile).hasClass("ESGActive") ){ // Already is active?
$(".ESGTile").removeClass("ESGActive");
$("#" + drawer).slideUp();
} else {
// Get all tiles with class="ESGActive" and remove it
$(".ESGTile").removeClass("ESGActive");
// Get all elements with class="ESGDrawer" and hide them
$(".ESGDrawer").slideUp();
// Show the current tab drawer, add "active" class to the button
$("#" + drawer).slideDown();
$(tile).addClass("ESGActive");a
}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
.ESGTiles > div{
display:inline;
padding:0;
}
.ESGDrawer {
float:left;
margin:0;
}
.ESGTile > img{
display:none;
}
#media screen and (min-width: 1024px){
.ESGTile > img, .FAQTile > img {
display:block;
}
.ESGTiles > div{
padding:15px;
}
}
#media screen and (max-width: 1024px){
.ESGDrawer {
margin-top: 0!important;
padding: 2em 0!important;
}
.FAQTile img, .ESGDrawer img {
display: none;
}
.ESGTile, .FAQTile {
margin: 0.2em 0;
}
span.drawerToggle {
position: relative;
width: 24px!important;
height: 24px!important;
float:right;
}
.call-to-action img {
width: 70%;
margin: 0 auto 2em auto;
}
}
.FAQTile {
background: #36872a!important;
width: 100%;
}
.drawerToggle{
position: relative;
width: 30px;
height: 30px;
float:right;
}
.drawerToggle:before, .drawerToggle:after{
content: "";
position: absolute;
background-color: white;
transition: transform 0.25s ease-out;
}
.drawerToggle:before{
top: -1px;
left: 50%;
width: 2px;
height: 100%;
margin-left: -1px;
}
.drawerToggle:after{
top: 50%;
left: 0;
width: 100%;
height: 2px;
margin-top: -2px;
}
/**.ESGTile:hover .drawerToggle:before{ transform: rotate(90deg); }
.ESGTile:hover .drawerToggle:after{ transform: rotate(180deg); }**/
.ESGActive .drawerToggle:before{ transform: rotate(90deg); }
.ESGActive .drawerToggle:after{ transform: rotate(180deg); }
.ESGTile, .FAQTile {
display: block;
position: relative;
cursor: pointer;
overflow: hidden;
background-color: #1f335a;
color: #fff;
z-index: 100;
font-weight: 700;
}
.ESGTile h3, .FAQTile h3 {
color: #fff;
}
.ESGTile:hover {
background-color: #344794;
color: #fff;
text-decoration: none;
}
.FAQTile:hover {
background-color: #00a651!important;
color: #fff;
text-decoration: none;
}
.ESGActive {
background: #344794;
}
.ESGActive:after {
bottom: -3px;
left: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
z-index: 120;
pointer-events: none;
border-color: rgba(255, 255, 255, 0);
border-bottom-color: #fff;
border-width: 10px;
margin-left: -10px;
}
.ESGTile h3, .FAQTile h3 {
font-size: 1.2em;
}
.ESGLabel, .FAQLabel {
margin: 0;
display: block;
padding: 0.8em 15px;
}
.ESGDrawer {
display: none;
background: #1f335a;
color: #fff;
padding: 4em 0;
margin-top: 0.3em;
z-index: 90;
position:inline-block;
width:100vw;
left:0;
}
.ESGDrawer h4 {
font-size: 1.8em;
margin-bottom: 1em;
}
.ESGDrawer p {
line-height: 1.4em;
}
.ESGDrawer p.cta-wrapper {
margin: 0.3em 0 0 0;
}
.ESGDrawer p.cta-wrapper a:before {
bottom: 0;
}
.ESGDrawer a:link, .ESGDrawer a:hover, .ESGDrawer a:visited {
text-decoration: none;
color: #fff;
}
hr {
display: none;
}
.call-to-action {
padding: 3em 0;
}
footer {
margin-top: 0;
}
<div class="container">
<div class="row">
<!-- TILE 1 *********************** -->
<div class="col-xs-12 col-md-4">
<!-- Tile -->
<a class="ESGTile" onclick="openDrawer(this)" drawer="title-1">
<img class="img-responsive" src="http://www.kamunga.com/test.jpg" height="360" width="640">
<h3 class="ESGLabel">Title 1<span class="drawerToggle"></span></h3>
</a>
<!-- Drawer -->
<div id="title-1" class="container-fluid ESGDrawer">
<div class="container ESGMiddleDrawerContent">
<div class="row">
<div class="col-xs-12 col-md-6">
<h4>Title 1</h4>
<p>Lorem ipsum</p><p>Lorem ipsum</p>
</div>
</div>
</div>
</div>
</div>
<!-- TILE 2 *********************** -->
<div class="col-xs-12 col-md-4">
<!-- Tile -->
<a class="ESGTile" onclick="openDrawer(this)" drawer="title-2">
<img class="img-responsive" src="http://www.kamunga.com/test.jpg" height="360" width="640">
<h3 class="ESGLabel">Title 2<span class="drawerToggle"></span></h3>
</a>
<!-- Drawer -->
<div id="title-2" class="container-fluid ESGDrawer">
<div class="container ESGMiddleDrawerContent">
<div class="row">
<div class="col-xs-12 col-md-6">
<h4>Title 2</h4>
<p>Lorem ipsum</p><p>Lorem ipsum</p>
</div>
</div>
</div>
</div>
</div>
<!-- TILE 3 *********************** -->
<div class="col-xs-12 col-md-4">
<!-- Tile -->
<a class="ESGTile" onclick="openDrawer(this)" drawer="title-3">
<img class="img-responsive" src="http://www.kamunga.com/test.jpg" height="360" width="640">
<h3 class="ESGLabel">Title 3<span class="drawerToggle"></span></h3>
</a>
<!-- Drawer -->
<div id="title-3" class="container-fluid ESGDrawer">
<div class="container ESGMiddleDrawerContent">
<div class="row">
<div class="col-xs-12 col-md-6">
<h4>Title 3</h4>
<p>Lorem ipsum</p><p>Lorem ipsum</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Here you're
I added this code at the end of the CSS
.body {
position: relative;
}
.ESGDrawer {
position: absolute;
top: 247px;
left: 0px;
width: 100%;
}
.x{
position: inherit;
}
and I add a new classname to each of your col-xs-12 col-md-4 divs
Check the working demo here
https://codepen.io/anon/pen/JaQPjN
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.