Bootstrap 3 columns not stacking when screen size reduced - html

I'm making a webpage for my mums baking business (and to practice my novice coding skills, otherwise I'd just use a simpler solution rather than learning bootstrap).
I've got a header, then 3 bootstrap columns below it, one with an order form, one with images of her bakes, then one with links. I've sized them 3-6-3. I like the way the page looks fullscreen on my desktop but I want the columns to stack when browser gets smaller, or on another device. Currently they just smoosh together, the images get smaller, and after a certain point, a horizontal scrollbar appears. No stacking.
I'm sure I'm either trying to use bootstrap completely wrong, or there's a few glaring errors. I've been staring at it, and trying 'fixes' on here for so long, but I can't solve my issue. Some advice would be greatly appreciated.
one problem I know, is that the and aren't all formatted correctly, I can solve this myself with a bit of time, I just styled it whilst I had it wrongly formatted and when I do it correctly it all looks ugly again, so I'm leaving it for another day. My main problem is the stacking issue.
body {
background-image: url(../images/background.jpg);
}
* {
list-style: none;
text-decoration: none;
font-family: 'Open Sans', sans-serif;
}
header {
margin: 10px 10px 10px 0px;
width: 100%;
height: 100px;
display: block;
background-color: #539e8a;
}
#inner_header {
width: 1000px;
height: 100%;
display: block;
margin: 0 auto;
}
header h1 {
font-family: 'Redressed', cursive;
font-size: 333%;
color: #f6c5be;
top: 15px;
left: 43%;
position: absolute;
}
#logo {
float: left;
padding: 17px 0px 0px 0px;
}
#myname {
float: right;
color: #f6c5be;
margin: 40px 0px 0px 0px;
font-size: 130%;
font-weight: 200;
}
/* ----------------------------------------------- */
.row {
display: table;
margin: 0px 5px 0px 5px;
}
[class*="col-"] {
float: none;
display: table-cell;
vertical-align: top;
}
.row div {
background: #f6c5be;
/*border: 2px solid #539e8a;*/
}
.pics img {
width: auto;
height: auto;
margin: 20px 0px 20px 0px;
display: block;
}
.main2 {
width: 100%;
}
#media-text {
float: none;
margin: 0 auto;
color: #539e8a;
}
#links-text {
float: none;
margin: 0 auto;
color: #539e8a;
}
a:link {
color: #539e8a;
}
a:visited {
color: darkolivegreen;
}
a:hover {
color: #539e8a;
}
#orderform-text {
float: none;
margin: 0 auto;
color: #539e8a;
}
input[type=text] {
border: 0;
box-shadow: 0 0 5px 4px #539e8a;
float: right;
}
input[type=date] {
border: 0;
box-shadow: 0 0 5px 4px #539e8a;
float: right;
}
input[type=tel] {
border: 0;
box-shadow: 0 0 5px 4px #539e8a;
float: right;
}
select[name=orderItems] {
border: 0;
box-shadow: 0 0 5px 4px #539e8a;
float: right;
}
textarea[name=orderBrief] {
border: 0;
box-shadow: 0 0 5px 4px #539e8a;
float: right;
}
input[type=checkbox] {
border: 0;
margin-top: 15px;
}
input[type=submit] {
border: 0;
box-shadow: 0 0 5px 4px #539e8a;
float: right;
}
<head>
<link href="https://fonts.googleapis.com/css2?
family=Open+Sans:wght#300&family=Redressed&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link type="text/css" rel="stylesheet" href="css/mysite.css">
</head>
<body>
<header>
<div id="inner_header">
<img id="logo" src="images/newlogo.png" alt="logo, a cupcake">
<h1>redacted</h1>
<div id="myname">
<p>
by redacted
</p>
</div>
</div>
</header>
<div class="container-fluid">
<div class="row">
<div id="col1" class="col-xs-3">
<div class="row" id="orderform-text">
<div class="col-xs-12">
<h2><b>Order Form</b></h2>
</div>
</div>
<form action="xxx.xxx.xxx" method="post">
<div class="tableRow">
<p></p>
</div>
<div class="tableRow">
<p>
<label for="name">Name:</label>
<input type="text" name="name">
</p>
</div>
<div class="tableRow">
<p>
<label for="address">Address:</label>
<input type="text" name="Address">
</p>
</div>
<div class="tableRow">
<p>
<label for="contactNumber">Contact Number:</label>
<input type="tel" name="contactNumber">
</p>
</div>
<div class="tableRow">
<p>
<label for="deliveryDate">Delivery Date:</label>
<input type="date">
</p>
</div>
<div class="tableRow">
<p>
<label for="orderItems">What would you like?:</label>
<select name="orderItems">
<option value="Cake">Cake</option>
<option value="Cupcakes">Cupcakes</option>
<option value="Brownies">Brownies</option>
<option value="Scones">Scones</option>
<option value="Wedding Cake">Wedding Cake</option>
<option value="Custom Order">Custom Order (detail below)</option>
</select>
</p>
</div>
<div class="tableRow">
<p>
<label for="orderBrief">Order brief:
<br>
<br>
<textarea name="orderBrief" rows="5" cols="50" placeholder="Tell me in detail what you would like to order!"></textarea></label>
</p>
</div>
<div class="tableRow">
<p>
<label for="DietaryRequirements">Dietary requirements?:
Vegan<input type="checkbox" name="dietaryRequirements" value="Vegan">
Dairy-Free<input type="checkbox" name="dietaryRequirements" value="Dairy-free (can eat egg)">
Gluten-Free<input type="checkbox" name="dietaryRequirements" value="Gluten-free"></label>
</p>
</div>
<div class="tableRow">
<p>
<label for="giftwrap">Giftwrap?
yes <input type="radio" name="giftwrap" value="yes">
no <input type="radio" name="giftwrap" value="no"></label>
</p>
</div>
<div class="tableRow">
<p>
<input type="submit" value="Place Order">
</p>
<br>
</div>
<br>
</form>
</div>
<div id="col2" class="col-xs-6">
<div class="row" id="media-text">
<div class="col-xs-12">
<h2><b>Media</b></h2>
</div>
</div>
<div class="row">
<div class="col-xs-4 pics">
<img src="images/cake1.jpg" id="picture1" class="img-responsive" alt="wedding cake">
</div>
<div class="col-xs-4 pics">
<img src="images/cake2.jpg" id="picture2" class="img-responsive" alt="birthday cake">
</div>
<div class="col-xs-4 pics">
<img src="images/cake3.jpg" id="picture3" class="img-responsive" alt="cupcakes">
</div>
</div>
</div>
<div id="Links" class="col-xs-3">
<div class="row" id="links-text">
<div class="col-xs-12">
<h2><b>Links</b></h2>
<a href="link removed">
<h3>Facebook</h3>
</a>
<a href="link removed">
<h3>5 star hygiene rating</h3>
</a>
<a href="">
<h3>Reviews!</h3>
</a>
</div>
</div>
</div>
</div>
</div>
</body>

Related

Inline flex added for input boxes not responsive

I've been trying to a series of input boxes to be inline but also to be responsive such that it does not get overlapped on the row below.
When shrinking the contents gets overlayed on top of div directly below and not sure how to fix this
/** Editable **/
.container {
display: block;
margin: auto;
}
/** Not editable onwards **/
.multiple-choice--small {
height: 24px;
padding: 2px 10px 0 36px;
}
.full {
float: left;
width: 100%;
}
.quarter,
.one-quarter {
float: left;
width: 25%;
}
.third,
.one-third {
float: left;
width: 33.33333%;
}
.form-group {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
float: left;
width: 100%;
margin-bottom: 15px;
}
input[type=number] {
-moz-appearance: textfield;
}
.form-date .form-group {
float: left;
width: 50px;
margin-right: 20px;
margin-bottom: 0;
clear: none;
}
.form-date .form-group label {
display: block;
padding-bottom: 2px;
}
.form-date .form-group input {
max-width: 100%;
}
.form-date .form-group-year {
width: 70px;
}
.form-group-error {
margin-right: 15px;
border-left: 4px solid #b10e1e;
padding-left: 10px;
}
#media (min-width: 641px) {
.form-group-error {
border-left: 5px solid #b10e1e;
padding-left: 15px;
}
}
.form-control-error {
border: 4px solid #b10e1e;
}
.error-message {
font-family: "nta", Arial, sans-serif;
font-weight: 700;
text-transform: none;
font-size: 16px;
line-height: 1.25;
color: #b10e1e;
display: block;
clear: both;
margin: 0;
padding: 2px 0;
}
<div class="container">
<div class="full" style="padding-top:10px;">
<div class="one-quarter"><span style="font-weight:bold"> t </span></div>
<div class="one-third">
<span class="multiple-choice--small" style="display: inline-flex; padding: 0;">
<input type="radio" style="min-width:24px; min-height:24px">
<label> Input A </label>
<div class="form-group">
<div class="form-date" >
<div class="form-group day" style="margin:0px">
<input style="width:40px" class="form-control">
</div>
<div class="form-group month" style="margin:0px">
<input style="width:40px" class="form-control" >
</div>
<div class="form-group year" style="margin:0px">
<input style="width:50px" class="form-control" >
</div>
</div>
</div>
</span>
</div>
<div class="one-third">
<span class="multiple-choice--small" style="display: inline-flex; padding: 0;">
<input type="radio" style="min-width:24px; min-height:24px">
<div> Input B </div>
<div class="form-group" >
<div class="form-date" style="background: blue;">
<div class="form-group day" style="margin:0px">
<input style="width:40px" class="form-control" >
</div>
<div class="form-group month" style="margin:0px">
<input style="width:40px" class="form-control" >
</div>
<div class="form-group year" style="margin:0px">
<input style="width:50px" class="form-control">
</div>
</div>
</div>
</span>
</div>
</div>
<div class="full">
<div class="one-quarter"> </div>
<div class="one-third">
<span class="multiple-choice--small" style="display: inline-flex; padding: 0;">
<input type="radio" style="min-width:24px; min-height:24px" checked>
<div> Radio A</div>
</span>
<span class="error-message" style="display:none;"></span>
</div>
<div class="one-third">
<span class="multiple-choice--small" style="display: inline-flex; padding: 0;">
<input type="radio" style="min-width:24px; min-height:24px" checked>
<div> Radio B</div>
</span>
<span class="error-message" style="display:none;"></span>
</div>
</div>
</div>
Full screen:
Responsive:
Edit: Added JSFiddle: https://jsfiddle.net/Ducking/0n8cdvtx/13/

Use the flex property on the dates class.

div under div in two-column layout

I'm making a basic citation generator mockup with two columns: one for the list of already-generated citations, and one with a form to create a new one. Each element is in a div. Because the form is shorter in height than the citation list, I'm putting an example image underneath that could be replaced with an advertisment.
However, despite placing the first column (citation list) and second (form and ad) in different divs, the ad stays underneath the citation list:
#container {
text-align: center;
}
#header {
margin-bottom: 3em;
margin-top: 2em;
}
#header h3 {
color: darkgrey;
font-size: 1em;
}
#citationList {
display: inline-block;
float: left;
margin-left: 15%;
width: 30%;
}
#citationList #citations {
border: 1px solid darkgrey;
padding: 20px;
border-radius: 15px;
margin-top: 1.5em;
}
#creationForm {
display: inline-block;
float: right;
margin-right: 15%;
width: 30%
}
#creationForm form {
border: 1px solid darkgrey;
padding: 20px;
border-radius: 15px;
margin-top: 1.5em;
}
#creationForm form label {
float: left;
}
#creationForm form input .textBox {
float: right;
}
#adSpace {
float: right;
}
<html>
<body>
<div id="container">
<div id="header">
<h1>Citation Generator</h1>
<h3>it's totally amazing</h3>
</div>
<div class="col-sm">
<div id="citationList">
<h4>Your Citations</h4>
<ul id="citations">
<li>Citations are listed here</li>
<li>This can be however long</li>
</ul>
</div>
</div>
<div class="col-sm">
<div id="creationForm">
<h4>Create a Citation</h4>
<form>
<!-- Author -->
<label for="someInput">Some input:</label>
<input id="someInput" type="text" class="textBox" />
<label for="moreInput">More input:</label>
<input id="moreInput" type="text" class="textBox" />
<label for="evenMoreInput">Even more input:</label>
<input id="evenMoreInput" type="text" class="textBox" />
<label for="muchMoreInput">Much more input:</label>
<input id="muchMoreInput" type="text" class="textBox" />
</div>
<div id="adSpace">
<img src="https://via.placeholder.com/300x300.jpg?text=Placeholder+Advertisment" />
<p>Advertisment</p>
</div>
</div>
</div>
</body>
</html>

use clear:both; as shown below
#adSpace {
float: right;
clear: both;
}

Here is the corrected CSS and HTML.
#container {
text-align: center;
}
#header {
margin-bottom: 3em;
margin-top: 2em;
}
#header h3 {
color: darkgrey;
font-size: 1em;
}
.contentContainer {
width:1200px;
margin:0 auto;
display: inline-block;
}
#citationList {
display: inline-block;
float: left;
width: 100%;
}
#citationList #citations {
border: 1px solid darkgrey;
padding: 20px;
border-radius: 15px;
margin-top: 1.5em;
}
#creationForm {
display: inline-block;
float: right;
width: 100%
}
#creationForm form {
border: 1px solid darkgrey;
padding: 20px;
border-radius: 15px;
margin-top: 1.5em;
}
.row {
margin:10px -15px;
}
#creationForm form label {
float: left;
width: 30%;
}
#creationForm form input.textBox {
float: left;
}
#adSpace {
float: left;
}
<html>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<body>
<div id="container">
<div id="header">
<h1>Citation Generator</h1>
<h3>it's totally amazing</h3>
</div>
<div class="contentContainer">
<div class="col-md-6 col-sm-6">
<div id="citationList">
<h4>Your Citations</h4>
<ul id="citations">
Looks like you don't have any citations made yet!
</ul>
</div>
</div>
<div class="col-md-6 col-sm-6">
<div id="creationForm">
<h4>Create a Citation</h4>
<form>
<!-- Author -->
<div class="row">
<label for="authorFirst">Author's first name:</label>
<input id="authorFirst" type="text" class="textBox" />
</div>
<div class="row">
<label for="authorLast">Author's last name:</label>
<input id="authorLast" type="text" class="textBox" />
</div>
<br />
<!-- Website -->
<div class="row">
<label for="pageTitle">Title of page/article:</label>
<input id="pageTitle" type="text" class="textBox" />
</div>
<div class="row">
<label for="siteTitle">Title of website:</label>
<input id="siteTitle" type="text" class="textBox" />
</div>
<br />
<!-- Dates -->
<div class="row">
<label for="datePublished">Date published:</label>
<input id="datePublished" type="text" class="textBox" />
</div>
<div class="row">
<label for="dateAccessed">Date accessed:</label>
<input id="dateAccessed" type="text" class="textBox" />
</div>
</form>
</div>
<div id="adSpace">
<img src="https://via.placeholder.com/300x300.jpg?text=Placeholder+Advertisment" />
<p>Advertisment</p>
</div>
</div>
</div>
</div>
</body>
</html>

There is too much space in a div?

So I am looking for the reason why a div in-particular has so much space at the bottom in my local preview, but in jsfiddle it does not.
In the JSFiddle it's the bottom div that's purple, but this is how it shows up in my local copy: http://prntscr.com/ingfwa
JSFiddle: https://jsfiddle.net/eaLpf4f5/2/
Either that or the extra whitespace in the JSFiddle is the extra space in my local copy just colored purple? I've tried inspecting the code and it seems like it might be something with the last col-md-2 but that's a column, not a row, so I'm not sure. Also tried removing it to no effect.
I am aware the toolbar is broken right now as well, not focusing on that at the moment. Also I am aware the CSS is out of whack in terms of order of classes and ids in the HTML and CSS.
#div3{
background-color: purple;
}
.formdiv{
float:left;
position: relative;
top: -25em;
height: 25em;
}
.p6{
text-align:center;
color: white;
}
.bar5{
border: 3px gray solid;
width: 65%;
position: relative;
top: 1em;
left: 10em;
}
#lt3{
font-size: 2.9em;
position: relative;
margin-left: 2.2em;
top: -0.5em;
color:white;
font-family: Acme, sans-serif;
}
#lt4{
font-size: 2.9em;
position: relative;
margin-left: 15.5em;
top: -2.2em;
color:white;
font-family: Acme, sans-serif;
}
.contacttextdiv{
width: 10em;
position: relative;
left: 30em;
top: -5em;
font-size: 1.3em;
}
input, textarea {
padding: 9px;
border: solid 1px #E5E5E5;
outline: 0;
font: normal 13px/100% Verdana, Tahoma, sans-serif;
width: 200px;
background: #FFFFFF;
}
textarea
{
width: 400px;
max-width: 400px;
height: 150px;
line-height: 150%;
}
input:hover, textarea:hover,
input:focus, textarea:focus {
border-color: #C9C9C9;
}
.form label {
margin-left: 10px;
color: #999999;
}
.submit input {
width: auto;
padding: 9px 15px;
background: #617798;
border: 0;
font-size: 14px;
color: #FFFFFF;
}
input, textarea {
box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;
-moz-box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;
-webkit-box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;
}
input, textarea {
background: -webkit-gradient(linear, left top, left 25, from(#EEEEEE), to(#FFFFFF));
background: -moz-linear-gradient(top, #EEEEEE), #FFFFFF 25px);
}
input:hover, textarea:hover,
input:focus, textarea:focus {
-webkit-box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 8px;
}
.submit input {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
}
<!DOCTYPE html>
<html>
<body>
<head>
<link href="https://fonts.googleapis.com/css?family=Acme" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<title></title>
</head>
<div class="container">
<div class="row">
<div class="col-xs-12" id="navbar">
Home
News
Contact
</div>
</div>
<div class="row">
<div class="col-md-2">Test</div>
<div class="col-md-8" id="div1">
<div>
<p id="p1"><strong>Front-end developer and UX/UI designer, with practical experience in project management, branding strategy, and creative direction; devoted to functional programming and information architecture.</strong></p>
<p id="p2"><div class="bar"></div>
<p id="lt1"><strong></></strong></p>
<p class="p2"><strong> Web Developer - User Experience Designer</strong></p>
<img src="LOGO.jpg" class="pic1"/>
</div>
</div>
<div class="col-md-2">Test</div>
</div>
<div class="row">
<div class="col-md-2"></div>
<div class="col-md-8" id="div2">
<p class="p4"><strong>Portfolio</strong></p>
<div class="bar2"></div>
<div class="bar3"></div>
<p id="lt2"><strong></></strong></p>
<img src="fakesample1.jpg" class="pic2"/>
<img src="fakesample2.jpg" class="pic3"/>
<img src="fakesample3.jpg" class="pic4"/>
<img src="fakesample4.jpg" class="pic5"/>
</div>
<div class="col-md-2"></div>
</div>
<div class="row">
<div class="col-md-2"></div>
<div class="col-md-8" id="div3">
<p class="p6"><strong>Contact Me</strong></p>
<p id="p2"><div class="bar5"></div>
<p id="lt3"><strong></></strong></p>
<p id="lt4"><strong></></strong></p>
<div class="contacttextdiv">
<p class="contacttext"><strong>Contact me here! If you want me to do web design work, walk your dog, pet your cat, water your plants, or just have a chat! This is the place to do it! No spam please, thanks.</p></strong>
</div>
<div class="formdiv">
<form class="form">
<p class="name">
<input type="text" name="name" id="name" />
<label for="name">Name</label>
</p>
<p class="email">
<input type="text" name="email" id="email" />
<label for="email">E-mail</label>
</p>
<p class="web">
<input type="text" name="web" id="web" />
<label for="web">Website</label>
</p>
<p class="text">
<textarea name="text"></textarea>
</p>
<p class="submit">
<input type="submit" value="Send" />
</p>
</form>
</div>
<div class="col-md-2"></div>
</div>
<div class="row">
<div class="col-xs-12" id="bottombar1">About This Page</div>
<div class="col-xs-12"></div>
</body>
</html>

Change height
.formdiv {
float: left;
position: relative;
top: -25em;
height: 1em;
}
https://jsfiddle.net/eaLpf4f5/10/

Bootstrapped webpage has input disabled due to position:relative

hello I one simple but annoying problem. I managed to use css and bootsatrap to create the responsive webpage that i wanted. However, when i used position:relative my input (text field) got disabled. Any idea why?
<div class="col-md-offset-2 col-md-8 text-center">
<div class="container-fluid">
<div id="logo">
<img class="img-responsive" src="uv.png">
</div>
<div class="login-form">
<h1>United Volunteers</h1>
<div class="form-group">
<label class="input-title">Username</label>
<input type="text" class="form-input" placeholder="Username">
</div>
<div class="form-group">
<label class="input-title">Password</label>
<input type="password" class="form-input" placeholder="Password">
</div>
</div>
</div>
</div>
.login-form {
top:90px;
position:relative;
box-sizing: border-box;
margin: 25px auto;
margin-bottom:0px;
width: 100%;
max-width:400px;
background-color: white;
padding: 100px 50px 50px 50px;
box-shadow: 1px 5px 2px #330000;
z-index: -1;
}
.form-input {
width: 100%;
display: block;
height: 35px;
padding: 6px 12px;
font-size: 12px;
font-family: sans-serif;
vertical-align: middle;
border: 1px solid #ccc;
border-radius: 4px;
background-color: #f2f2f2;
line-height: 1.5;
}

This is because of z-index: -1;. Its set to negative value.
Just make it positive like:
.login-form {
z-index: 1;
}
Or look at the snippet below:
.login-form {
top:90px;
position:relative;
box-sizing: border-box;
margin: 25px auto;
margin-bottom:0px;
width: 100%;
max-width:400px;
background-color: white;
padding: 100px 50px 50px 50px;
box-shadow: 1px 5px 2px #330000;
z-index: 1;
}
.form-input {
width: 100%;
display: block;
height: 35px;
padding: 6px 12px;
font-size: 12px;
font-family: sans-serif;
vertical-align: middle;
border: 1px solid #ccc;
border-radius: 4px;
background-color: #f2f2f2;
line-height: 1.5;
}
<div class="col-md-offset-2 col-md-8 text-center">
<div class="container-fluid">
<div id="logo">
<img class="img-responsive" src="uv.png">
</div>
<div class="login-form">
<h1>United Volunteers</h1>
<div class="form-group">
<label class="input-title">Username</label>
<input type="text" class="form-input" placeholder="Username">
</div>
<div class="form-group">
<label class="input-title">Password</label>
<input type="password" class="form-input" placeholder="Password">
</div>
</div>
</div>
</div>
Hope this helps!

Footer and container inside each other when I'm on small sized screen

I've created a login page, everything seems normal when the page is maximized but when I'm on xs and sm sized screen my footer and content area goes inside of each other and there's a gap at the bottom how may I solve this problem?
https://jsfiddle.net/tLhy3av1/
Full Code:
.navbar-default.navbar-fixed-top {
background-color: #FFFFFF;
border-color: #E7E7E7;
font-family: gesta;
font-size: 20px;
padding-bottom: 10px;
}
.container.top {
margin-top: 50px;
}
.navbar-header.topHeader {
margin-left: 50%;
}
.mid {
width: 100%;
height: 497px;
background-color: #F1F2F4;
margin-top: 110px
}
.myFooter {
margin-bottom: 0px;
width: 100%;
height: 50px;
background-color: #2F2F2F;
border-top: 2px inset #F1F2F4;
}
.formSignIn {
width: 25%;
height: 100%;
margin: 60px auto 30px auto;
}
.form-signin-heading {
color: #8F95A3;
font-weight: 400;
}
.btn {
font-size: 1.1em;
background-color: #F04B14;
border: 1px solid #CE3D0D;
background-color: #f04b14;
box-shadow: 0px -1px 0px #CE3D0D inset;
border-radius: 0;
text-align: center;
}
.btn:hover {
background-color: #F04B14;
box-shadow: 0px -1px 0px #CE3D0D inset;
border: 1px solid #CE3D0D;
background-color: #F47E57;
}
.forget {
margin-top: 10px;
float: right;
}
a {
font-weight: 400;
color: #2693CE;
}
a:hover {
font-weight: 400;
color: #2693CE;
}
.checkbox {
display: inline-block;
}
.formSignIn p {
margin-top: 30px;
text-align: center;
}
#name {
text-align: center;
color: #8F95A3;
font-family: arial;
font-weight: 400px;
font-size: 15px;
}
#bottomLinks a {
text-decoration: none;
color: #8F95A3;
font-family: arial;
font-weight: 400px;
}
#bottomLinks a:hover,
bottomLinks a:focus,
bottomLinks a:active {
text-decoration: underline;
color: #535865;
font-family: arial;
font-weight: 400px;
}
.break {
clear: both;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<body>
<!-- Fixed navbar -->
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container top">
<div class="navbar-header topHeader">
<a class="navbar-brand" href="index.html">Logo</a>
</div>
</div>
</nav>
<div class="container mid">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12">
<form class="form-signin formSignIn">
<h4 class="form-signin-heading">Log in</h4>
<br>
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12">
<label for="inputEmail" class="sr-only">Email address</label>
<input type="email" id="inputEmail" class="form-control" placeholder="Email address" required autofocus>
<br>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12">
<label for="inputPassword" class="sr-only">Password</label>
<input type="password" id="inputPassword" class="form-control" placeholder="Password" required>
<br>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12">
<div class="checkbox">
<label>
<input type="checkbox" value="remember-me">Remember me
</label>
</div>
<div class="forget">
Forgot password?
</div>
</div>
</div>
<br>
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12">
<button class="btn btn-lg btn-primary btn-block" type="submit">Log in</button>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12">
<p>Not a member yet? Sign Up
</p>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12">
<p id="name">© Biz Yapalım <span id="bottomLinks"> Privacy Terms</span>
</div>
</div>
</form>
</div>
</div>
</div>
<div class "break">
</div>
<footer class="container myFooter">
</footer>
<!--Javascript-->
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
</body>

On your form set width to px or some other fixed value since percentage is from the width of a window and will always be a trouble:
.formSignIn {
width: 200px; // 25%
}
Beside that, since you are covering more resolutions set some properties through media queries where you can stay with % value.