Develop Reference

Collapsed navbar not closing on button click

I know there are similar questions posted but the solutions aren't working for me. Can anyone help me take a look?
I tried shifting the data-toggle and data-target into ahref too but it doesn't work. Not sure if it has anything to do with the css. Thanks for the help in advance!
.navbar a {
text-decoration: none;
color: black;
}
.navbar a.navbar-brand {
height: inherit;
line-height: inherit;
padding-top: 25px;
font-size: 32px;
text-transform: uppercase;
font-weight: 400;
letter-spacing: 2px;
}
.navbar a.navbar-brand span {
font-size: 38px;
font-weight: 700;
}
.navbar {
margin: 0 auto;
text-align: center;
}
.nav {
height: 52px;
width: 100%;
background-color: #4679b2;
position: relative;
z-index: 10;
}
.nav>.nav-header {
display: inline;
}
.nav>.nav-header>.nav-title {
display: inline-block;
font-size: 22px;
color: #fff;
padding: 7px 10px 10px 10px;
}
.nav>.nav-btn {
display: none;
}
.nav>.nav-links {
display: inline;
float: right;
font-size: 18px;
}
.nav>.nav-links>a {
display: inline-block;
padding: 14px 20px 12px 10px;
text-decoration: none;
color: #efefef;
}
.nav>.nav-links>a:hover {
background-color: rgba(0, 0, 0, 0.3);
}
.nav>#nav-check {
display: none;
}
#media (max-width:850px) {
.nav>.nav-btn {
display: inline-block;
position: absolute;
right: 0px;
top: 0px;
}
.nav>.nav-btn>label {
display: inline-block;
width: 50px;
height: 50px;
padding: 13px;
}
.nav>.nav-btn>label:hover {
background-color: rgba(0, 0, 0, 0.3);
}
.nav>.nav-btn>label>span {
display: block;
width: 25px;
height: 10px;
border-top: 2px solid #eee;
}
.nav>.nav-links {
position: absolute;
display: block;
width: 100%;
background-color: #333;
height: 0px;
transition: all 0.3s ease-in;
overflow-y: hidden;
top: 50px;
}
.nav>.nav-links>a {
display: block;
width: 100%;
}
.nav>#nav-check:not(:checked)+.nav-links {
height: 0px;
}
.nav>#nav-check:checked+.nav-links {
height: calc(100vh - 50px);
overflow-y: auto;
}
}
<div class="nav-links" data-toggle="collapse" data-target=".nav-collapse.in">
Auditorium
Exhibition
Hotel
</div>

I'm not sure, but I think the data-target attribute should reference an id. You referenced .nav-collapse.in, which is a class.
Try to give your nav-bar an id.

SoundCloud Stream Pause Button not Working

Here's my CodePen: https://codepen.io/tremolocreative/pen/zZJjYN
And the source is below. I just can't seem to get the pause button to work. All it does is restart a duplicate stream on top of the existing.
I've been scratching my head trying to get this to work, any help would be much appreciated.
HTML
<script src="https://connect.soundcloud.com/sdk-2.0.0.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<div id="player">
<button href="#" id="stream"></button>
</div>
CSS
button {
background: url('//cdn.shopify.com/s/files/1/1055/5530/t/8/assets/play-pause-sprite.svg?2157621096199230646');
background-size: cover;
background-position: top left;
background-repeat: no-repeat;
width: 20px;
height: 20px;
border: 0;
outline: 0;
display: block;
}
button.pause-sprite {
background-position: top right;
}
JS
var client_id = '278594df9a311b2a1a56251b3a2b0fbe';
var track_id = '293605256';
var is_playing = false;
var player;
SC.initialize({
client_id: client_id
});
$(document).ready(function() {
$('#stream').on('click', function() {
$(this).toggleClass('pause-sprite');
SC.stream('/tracks/' + track_id, function(sound) {
player = sound;
if (is_playing === true) {
player.pause();
is_playing = false;
console.log(is_playing);
} else if (is_playing === false){
player.play();
is_playing = true;
console.log(is_playing);
}
});
});
});

I already posted a link to a codepen of this code (tweaked here to show your bg icon) The toggle icon doesn't work in the fiddle (but i can't spend MORE time on it, I'm on holiday in ~12 hrs).
THe PAUSE works!
/*jquery is the same - answer was too long, see [fiddle][2]*/
/* LAYOUT *
-----------------------------------------------*/
.cf:before,
.cf:after {
content: " ";
/* 1 */
display: table;
/* 2 */
}
.cf:after {
clear: both;
}
.cf {
*zoom: 1;
}
* {
box-sizing: border-box;
}
#small: ~"screen and (min-width: 20em)";
#medium: ~"screen and (min-width: 38em)";
#large: ~"screen and (min-width: 48em)";
#extra-large: ~"screen and (min-width: 58em)";
#max: ~"screen and (min-width: 68em)";
/* COLORS *
-----------------------------------------------*/
#white: #f8f8f8;
#red: #dd4444;
#red-dark: #bf3d3f;
#red-darker: #9c3538;
#black: #1f1f1f;
#grey: #4d4d4d;
body {
margin: 0;
background-color: #grey;
color: white;
text-align: center;
.display;
#media #medium {
font-size: 112.5%;
}
}
.wrapper {
width: 90%;
max-width: 1200px;
margin: 0 auto;
overflow: hidden;
}
p.small {
font-size: 0.8em;
}
a {
color: #red-darker;
&:hover {
color: #red-dark
}
}
a.sc-player,
.button {
display: inline-block;
background-image: url('//cdn.shopify.com/s/files/1/1055/5530/t/8/assets/play-pause-sprite.svg?2157621096199230646');
//background: rgba(19, 19, 19, 0.14);
border-radius: 4px;
padding: 0.2em 0.2em;
text-align: center;
text-decoration: none;
color: red;
font-size: 1.5em;
.transition;
&:hover {
//background: #red-darker;
background-image: url('//cdn.shopify.com/s/files/1/1055/5530/t/8/assets/play-pause-sprite.svg?2157621096199230646');
color: red;
}
}
.main {
margin-bottom: 4em;
}
.transition {
transition: all 0.3s ease-out;
}
/* FONTS *
-----------------------------------------------*/
#import url(http://fonts.googleapis.com/css?family=Sacramento|Montserrat);
.display {
font-family: 'Montserrat', sans-serif;
}
h1 {
margin-top: 50px;
.display;
text-transform: uppercase;
font-size: 2em;
line-height: 1;
-webkit-font-smoothing: antialiased;
position: relative;
#media #small {
font-size: 2.5em;
}
#media #medium {
font-size: 4.5em;
margin-top: 100px;
}
#media #max {
font-size: 6em;
}
}
/* SOUNDCLOUD PLAYER *
-----------------------------------------------*/
.sc-player {
position: relative;
margin-bottom: 2em;
.cf;
a {
text-decoration: none;
color: #fff;
}
ol,
li {
margin: 0;
padding: 0;
list-style-position: inside;
}
}
/* Artworks */
.sc-player .sc-artwork-list {
display: none;
float: left;
width: 40%;
margin-bottom: 3%;
background-color: transparent;
list-style-type: none;
position: relative;
height: 100%;
li {
list-style-type: none;
display: none;
}
li.active {
list-style-type: none;
display: block;
}
}
.sc-player .sc-artwork-list li img,
.sc-player .sc-artwork-list li div {
list-style-type: none;
width: 100%;
height: auto;
}
/* controls */
.sc-player .sc-controls {
display: block;
}
.sc-player .sc-controls a {
text-indent: -9999px;
content: '';
display: block;
background: #red-dark;
background-image: url('//cdn.shopify.com/s/files/1/1055/5530/t/8/assets/play-pause-sprite.svg?2157621096199230646');
background-size: cover;
border-radius: 50%;
width: 75px;
height: 75px;
margin: 0 auto;
position: relative;
.transition;
#media #medium {
width: 110px;
height: 110px;
}
&:hover {
background: #red-darker;
background-image: url('//cdn.shopify.com/s/files/1/1055/5530/t/8/assets/play-pause-sprite.svg?2157621096199230646');
}
&:after {
content: '';
display: block;
position: absolute;
top: 50%;
margin-top: -50px;
left: 50%;
margin-left: -50px;
z-index: 1;
//background: url('http://s3-us-west-2.amazonaws.com/s.cdpn.io/35376/play-pause.png');
background-image: url('//cdn.shopify.com/s/files/1/1055/5530/t/8/assets/play-pause-sprite.svg?2157621096199230646');
background-position: top right;
background-size: 100px auto;
border-radius: 50%;
width: 100px;
height: 100px;
#media #medium {
width: 90px;
height: 90px;
margin-top: -90px;
margin-left: -90px;
background-size: 180px auto;
}
}
}
.sc-player .sc-controls a.sc-pause:after {
background-position: bottom;
}
.sc-scrubber .sc-time-indicators {
background: #red-darker;
background: rgba(19, 19, 19, 0.22);
color: #fff;
border-radius: 4px;
padding: 7px;
text-align: right;
}
.sc-player .sc-controls a.sc-pause {
display: none;
}
.sc-player.playing .sc-controls a.sc-play {
display: none;
}
.sc-player.playing .sc-controls a.sc-pause {
display: block;
}
/* scrubber */
.sc-scrubber {
position: relative;
float: right;
width: 100%;
margin: 0.5em 0;
border-radius: 4px;
#media #medium {
//margin-top: 20px;
}
.sc-time-span {
height: 50px;
position: relative;
}
.sc-buffer,
.sc-played {
height: 50px;
position: absolute;
top: 0;
}
.sc-time-indicators {
position: absolute;
right: 0;
top: -48px;
}
.sc-time-span {
//background-color: #666;
border-radius: 4px;
overflow: hidden;
}
.sc-volume-slider {
background-color: #red-dark;
background-color: rgba(19, 19, 19, 0.12);
border-radius: 2px;
}
.sc-volume-slider .sc-volume-status {
background-color: #red-darker;
background-color: rgba(19, 19, 19, 0.22);
border-right: 1px solid #red-darker;
border-right: 1px solid rgba(19, 19, 19, 0.22);
//border-right: 1px solid white;
}
.sc-waveform-container {
z-index: 800;
width: 50%;
position: absolute;
}
.sc-time-span img {
height: 50px;
width: 50%;
border-radius: 4px;
}
.sc-buffer {
background: #red-dark;
background: rgba(19, 19, 19, 0.12);
z-index: 1;
position: absolute;
}
.sc-played {
background: #red-darker;
background: rgba(19, 19, 19, 0.22);
z-index: 799;
}
}
/* volume control */
.sc-volume-slider {
top: -35px;
left: 0px;
position: absolute;
width: 75px;
height: 20px;
background-color: white;
.sc-volume-status {
position: absolute;
width: 0%;
height: 10px;
top: 0;
left: 0;
}
}
/* tracks */
/* Track listings*/
.sc-player ol.sc-trackslist {
position: relative;
width: 50%;
overflow: auto;
li {
width: 50%;
cursor: pointer;
margin-bottom: 0.5em;
padding: 4%;
background: #red-dark;
background: rgba(19, 19, 19, 0.12);
color: white;
border-radius: 4px;
transition: background 0.3s ease-in;
text-align: left;
#media #medium {
padding: 2%;
}
&:last-child {
margin-bottom: 0;
}
a {
font-size: 1.125em;
#media #small {}
#media #medium {
font-size: 2em;
}
}
&:hover {
background: #red-darker;
background: rgba(19, 19, 19, 0.22);
}
&.active {
background: #red-darker;
background: rgba(19, 19, 19, 0.32);
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
a {
color: #fff;
}
}
}
}
.sc-track-duration {
float: right;
margin-top: 0.25em;
#media #medium {
margin-top: 0.5em;
}
}
/* Track info*/
.sc-player .sc-info {
position: relative;
margin-bottom: 2em;
padding: 1% 3%;
#media #medium {
margin-top: 1em;
margin-bottom: 3em;
}
h3 {
font-size: 2em;
margin-bottom: 0.5em;
}
h4 {
display: none;
}
.sc-info a {
color: #fff;
}
}
p {
max-width: 19em;
max-width: 19rem;
margin: 0 auto 1em;
line-height: 1.5;
text-align: left;
}
.sc-player .sc-info-toggle,
.sc-player .sc-info-close {
display: none;
}
/* utilities */
.sc-player .hidden {
//display: none;
}
.sc-player-engine-container {
width: 1px;
height: 1px;
position: fixed;
top: 2px;
left: 2px;
}
.sc-player .sc-info-toggle {
background: #22B573;
color: #fff;
border-radius: 1px;
padding: 4px;
}
.sc-player .sc-info-toggle:hover {
background: #333;
color: #fff;
}
.sc-player .sc-info-close {
background: #22B573;
border-radius: 4px;
padding: 2px 4px;
font-weight: bold;
}
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<body>
<header class="site-header wrapper">
<h1>Soundcloud Player</h1>
</header>
<section role="main" class="main wrapper">
Listen
</section>
</body>

Having issues making the page responsive

What I need is for the page to be fully responsive and for some reason it isn't.
Mobile view
Here's the CSS and HTML. We are generating the page using React.
/* CSS Document */
/*
#font-face {
font-family: futura;
src: url("../fonts/Futura-Book.ttf");
}
#font-face {
font-family: futura italic;
src: url("../fonts/Futura_ICG_Book_Oblique.ttf");
font-style: italic, oblique;
}
*/
/*--------------------------------ALL PAGES----------------------------------------*/
/*Body Style*/
* {
font-family: futura, verdana;
box-sizing: border-box;
}
h1 {
font-family: futura, verdana;
text-align: center;
}
body {
margin: auto;
min-width: 600px;
}
/*NAVIGATION STYLE*/
nav {
list-style-type: none;
padding: 0px;
overflow: hidden;
background-color: #4a486d;
margin: 0 auto;
min-width: 100px;
max-width: 950px;
text-align: center;
}
.navcontainer {
width: 100%;
background-color: #4a486d;
}
#search {
width: 20px;
height: 15px;
padding-right: 6px;
}
nav a {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
nav a:hover {
background-color: #1c1c1c;
text-decoration: none;
color: white;
}
nav a:visited {
background-color: #1c1c1c;
text-decoration: none;
color: white;
}
/*JUMBOTRON STYLE*/
.jumbotron {
text-align: center;
border-radius: 25px;
background-color: white;
padding: 0px;
margin: 0 auto;
margin-bottom: 20px;
margin-top: 10px;
clear: both;
}
/*CONTAINER STYLE*/
.container {
text-align: center;
background-color: #f5f4f9;
padding: 2%;
clear: both;
width: 100%;
margin: 0 auto;
}
/*BACKGROUND COLOR*/
#backcol {
background-color: #f5f4f9;
height: 100%;
}
/*LEFT LINKS STYLING*/
#sidenav {
list-style-type: none;
margin: 0;
padding: 5px;
padding-left: 10px;
width: 16%;
background-color: #f5f4f9;
position: absolute;
height: 55%;
overflow: auto;
clear: both;
text-align: left;
float: left;
border-radius: 3px;
}
li a {
display: block;
color: #1c1c1c;
padding: 8px 0 0px 25px;
text-decoration: none;
padding: 5px;
}
li a.active {
text-decoration: none;
font-weight: bold;
}
li a:hover:not(.active) {
background-color: #1c1c1c;
color: white;
text-decoration: none;
}
#leftNavPadding {
padding: 10px;
}
#searchbar {
height: 15px;
width: 15px;
margin: 1px;
}
#quick {
border-radius: 3px;
margin: 0;
padding: 0;
position: absolute;
clear: both;
float: left;
}
/*PIC STYLING*/
#pic {
width: 50%;
stroke: #8e8db7;
stroke-width: 4;
margin: auto;
}
#pic2 {
width: 30%;
stroke: #8e8db7;
stroke-width: 4;
margin: auto;
padding-top: 45px;
padding-bottom: 57px;
}
/*BUTTON STYLE*/
button {
background-color: #6e6e9a;
border: none;
color: white;
padding: 5px 15px;
text-align: center;
display: inline-block;
font-size: 16px;
cursor: pointer;
border-radius: 3px;
margin: 4px;
}
button:hover {
background-color: #1c1c1c;
}
.vpButton {
padding-top: 0px;
}
.profilesButton {
margin-top: 0px;
}
/*FORM STYLE*/
form {
text-align: center;
padding-top: 60px;
}
label.formLabel {
display: inline-block;
width: 300px;
font-size: 18px;
font-weight: bold;
}
#fieldset {
margin-top: -30px;
border: 2px solid #515078;
}
#legend {
color: #515078;
font-size: 24px;
}
#fieldsetBorder {
border: 1px dotted #8685a7;
}
#fieldsetBorder2 {
border: 1px dashed #8685a7;
}
#legendLeft {
text-align: left;
}
.astrex {
color: red;
}
.trcolor {
background-color: #8a87a2;
}
/*FOOTER*/
footer {
background-color: #b1b2d2;
color: #1c1c1c;
text-align: center;
height: 70px;
clear: both;
margin-top: 10px;
}
footer p {
margin-right: 140px;
}
#footlogo {
float: left;
margin-left: 0px;
height: 70px;
width: 190px;
}
/*SOCIAL MEDIA BUTTONS IN FOOTER*/
.socialMediaButtons {
float: right;
margin: 1%;
padding-top: 9px;
}
.socialMediaButtons:hover {
background-color: #1c1c1c;
}
/*CONTAINER STYLE*/
#containerWidth {
width: 960px;
}
/*PROFILE PAGE STYLE*/
#title {
color: white;
font-weight: bold;
font-size: 30px;
text-align: center;
}
#title2 {
color: white;
font-weight: bold;
font-size: 20px;
text-align: center;
}
#title3 {
color: white;
font-weight: bold;
font-size: 20px;
margin-top: 20%;
text-align: left;
padding-left: 20px;
}
#text {
color: white;
font-size: 15px;
text-align: left;
padding-left: 20px;
}
.topPad {
padding-top: 40px;
}
.bottomMargin {
margin-bottom: 800px;
}
.empty {
height: 20px;
}
/*---------------------------------------------------------------------*/
/*--------------------------------INDEX PAGE----------------------------------------*/
#topDiv {
float: left;
margin: 0px;
background-color: #555b8f;
}
#arrow1 {
height: 55%;
width: 55%;
}
#introheading {
font-family: futura bold;
color: white;
font-size: 70px;
top: 40%;
right: 18%;
float: right;
position: absolute;
}
#introtext {
width: 26%;
position: absolute;
top: 70%;
right: 16%;
float: right;
font-family: Futura, sans-serif;
font-size: 15px;
color: white;
text-align: justify;
float: right;
clear: left;
line-height: 1.5em;
}
#bottomDiv {
float: right;
margin: 0px;
background-color: #555b8f;
padding-bottom: 20%;
}
#bottomArrow {
float: right;
padding: 0px;
margin: 0px;
right: 0px;
height: 55%;
width: 55%;
}
#heading2 {
font-family: futura bold;
color: white;
left: 150px;
top: 130px;
position: relative;
}
#secondHeading {
font-size: 70px;
}
#endtext {
width: 30%;
position: relative;
left: 140px;
top: 180px;
font-family: futura;
font-size: 15px;
color: white;
text-align: justify;
line-height: 1.5em;
}
#heximg {
left: 170px;
top: 20px;
position: relative;
}
#hexstyle {
height: 40%;
width: 40%;
margin-bottom: 50px;
}
/*---------------------------------------------------------------------*/
/*--------------------------------LOGIN PAGE START----------------------------------------*/
#divContainer2 {
height: 550px;
width: 550px;
margin: 0 auto;
position: relative;
}
#introDiv {
height: 550px;
width: 550px;
margin: 0 auto;
position: absolute;
text-align: center;
padding-top: 120px;
background-image: url(../img/login.jpg);
background-repeat: no-repeat;
background-size: 550px 550px;
}
/*BUTTON STYLING*/
.buttonlayout {
width: 150px;
height: 60px;
padding: 3.5px 3px;
font-size: 20px;
font-family: futura;
margin: 10px auto;
}
#guestButton {
margin-top: -1px;
padding: -3.5px -3px;
}
.displayBlock {
display: block;
width: 150px;
height: 60px;
padding: 3.5px 3px;
margin: 0 auto;
margin-bottom: 20px;
font-size: 20px;
font-family: futura;
}
#logInDiv {
height: 550px;
width: 550px;
margin: 0 auto;
position: absolute;
padding-top: 80px;
background-image: url(../img/login.jpg);
background-repeat: no-repeat;
background-size: 550px 550px;
}
#logInForm {
margin: 0 auto;
width: 350px;
}
input.form {
font-family: futura italic;
padding: 3px;
margin: 10px;
border-radius: 3px;
border: 1px solid #1c1c1c;
height: 30px;
font-size: 20px;
width: 200px;
text-align: center;
color: #6e6e9a;
}
#registerDiv {
height: 550px;
width: 550px;
margin: 0 auto;
position: absolute;
text-align: center;
background-image: url(../img/login.jpg);
background-repeat: no-repeat;
background-size: 550px 550px;
}
#registerForm {
text-align: center;
margin-top: 80px;
}
/*--------------------------------LOGIN PAGE FINISH----------------------------------------*/
/*--------------------------------MY PROFILE----------------------------------------*/
/* hide nav button */
#hide {
float: left;
margin: 5px;
}
.clear {
clear: both;
}
/*HEXAGON PROFILE IMAGE STYLING*/
svg {
width: 19%;
stroke: #8e8db7;
stroke-width: 4;
}
#profileInfo {
width: 90%;
height: 750px;
background-color: #8a83d1;
margin: 0 auto;
z-index: 3;
position: relative;
border-radius: 3px;
overflow: hidden;
padding: 10px;
}
.profileback {
text-align: center;
background-color: #f5f4f9;
padding: 2%;
clear: both;
width: 100%;
margin: 0 auto;
background-image: url(../img/back.jpg);
background-repeat: no-repeat;
}
input[type="file"] {
display: none;
}
.custom-file-upload {
padding: 6px 12px;
cursor: pointer;
background-color: none;
position: absolute;
right: 70px;
width: 54px;
}
/*---------------------------------------------------------------------*/
/*--------------------------------POD SEARCH PAGE START---------------------------------------*/
#basictxt {
text-align: left;
padding: 11px;
padding-bottom: 24px;
margin: 5px;
}
#quote {
text-align: left;
color: #4a486d;
font-size: 20px;
padding: 10px;
padding-top: 65px;
}
.hireButton {
padding-top: 5px;
width: 70px;
padding: 5px;
}
#hireSize {
width: 70px;
height: 70px;
}
/*--------------------------------POD SEARCH PAGE FINISH---------------------------------------*/
/*--------------------------------POD PROFILE PAGE START----------------------------------------*/
#enquire {
width: 150px;
height: 50px;
margin: 0px;
margin-top: -10px;
}
#divContainer {
width: 700px;
height: 700px;
margin: 0 auto;
background-color: #f5f4f9;
margin-bottom: 5%;
}
#skills {
width: 330px;
height: 750px;
background-color: #6e6e9a;
margin: 0 auto;
float: left;
z-index: 2;
position: relative;
border-radius: 3px;
overflow: hidden;
}
#skilllist {
color: white;
font-weight: bold;
font-size: 20px;
margin-top: 20%;
text-align: left;
padding-left: 20px;
list-style-type: none;
}
#bio {
width: 330px;
height: 750px;
background-color: #8a83d1;
margin: 0 auto;
float: left;
margin-left: -150px;
z-index: 3;
position: relative;
border-radius: 3px;
overflow: hidden;
padding: 10px;
}
#workHistory {
width: 330px;
height: 750px;
background-color: #6a6cae;
margin: 0 auto;
float: left;
margin-left: -150px;
z-index: 1;
position: relative;
border-radius: 3px;
overflow: hidden;
text-align: center;
}
/*--------------------------------POD PROFILE PAGE FINISH---------------------------------------*/
/*--------------------------------BOOK NOW PAGE START----------------------------------------*/
label {
display: inline-block;
width: 220px;
font-size: 26px;
font-weight: bold;
}
input.form1 {
font-family: futura italic;
padding: 3px;
margin: 10px;
border-radius: 3px;
border: 1px solid #1c1c1c;
height: 30px;
font-size: 16px;
width: 200px;
text-align: center;
color: #6e6e9a;
}
#booknowFieldset {
border: 1px dashed;
}
/*--------------------------------BOOK NOW PAGE FINISH----------------------------------------*/
/*--------------------------------CURRENT BOKINGS PAGE START---------------------------------------*/
#currentBookingTable,
.bookingtr,
.bookingtd {
text-align: center;
margin: 10px;
}
.bookingtd {
max-width: 400px;
min-width: 50px;
}
/*--------------------------------CURRENT BOKINGS PAGE FINISH---------------------------------------*/
/*--------------------------------HISTORIC BOOKING----------------------------------------*/
#Table,
th,
td {
margin: 10px;
padding: 10px;
}
/*TABLE STYLING*/
table,
th,
td {
text-align: center;
margin: 10px;
margin-left: 20%;
}
td {
max-width: 300px;
min-width: 100px;
min-height: 300%;
margin: 10px;
background-color: white;
}
th {
padding: 10px;
}
/*---------------------------------------------------------------------*/
/*--------------------------------CONTACT US----------------------------------------*/
input.inputstyle {
font-family: futura italic;
padding: 3px;
margin: 10px;
border-radius: 3px;
border: 1px solid #1c1c1c;
height: 30px;
font-size: 16px;
width: 200px;
text-align: center;
color: #6e6e9a;
}
#color {
background-color: white;
}
/*---------------------------------------------------------------------*/
var Content = React.createClass({ render: function() { return (
<div>
<div id="topDiv">
<img src="img/arrow1.png" alt="logo" id="arrow1" />
<h1 id="introheading">Hello, Welcome to Pod</h1>
<div id="introtext">
<p>SharpFutures is a social enterprise that supports young people into employment in the creative digital sector. By offering a range of interventions including Apprenticeships, Work Experience and Volunteering, SharpFutures nurture the transition
into work, whilst responding to the fluctuating needs of creative digital businesses. We seed ideas through services for education, nurture the best talent by offering employment opportunities and real work experience, and we grow through the
sale of this services.
<br/>
</p>
<p>SharpFutures is a social enterprise that supports young people into employment in the creative digital sector. By offering a range of interventions including Apprenticeships, Work Experience and Volunteering, SharpFutures nurture the transition
into work, whilst responding to the fluctuating needs of creative digital businesses. We seed ideas through services for education, nurture the best talent by offering employment opportunities and real work experience, and we grow through the
sale of this services.
<br/>
</p>
</div>
</div>
<div id="bottomDiv">
<img src="img/arrow2.png" alt="logo" id="bottomArrow" />
<div id="heading2">
<h2 id="secondHeading">Like what <br/> you see?</h2>
</div>
<div id="endtext">
<p>SharpFutures is a social enterprise that supports young people into employment in the creative digital sector. By offering a range of interventions including Apprenticeships, Work Experience and Volunteering, SharpFutures nurture the transition
into work, whilst responding to the fluctuating needs of creative digital businesses. We seed ideas through services for education, nurture the best talent by offering employment opportunities and real work experience, and we grow through the
sale of this services.
<br/>
</p>
<p>POD is a pool creatives able to provide important, flexible support to fledgling and fast-growing businesses in the creative digital sector. With members recruited and retained based on a desire to develop sector-relevant skills, SharpFutures POD
offer clients the opportunity to bring on board temporary, support staff while also playing a valuable part in young people’s career development. Committing to a new full-time team member may be a stretch for small businesses, whereas having
had the opportunity to ‘try before you buy’ can give employers confidence to commit.
</p>
<br/>
<br/>
<div id="heximg">
<img id="hexstyle" src="img/hex2.png" alt="logo" />
<br/>
<img id="hexstyle" src="img/hex2.png" alt="logo" />
<br/>
<img id="hexstyle" src="img/hex2.png" alt="logo" />
</div>
</div>
</div>
</div>
)} }); ReactDOM.render(
<Content />, document.getElementById('content'));
What I need to know is how I get the page to be responsive without it looking awful. Any advice or help with this would be appreciated. We've been trying for days now and came up with nothing.
Thanks.

You have a lot of very specific sizes and widths and heights in your CSS file, which is great, if there was only one screen size.
What is generally recommended is that you choose to use either:
Break-points and media queries, wherein which you specify screen size(s) and use the media queries to change the size/placement of certain screen elements.
OR, you could go with:
Relative sizing (ie. percentages or EM sizing units) with media queries.
Here is a link to some example code:
css-tricks.com - Media Queries for Standard Devices

You need to update your CSS first. For a responsive website you need to write everything in percentage. As I noticed you have written many height, width, padding etc. in pixels(px).
Updating them all with % will help you to make it responsive.
Post that you need to use media files for particular screen size. I suggest you to use % instead to px and to do Google how to use media files.

The problem is the absolute positioning making a element be over content and isn't fixed automatically. Make the elements dynamic, then use #media screen and.. in CSS3 to make the layout responsible.

You are testing your desktop view in mobiles. It is obvious that somewhere you will find broken or overridden UI elements.
So you can customize your design by using media queries and viewport to make designs fit to your resolution.
For example you can reduce font sizes and image sizes and their positions.
Hope it helps.

Margin on the right side of my form magically changing?

I'm trying to center my form but it's got a magic margin on the right. I've tried to make my form responsive but when I resize my window down, my submit button just doesn't want to center either, any tips?
http://jsfiddle.net/z85687ne/1/ - use SCSS on languages
a

You're generally lacking box-sizing property to be set to border-box, so your elements could include margins and paddings into overall calculations of their sizes.
Then you can set them up to width:100% as so:
CSS:
#import "elements.less";
#import "normalize.less";
#import "var.less";
#main {
p {
a {
}
}
}
body {
.font();
}
header img {
margin: 0 auto;
display: block;
margin-top: 3%;
border: 4px #blue solid;
}
section p {
.font(20px);
text-align: center;
}
section > p {
margin-bottom: 5px;
}
.contact-info {
border: 2px black solid;
margin: 20px auto 20px auto;
width: 80%;
}
#contact-area {
width: 600px;
margin-top: 25px;
margin: 0 auto;
border: 2px black solid;
padding: 15px;
input, textarea {
padding: 5px;
width: 471px;
font-family: Helvetica, sans-serif;
font-size: 1.4em;
margin: 0px 0px 10px 0px;
border: 2px solid #ccc;
}
textarea {
height: 200px;
}
textarea:focus, input:focus {
border: 2px solid #900;
}
input.submit-button {
width: 100px;
float: right;
background-color: #0066FF;
text-transform: uppercase;
}
}
label {
float: left;
text-align: left;
margin-right: 15px;
width: 100px;
padding-top: 5px;
font-size: 1.4em;
}
#main {
p {
}
}
.post-it{
margin-top: 50px;
}
.note {
color: #333;
position: relative;
width: 300px;
margin: 0 auto;
padding: 20px;
font-family: Satisfy;
font-size: 30px;
box-shadow: 0 10px 10px 2px rgba(0,0,0,0.3);
background: #eae672;
}
ul.share-buttons{
list-style: none;
padding: 0;
text-align: center;
}
ul.share-buttons li{
display: inline;
}
p {
color: black;
.tr(all 0.3s linear);
&.class1 {
}
&:hover {
color: lime;
.tr(all 0.3s linear);
}
}
#media screen and (max-width: 1000px) {
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
#contact-area {
width: 100%;
input, textarea {
width: 100%;
}
input.submit-button {
width: 100%;
margin: 0 auto;
float: left;
background-color: #0066FF;
text-transform: uppercase;
}
}
}
JSFiddle for that

It seems to me that you need some extra level of control over your elements. It could be done with a div within your form.
<form>
<div class="form-element">
<label for="Name">Name:</label>
<input type="text" name="Name" id="Name" />
</div>
</form>
Then you can control the form with
#contact-area {
width: 100%;
max-width: 600px;
.form-element {
width: 470px;
margin: 0 auto;
> label {
width: 125px;
display: inline-block;
}
> input,
> textarea {
display: inline-block;
}
}
}
And don't float your submit button right if you want it to be centered.

Drop down, adapt width from parent?

So I am trying to get my dropdown to work properly. The dropdown is under a list-item in my header that changes depending on what username the user have. That makes the size differ but I can't get the dropdown to follow in the width resize.
Example 1:
http://jsfiddle.net/73tUx/
Here does it work properly but what if...
Example 2:
http://jsfiddle.net/73tUx/1/
As you can see in example 2 the dropdown is wider than the list-item.
How can I make it change width as well?
CSS:
header {
height: 72px;
width: 100%;
z-index: 999;
position: relative;
background-color: #2C3E50;
}
header ul {
margin: 0;
padding: 0;
list-style-type: none;
width: 600px;
height: 72px;
margin-left: auto;
margin-right: auto;
}
.navItem {
float: left;
padding-left: 35px;
padding-right: 35px;
padding-top: 26px;
padding-bottom: 26px;
text-decoration: none;
color: #FFF;
}
.navItem:hover {
background-color: #34495e;
}
header ul li a.right {
float: right;
}
.dropdown {
list-style-type: none;
}
.drop {
position: absolute;
float: right;
background: #2C3E50;
margin-top: 72px;
right: 103px;
width: 150px;
height: 140px;
display: none;
z-index: -10;
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
}
.drop li {
list-style-type: none;
height: 25px;
padding-top: 10px;
padding-left: 20px;
width: 123px;
}
.drop li a {
color: #FFF;
text-decoration: none;
}
.drop li:hover {
background: #34495e;
}

header ul{width:100%;position:relative;}

DEMO
I made few changes here and there in css. Major one was moving padding and float from anchor to the list.
Note: That the dropdown div is so small that i had to add overflow auto to see the hidden content.
CSS:
header {
height: 72px;
width: 100%;
z-index: 999;
position: relative;
background-color: #2C3E50;
}
header ul {
margin: 0;
padding: 0;
list-style-type: none;
width: 600px;
height: 72px;
margin-left: auto;
margin-right: auto;
}
ul > li{
float: left;
padding-left: 35px;
padding-right: 35px;
padding-top: 26px;
padding-bottom: 26px;
position:relative;
}
.navItem {
text-decoration: none;
color: #FFF;
}
.navItem:hover {
background-color: #34495e;
}
header ul li a.right {
float: right;
}
.dropdown {
list-style-type: none;
}
.drop {
background: none repeat scroll 0 0 #2C3E50;
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
display: none;
float: right;
height: 140px;
margin-top: 46px;
overflow: auto;
position: absolute;
right: 0;
width: 100%;
z-index: -10;
}
.drop li {
list-style-type: none;
height: 25px;
padding-top: 10px;
padding-left: 20px;
width: 123px;
}
.drop li a {
color: #FFF;
text-decoration: none;
}
.drop li:hover {
background: #34495e;
}