I created a slideToggle menu that for some reason seems to jump around when it slides up and down. The border bottom of the sliding header just flies around and glitches when the menu slides up and down, but otherwise the slideToggle works fine.
I've tried setting the position of the .headermenu to relative as well as hiding the overflow, but neither of these seemed to have fixed the issue. Does slide toggle just not work properly with a border bottom or is the issue in my code?
The glitch is difficult to explain, but the glitch shows in my code snippet, so I suggest you view it to get an understanding of what's happening. Basically the border bottom is bouncing around when the menu slides down.
In order to activate the drop down header you have to click the little broken image in the corner, which will activate the menu (so you can see the glitch in action.)
Is it related to some sort of start height for the animation? Do I need the animation to start at a specific point in the page or is it something else entirely?
$(document).ready(function(){
$("button").click(function(){
$(".headermenu").slideToggle();
$(".headermenu").height('150')
});
});
* {
box-sizing: border-box;
}
#font-face {
font-family: 'monaco';
src: url('monaco-webfont.woff2') format('woff2'),
url('monaco-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
a {
font-family: 'monaco';
font-size: 16px;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
a:visited {
color: blue;
}
body {
margin: 0px;
}
button {
background: none;
border: none;
float: right;
margin-right: 40px;
margin-top: 15px;
padding: 0px;
}
#hamburger {
padding-top: 2px;
width: 27px;
}
header {
background-color: blue;
border-bottom: solid white 1px;
color: white;
float: left;
height: 60px;
padding-top: 4px;
position: fixed;
width: 100%;
z-index: 150px;
}
.headermenu {
background-color: blue;
border-bottom: solid white 1px;
color: white;
display: none;
font-family: 'monaco';
height: 200px;
overflow: hidden;
padding-top: 40px;
position: relative;
width: 100%;
/*-webkit-transition: all .5s;
transition: all .5s;
height: 0;*/
}
.headermenu a {
color: white;
float: right;
padding-right: 40px;
text-decoration: none;
}
.headermenu a:hover {
text-decoration: underline;
}
.headermenu a:visited {
color: white;
}
#headermenuleft {
float: right;
line-height: 25px;
text-align: left;
}
#headermenuleft ul {
list-style-type: none;
}
#headermenuright {
float: right;
line-height: 25px;
text-align: left;
}
#headermenuright ul {
list-style-type: none;
}
<!DOCTYPE HTML>
<html>
<head>
<link href="css/main.css" rel="stylesheet"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<script src="js/main.js"></script>
<title>Why Have There Been No Great Women Artists?</title>
</head>
<body>
<header>
<button><img id="hamburger" src="images/Menu,_Web_Fundamentals_(White).svg.png"></button>
<a id="home" href="index.html">Why Have There Been No Great Women Artists?</a>
<div class="headermenu">
<div id="headermenuleft">
<ul>
<li>Georgia O'Keeffe</li>
<li>Frida Kahlo</li>
<li>Artemisia Gentileschi</li>
</ul>
</div>
<div id="headermenuright">
<ul>
<li>The Essay</li>
<li>Judy Chicago</li>
<li>Kara Walker</li>
<li>Ana Mendieta</li>
</ul>
</div>
</div>
</header>
</body>
</html>
$(document).ready(function () {
$("button").click(function () {
$(".headermenu").slideToggle('slow', function () {
$(this).height('150');
});
});
});
* {
box-sizing: border-box;
}
#font-face {
font-family: 'monaco';
src: url('monaco-webfont.woff2') format('woff2'),
url('monaco-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
a {
font-family: 'monaco';
font-size: 16px;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
a:visited {
color: blue;
}
body {
margin: 0px;
}
button {
background: none;
border: none;
float: right;
margin-right: 40px;
margin-top: 15px;
padding: 0px;
}
#essay {
background-color: white;
height: 400px;
padding-top: 60px;
width: 100%;
}
#essaytext {
width: 830px;
margin: auto;
padding-top: 30px;
}
#gallery {
background-color: blue;
height: 1000px;
width: 100%;
}
#gallery a{
color: white;
}
#gallery h2 {
color: white;
font-size: 28px;
}
#gallerytext {
margin: auto;
padding-bottom: 50px;
padding-top: 50px;
width: 830px;
}
#grid {
margin: auto;
padding-top: 30px;
width: 830px;
}
#gridone {
background-color: white;
color: blue;
display: block;
float: left;
height: 200px;
padding-top: 20px;
padding-left: 25px;
width: 400px;
}
#gridtwo {
background-color: white;
color: blue;
display: block;
float: right;
height: 200px;
padding-top: 20px;
padding-left: 25px;
width: 400px;
}
#gridthree {
background-color: white;
color: blue;
display: block;
float: left;
height: 200px;
margin-top: 30px;
padding-top: 20px;
padding-left: 25px;
width: 400px;
}
#gridfour {
background-color: white;
color: blue;
display: block;
float: right;
height: 200px;
margin-top: 30px;
padding-top: 20px;
padding-left: 25px;
width: 400px;
}
#gridfive {
background-color: white;
color: blue;
display: block;
float: right;
height: 200px;
margin-top: 30px;
padding-top: 20px;
padding-left: 25px;
width: 400px;
}
#gridsix {
background-color: white;
color: blue;
display: block;
float: left;
height: 200px;
margin-top: 30px;
padding-top: 20px;
padding-left: 25px;
width: 400px;
}
#hamburger {
padding-top: 2px;
width: 27px;
}
header {
background-color: blue;
border-bottom: solid white 1px;
color: white;
float: left;
padding-top: 4px;
position: fixed;
width: 100%;
z-index: 150;
}
header > div:first-child
{
height: 60px;
}
.headermenu {
background-color: blue;
border-bottom: solid white 1px;
color: white;
display: none;
font-family: 'monaco';
height: 200px;
overflow: hidden;
padding-top: 40px;
position: relative;
width: 100%;
/*-webkit-transition: all .5s;
transition: all .5s;
height: 0;*/
}
.headermenu a {
color: white;
float: right;
padding-right: 40px;
text-decoration: none;
}
.headermenu a:hover {
text-decoration: underline;
}
.headermenu a:visited {
color: white;
}
#headermenuleft {
float: right;
line-height: 25px;
text-align: left;
}
#headermenuleft ul {
list-style-type: none;
}
#headermenuright {
float: right;
line-height: 25px;
text-align: left;
}
#headermenuright ul {
list-style-type: none;
}
#home {
color: white;
display: block;
font-family: 'monaco';
font-size: 16px;
padding-left: 40px;
padding-right: 0px;
padding-top: 17px;
margin: auto;
}
h2 {
color: blue;
font-family: 'monaco';
font-size: 28px;
font-weight: normal;
}
nav#mobile-nav {
display: none;
z-index: 100;
width: 100%;
}
p {
font-family: 'monaco';
font-size: 16px;
line-height: 21px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header>
<div>
<button><img id="hamburger" src="https://upload.wikimedia.org/wikipedia/commons/thumb/d/d9/Menu,_Web_Fundamentals.svg/2000px-Menu,_Web_Fundamentals.svg.png"></button>
<a id="home" href="index.html">Why Have There Been No Great Women Artists?</a>
</div>
<div class="headermenu">
<div id="headermenuleft">
<ul>
<li>Georgia O'Keeffe</li>
<li>Frida Kahlo</li>
<li>Artemisia Gentileschi</li>
</ul>
</div>
<div id="headermenuright">
<ul>
<li>The Essay</li>
<li>Judy Chicago</li>
<li>Kara Walker</li>
<li>Ana Mendieta</li>
</ul>
</div>
</div>
</header>
<div id="essay">
<div id="essaytext">
<h2>The Essay</h2>
<p>“Why Have There Been No Great Women Artists?” is an essay by Linda Nochlin that details how centuries of oppression and misogyny has led to a male dominated art world. Nochlin explains through her essay how sexism has prevented women from fully being recognized as historically significant artists.</p>
Read The Essay →
</div>
</div>
<div id="gallery">
<div id="gallerytext">
<h2>The Gallery</h2>
<p>This website is intended to shed a light on the many incredible women in art who have been overshadowed due to their gender. By viewing the gallery you can see the incredible works of women artists whose significant contributions to the art world have been cast aside because of their womanhood.</p>
<div id="grid">
<a href="./judy.html">
<div id="gridone">
"The Dinner Party"<br>
Judy Chicago
</div>
</a>
<a href="./kara.html">
<div id="gridtwo">
"A Subtlety"<br>
Kara Walker
</div>
</a>
<a href="./mendieta.html">
<div id="gridthree">
"Alma Silueta en Fuego"<br>
Ana Mendieta
</div>
</a>
<a href="./georgia.html">
<div id="gridfour">
"Black Iris"<br>
Georgia O'Keeffe
</div>
</a>
<a href="./frida.html">
<div id="gridfive">
"The Two Fridas"<br>
Frida Kahlo
</div>
</a>
<a href="./artemesia.html">
<div id="gridsix">
"Judith Slaying Holofernes"<br>
Artemisia Gentileschi
</div>
</a>
</div>
</div>
</div>
The problem is you have a white bottom border in .headermenu. If you remove that that fixes the problem.
There are other issues however, you are using pixels in the z-index, when that parameter only accepts a number.
Also, it doesn't look to me like you need $(".headermenu").height('150');. If you do, then it should be $(".headermenu").height(150); - without the quote around the number of pixels.
EDIT
It appears you need to add top: 6px; to .headermenu (at least to look correct to me in Firefox). I can't tell you why exactly, but it appears to be to do with the hamburger button being floated and not taking up enough vertical height (padding/margin).
$(document).ready(function(){
$("button").click(function(){
$(".headermenu").slideToggle();
});
});
* {
box-sizing: border-box;
}
#font-face {
font-family: 'monaco';
src: url('monaco-webfont.woff2') format('woff2'),
url('monaco-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
a {
font-family: 'monaco';
font-size: 16px;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
a:visited {
color: blue;
}
body {
margin: 0px;
}
button {
background: none;
border: none;
float: right;
margin-right: 40px;
margin-top: 15px;
padding: 0px;
}
#essay {
background-color: white;
height: 400px;
padding-top: 60px;
width: 100%;
}
#essaytext {
width: 830px;
margin: auto;
padding-top: 30px;
}
#gallery {
background-color: blue;
height: 1000px;
width: 100%;
}
#gallery a{
color: white;
}
#gallery h2 {
color: white;
font-size: 28px;
}
#gallerytext {
margin: auto;
padding-bottom: 50px;
padding-top: 50px;
width: 830px;
}
#grid {
margin: auto;
padding-top: 30px;
width: 830px;
}
#gridone {
background-color: white;
color: blue;
display: block;
float: left;
height: 200px;
padding-top: 20px;
padding-left: 25px;
width: 400px;
}
#gridtwo {
background-color: white;
color: blue;
display: block;
float: right;
height: 200px;
padding-top: 20px;
padding-left: 25px;
width: 400px;
}
#gridthree {
background-color: white;
color: blue;
display: block;
float: left;
height: 200px;
margin-top: 30px;
padding-top: 20px;
padding-left: 25px;
width: 400px;
}
#gridfour {
background-color: white;
color: blue;
display: block;
float: right;
height: 200px;
margin-top: 30px;
padding-top: 20px;
padding-left: 25px;
width: 400px;
}
#gridfive {
background-color: white;
color: blue;
display: block;
float: right;
height: 200px;
margin-top: 30px;
padding-top: 20px;
padding-left: 25px;
width: 400px;
}
#gridsix {
background-color: white;
color: blue;
display: block;
float: left;
height: 200px;
margin-top: 30px;
padding-top: 20px;
padding-left: 25px;
width: 400px;
}
#hamburger {
padding-top: 2px;
width: 27px;
}
header {
background-color: blue;
border-bottom: solid red 1px;
color: white;
float: left;
height: 60px;
padding-top: 4px;
position: fixed;
width: 100%;
z-index: 150;
}
.headermenu {
background-color: green;
border-bottom: solid red 1px;
color: white;
display: none;
font-family: 'monaco';
height: 200px;
overflow: hidden;
padding-top: 60px;
position: relative;
width: 100%;
top: 6px;
/*-webkit-transition: all .5s;
transition: all .5s;
height: 0;*/
z-index: 200;
}
.headermenu a {
color: white;
float: right;
padding-right: 40px;
text-decoration: none;
}
.headermenu a:hover {
text-decoration: underline;
}
.headermenu a:visited {
color: white;
}
#headermenuleft {
float: right;
line-height: 25px;
text-align: left;
}
#headermenuleft ul {
list-style-type: none;
}
#headermenuright {
float: right;
line-height: 25px;
text-align: left;
}
#headermenuright ul {
list-style-type: none;
}
#home {
color: white;
display: block;
font-family: 'monaco';
font-size: 16px;
padding-left: 40px;
padding-right: 0px;
padding-top: 17px;
margin: auto;
}
h2 {
color: blue;
font-family: 'monaco';
font-size: 28px;
font-weight: normal;
}
nav#mobile-nav {
display: none;
z-index: 100;
width: 100%;
}
p {
font-family: 'monaco';
font-size: 16px;
line-height: 21px;
}
<!DOCTYPE HTML>
<html>
<head>
<link href="css/main.css" rel="stylesheet"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<script src="js/main.js"></script>
<title>Why Have There Been No Great Women Artists?</title>
</head>
<body>
<header>
<button><img id="hamburger" src="images/Menu,_Web_Fundamentals_(White).svg.png"></button>
<a id="home" href="index.html">Why Have There Been No Great Women Artists?</a>
<div class="headermenu">
<div id="headermenuleft">
<ul>
<li>Georgia O'Keeffe</li>
<li>Frida Kahlo</li>
<li>Artemisia Gentileschi</li>
</ul>
</div>
<div id="headermenuright">
<ul>
<li>The Essay</li>
<li>Judy Chicago</li>
<li>Kara Walker</li>
<li>Ana Mendieta</li>
</ul>
</div>
</div>
</header>
</body>
</html>
Related
So check this out:
//Code for button a donde quieres ir
//Start var
var nearby_search;
function nearby_choose(choice){
nearby_search = choice;
}
//Overlay code
function nearby_search_on() {
document.getElementById("nearby_search").style.display = "block";
}
function nearby_search_off() {
document.getElementById("nearby_search").style.display = "none";
}
#font-face {
font-family: biolinum;
src: 'fonts/LinBiolinum_R.ttf';
}
#font-face {
font-family: biolinum;
src: 'fonts/LinBiolinum_RB.ttf';
font-weight: bold;
}
#font-face {
font-family: biolinum;
src: 'fonts/LinBiolinum_RI.ttf';
font-style: italic;
}
body {
background-color: #FCF7F8;
font-size: 62.5%;
height: 100%;
margin: 0px;
}
p {
margin-block-start: 0rem;
margin-block-end: 0rem;
}
h1 {
margin-block-start: 0rem;
margin-block-end: 0rem;
}
.domainhome {
font-family: biolinum;
font-size: 2rem;
text-align: center;
color: #1D263B;
background-color: #FCF7F8;
border: none;
cursor: pointer;
outline:none;
margin-top: 2rem;
margin-left: 5rem;
}
a:link {
color: #1D263B;
background-color: transparent;
text-decoration: none;
}
a:visited {
color: #1D263B;
background-color: transparent;
text-decoration: none;
}
.flex-container {
display: flex;
flex-shrink: 0;
/* background-color: DodgerBlue; */
margin-top: 4rem;
}
.left-bar {
flex-direction: column;
margin-left: 5rem;
}
.right-bar {
flex-direction: column;
margin-left: 5rem;
margin-right: 5rem;
height: 100%;
width: 100%;
}
button {
transition: 0.4s;
}
button:hover {
transform: rotate(-1deg) translate(0px, -8px);
}
.adondequieresir {
font-family: biolinum;
font-size: 1.66rem;
text-align: center;
color: #FCF7F8;
background-color: #1D263B;
border: none;
width: 275px;
height: 75px;
cursor: pointer;
outline:none;
margin-bottom: 3rem;
}
.agregarubicacion {
font-family: biolinum;
font-size: 1.33rem;
text-align: center;
color: #FCF7F8;
background-color: #1D263B;
border: none;
width: 275px;
height: 50px;
border-radius: 50px;
cursor: pointer;
outline:none;
margin-bottom: 3rem;
}
.personasunidas {
font-family: biolinum;
font-size: 1.33rem;
text-align: center;
color: #FCF7F8;
background-color: #1D263B;
border: none;
width: 275px;
height: 50px;
border-radius: 50px;
cursor: pointer;
outline:none;
margin-bottom: 3rem;
}
.icons {
float: left;
margin-left: 7px;
margin-right: 10px;
}
#map {
height: 400px;
}
#nearby_search {
position: fixed;
display: none;
width: 100%;
height: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0,0,0,0.5);
z-index: 2;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="flex-container">
<div class="left-bar">
<div>
<button onClick="nearby_search_on()" class="adondequieresir"><p>¿a dónde quieres ir?</p></button>
<div id="nearby_search">
<button onClick="nearby_search_off()" class="adondequieresir" style="background-color: #A288E3;"><p>¿a dónde quieres ir?</p></button>
</div>
</div>
</div>
</body>
</html>
I'm trying to create something like a dropdown menu, but more stylish. So I decided not to use a tag and instead use javascript variables and buttons to accomplish my goal. But the point is, when the button is clicked, I want it to turn to lighter, darken everything behind and (eventually) add other buttons with options to choose from. And the snippet above is my (faultish) approach. For example, I actually used two buttons to try and simulate the color change of virtually the same "¿a donde quieres ir" button. How can I responsively align these two buttons? What would be the cleanest way to accomplish what I want as a whole? I would kindly appreciate any help :)
I think you can use one button, separate it from the background, and then use 'z-index' to put the button up.
function nearby_search_toggle() {
var tmpDisplay = document.getElementById("tmpBg");
var tmpBtn = document.getElementById("tmpBtn");
if (tmpDisplay.style.display == 'block') {
tmpDisplay.style.display = "none";
tmpBtn.classList.remove('active');
} else {
tmpDisplay.style.display = "block";
tmpBtn.classList.add('active');
}
}
body {
background-color: #FCF7F8;
font-size: 62.5%;
height: 100%;
margin: 0px;
}
p {
margin-block-start: 0rem;
margin-block-end: 0rem;
}
h1 {
margin-block-start: 0rem;
margin-block-end: 0rem;
}
.domainhome {
font-family: biolinum;
font-size: 2rem;
text-align: center;
color: #1D263B;
background-color: #FCF7F8;
border: none;
cursor: pointer;
outline: none;
margin-top: 2rem;
margin-left: 5rem;
}
a:link {
color: #1D263B;
background-color: transparent;
text-decoration: none;
}
a:visited {
color: #1D263B;
background-color: transparent;
text-decoration: none;
}
.flex-container {
display: flex;
flex-shrink: 0;
/* background-color: DodgerBlue; */
margin-top: 4rem;
}
.left-bar {
flex-direction: column;
margin-left: 5rem;
}
.right-bar {
flex-direction: column;
margin-left: 5rem;
margin-right: 5rem;
height: 100%;
width: 100%;
}
button {
transition: 0.4s;
}
button:hover {
transform: rotate(-1deg) translate(0px, -8px);
}
.adondequieresir {
position: relative;
font-family: biolinum;
font-size: 1.66rem;
text-align: center;
color: #FCF7F8;
background-color: #1D263B;
border: none;
width: 275px;
height: 75px;
cursor: pointer;
outline: none;
margin-bottom: 3rem;
z-index: 2;
}
.adondequieresir.active {
background-color: white;
color: red;
}
#tmpBg {
position: fixed;
display: none;
width: 100%;
height: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.5);
z-index: 1;
}
.agregarubicacion {
font-family: biolinum;
font-size: 1.33rem;
text-align: center;
color: #FCF7F8;
background-color: #1D263B;
border: none;
width: 275px;
height: 50px;
border-radius: 50px;
cursor: pointer;
outline: none;
margin-bottom: 3rem;
}
.personasunidas {
font-family: biolinum;
font-size: 1.33rem;
text-align: center;
color: #FCF7F8;
background-color: #1D263B;
border: none;
width: 275px;
height: 50px;
border-radius: 50px;
cursor: pointer;
outline: none;
margin-bottom: 3rem;
}
.icons {
float: left;
margin-left: 7px;
margin-right: 10px;
}
#map {
height: 400px;
}
<div class="flex-container">
<div class="left-bar">
<div>
<div id="tmpBg"></div>
<button onClick="nearby_search_toggle();" class="adondequieresir" id="tmpBtn">
<p>¿a dónde quieres ir?</p>
</button>
</div>
</div>
</div>
I have shifted my CTA "subscribe" button in the navbar to the far right using margin. But I am wondering if there is a better way to write this code-wise?
Prior to using the margin, I couldn't get the button to move at all, it was originally located beside the other navbar link items.
I have attached the code I am using below.
* {
text-decoration: none;
}
body {
background-color: #f3f3f3;
}
header {
background-color: #fff;
width: 100%;
height: 100%;
display: block
}
.header-logo img {
height:150px;
margin-top: 10px;
float: left;
margin-right: 5px;
}
header nav ul {
display: block;
margin: 0 auto;
width: fit-content;
padding-top: 50px;
}
header nav ul li {
display: inline-flex;
float: left;
list-style: none;
padding: 0px 15px;
}
header nav ul li a {
font-family:'Sorts Mill Goudy', serif;
font-size: 24px;
color: #111;
text-transform: uppercase;
}
.sub {
margin: 0px 1300px;
float: right;
height: auto;
position: relative;
z-index: 1000;
}
ul li a:hover {
color: firebrick;
}
#media only screen and (min-width: 1000px){
header .header-logo {
float: left;
padding: 15px 15px;
height: 0px;
max-width: 220px;
display: table;
}
header nav ul {
margin: 20px 0px 0px 20px;
float: left;
}
header nav ul li a {
line-height: 50px;
}
header .sub {
display: block;
font-family:'Sorts Mill Goudy', serif;
font-size: 24px;
color: #111;
text-transform: uppercase;
line-height: 40px;
border: 2px solid #111;
float: right;
margin-right: 40px;
margin-top: 5px;
padding: 0 20px;
}
}
/*INDEX*/
.index-banner {
margin: 0 auto;
width: 100%;
height:calc(100vh - 100px);
background-image: url('img/road_trip.jpg');
background-repeat: no-repeat;
background-position: center;
background-size: cover;
display: table;
}
.index-banner h1 {
font-family:'Karma', serif;
font-size: 60px;
font-weight: 100;
line-height: 70px;
color: #fff;
text-align: center;
text-shadow: 2px 2px 8px #111;
}
.verticial-center {
margin: 0 auto;
display: table-cell;
vertical-align: middle;
}
.footer {
font-family:'Sorts Mill Goudy', serif;
font-size: 16px;
color: #111;
margin: 0px 330px;
padding: 15px;;
}
.hero-section {
font-family:'Sorts Mill Goudy', serif;
font-size: 24px;
color: #111;
}
.hero-section {
font-family:'Karma', serif;
font-size: 40px;
color: #111;
text-align: center;
padding: 25px;
}
.hero-paragraph {
margin: 0 auto;
width: 1895px;
font-family:'Sorts Mill Goudy', serif;
font-size: 24px;
color: #111;
text-align: center;
padding: 25px;
}
#media only screen and (min-width: 1000px){
.wrapper {
width: 2000px;
margin:0 auto;
}
.index-banner {
height:500px;
}
.hero-paragraph {
width: 2000px;
margin:0 auto;
}
.hero-section {
width: 2000px;
margin:0 auto;
}
}
/* FOOTER*/
footer {
width: calc(100% - 80px);
padding: 40px 40px;
margin-top: 20px;
background-color: #111;
overflow: hidden;
}
footer ul {
width: fit-content;
float: left;
padding-left: 20px;
}
footer ul li {
display: block;
list-style: none;
}
footer ul li a {
font-family:'Sorts Mill Goudy', serif;
font-size: 18px;
color: #fff;
line-height: 40px;
}
.footer-sm {
width: 50px;
float: right;
}
.footer-sm img {
width: 100%;
margin-bottom: 10px;
display: block;
}
#media only screen and (min-width: 1000px){
footer ul li a {
font-family:'Sorts Mill Goudy', serif;
font-size: 18px;
color: #fff;
line-height: 40px;
}
}
</head>
<body>
<header>
<div class="header-logo">
<img src="img/Milestonehackers.jpg" alt="Milestonehackers logo">
</div>
<nav>
<ul>
<li>Home</li>
<li>Podcast</li>
<li>Newsletter</li>
<li>Blog</li>
<li>Contact</li>
<div class="sub">
<li>Subscribe</li>
</div>
</ul>
</nav>
</header>
<main>
<section class="index-banner">
<div class="verticial-center">
<h1>Milestonehackers Podcast & Newsletter</h1>
</div>
</section>
<div class="wrapper">
<section class="hero-section">
<h2>What Can you Expect From our Podcast</h2>
<p class="hero-paragraph">A host (meee, Paolo) interviewing various types of entrepreneurs or founders both technical and non-technical. Each entrepreneur has their own unique story that resulted in learning or experiencing something that can benefit our audience who may want to go down the entrepreneurial path!</p>
</section>
</div>
</main>
<div class="wrapper">
<footer>
<ul>
<li>Home</li>
<li>Podcast</li>
<li>Newsletter</li>
<li>Blog</li>
<li>Contact</li>
</ul>
<div class="footer-sm">
<a href="https://twitter.com/Milestonehacker">
<img src="img/twitter.png" alt="twiiter icon">
<a href="https://open.spotify.com/show/2ZiIxv5Mr83seTtNsg3LD9">
<img src="img/spotify.png" alt="spotify icon">
<img src="img/rss.png" alt="rss icon">
</a>
</div>
<p class="footer">Copyright © 2019; All Rights Reserved</p>
</footer>
<script src="https://www.gstatic.com/firebasejs/7.2.1/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.2.1/firebase-analytics.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.2.1/firebase-database.js"></script>
<script src="app.js"></script>
</div>
</body>
</html>
You can achieve that by removing float from ul element and add display flex. Also, remove float and margin from .sub element. Then by adding margin-left: auto to .sub the element will move to the far right.
One more note: your hero-section and some other elements have a width of 2000px which is not ideal for many screens. You can add max-width: 100% so it fits the screen if it is bigger than the screen.
See this code:
* {
text-decoration: none;
}
body {
background-color: #f3f3f3;
}
header {
background-color: #fff;
width: 100%;
height: 100%;
display: block
}
.header-logo img {
height:150px;
margin-top: 10px;
float: left;
margin-right: 5px;
}
header nav ul {
display: block;
margin: 0 auto;
width: 100%;
padding-top: 50px;
padding: 0;
}
header nav ul li {
display: inline-flex;
float: left;
list-style: none;
padding: 0px 15px;
}
header nav ul li a {
font-family:'Sorts Mill Goudy', serif;
font-size: 24px;
color: #111;
text-transform: uppercase;
}
.sub {
/* Add margin-left: auto */
margin-left: auto;
/* float: right;*/
height: auto;
position: relative;
z-index: 1000;
}
ul li a:hover {
color: firebrick;
}
#media only screen and (min-width: 1000px){
header .header-logo {
float: left;
padding: 15px 15px;
height: 0px;
max-width: 220px;
display: table;
}
header nav ul {
margin: 20px 0px 0px 20px;
float: left;
}
header nav ul li a {
line-height: 50px;
}
header .sub {
display: block;
font-family:'Sorts Mill Goudy', serif;
font-size: 24px;
color: #111;
text-transform: uppercase;
line-height: 40px;
border: 2px solid #111;
float: right;
margin-right: 40px;
margin-top: 5px;
padding: 0 20px;
}
}
/*INDEX*/
.index-banner {
margin: 0 auto;
width: 100%;
height:calc(100vh - 100px);
background-image: url('img/road_trip.jpg');
background-repeat: no-repeat;
background-position: center;
background-size: cover;
display: table;
}
.index-banner h1 {
font-family:'Karma', serif;
font-size: 60px;
font-weight: 100;
line-height: 70px;
color: #fff;
text-align: center;
text-shadow: 2px 2px 8px #111;
}
.verticial-center {
margin: 0 auto;
display: table-cell;
vertical-align: middle;
}
.footer {
font-family:'Sorts Mill Goudy', serif;
font-size: 16px;
color: #111;
margin: 0px 330px;
padding: 15px;;
}
.hero-section {
font-family:'Sorts Mill Goudy', serif;
font-size: 24px;
color: #111;
}
.hero-section {
font-family:'Karma', serif;
font-size: 40px;
color: #111;
text-align: center;
padding: 25px;
}
.hero-paragraph {
margin: 0 auto;
width: 1895px;
font-family:'Sorts Mill Goudy', serif;
font-size: 24px;
color: #111;
text-align: center;
padding: 25px;
}
#media only screen and (min-width: 1000px){
.wrapper {
width: 2000px;
margin:0 auto;
}
.index-banner {
height:500px;
}
.hero-paragraph {
width: 2000px;
margin:0 auto;
}
.hero-section {
width: 2000px;
margin:0 auto;
}
}
/* FOOTER*/
footer {
width: calc(100% - 80px);
padding: 40px 40px;
margin-top: 20px;
background-color: #111;
overflow: hidden;
}
footer ul {
width: fit-content;
float: left;
padding-left: 20px;
}
footer ul li {
display: block;
list-style: none;
}
footer ul li a {
font-family:'Sorts Mill Goudy', serif;
font-size: 18px;
color: #fff;
line-height: 40px;
}
.footer-sm {
width: 50px;
float: right;
}
.footer-sm img {
width: 100%;
margin-bottom: 10px;
display: block;
}
#media only screen and (min-width: 1000px){
footer ul li a {
font-family:'Sorts Mill Goudy', serif;
font-size: 18px;
color: #fff;
line-height: 40px;
}
}
<body>
<header>
<div class="header-logo">
<img src="img/Milestonehackers.jpg" alt="Milestonehackers logo">
</div>
<nav>
<ul>
<li>Home</li>
<li>Podcast</li>
<li>Newsletter</li>
<li>Blog</li>
<li>Contact</li>
<div class="sub">
<li>Subscribe</li>
</div>
</ul>
</nav>
</header>
<main>
<section class="index-banner">
<div class="verticial-center">
<h1>Milestonehackers Podcast & Newsletter</h1>
</div>
</section>
<div class="wrapper">
<section class="hero-section">
<h2>What Can you Expect From our Podcast</h2>
<p class="hero-paragraph">A host (meee, Paolo) interviewing various types of entrepreneurs or founders both technical and non-technical. Each entrepreneur has their own unique story that resulted in learning or experiencing something that can benefit our audience who may want to go down the entrepreneurial path!</p>
</section>
</div>
</main>
<div class="wrapper">
<footer>
<ul>
<li>Home</li>
<li>Podcast</li>
<li>Newsletter</li>
<li>Blog</li>
<li>Contact</li>
</ul>
<div class="footer-sm">
<a href="https://twitter.com/Milestonehacker">
<img src="img/twitter.png" alt="twiiter icon">
<a href="https://open.spotify.com/show/2ZiIxv5Mr83seTtNsg3LD9">
<img src="img/spotify.png" alt="spotify icon">
<img src="img/rss.png" alt="rss icon">
</a>
</div>
<p class="footer">Copyright © 2019; All Rights Reserved</p>
</footer>
<script src="https://www.gstatic.com/firebasejs/7.2.1/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.2.1/firebase-analytics.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.2.1/firebase-database.js"></script>
<script src="app.js"></script>
</div>
My one page layout is working perfectly except for one issue. The navbar links when clicked changes color according to where the user goes to or scrolls.
The problem is that when I click on the "Contact Us" link, the navbar scrolls to that position but the navbar link doesn't change color as pictured above. It works for every other section just not for the bottom because the area isn't big enough.
window.onload=function(){
// Cache selectors
var lastId,
topMenu = $("#top-menu"),
topMenuHeight = topMenu.outerHeight()+15,
// All list items
menuItems = topMenu.find("a"),
// Anchors corresponding to menu items
scrollItems = menuItems.map(function(){
var item = $($(this).attr("href"));
if (item.length) { return item; }
});
// Bind click handler to menu items
// so we can get a fancy scroll animation
menuItems.click(function(e){
var href = $(this).attr("href"),
offsetTop = href === "#" ? 0 : $(href).offset().top-topMenuHeight+1;
$('html, body').stop().animate({
scrollTop: offsetTop
}, 300);
e.preventDefault();
});
// Bind to scroll
$(window).scroll(function(){
// Get container scroll position
var fromTop = $(this).scrollTop()+topMenuHeight;
// Get id of current scroll item
var cur = scrollItems.map(function(){
if ($(this).offset().top < fromTop)
return this;
});
// Get the id of the current element
cur = cur[cur.length-1];
var id = cur && cur.length ? cur[0].id : "";
if (lastId !== id) {
lastId = id;
// Set/remove active class
menuItems
.parent().removeClass("active")
.end().filter("[href='#"+id+"']").parent().addClass("active");
}
});
}//]]>
#font-face {
font-family: 'Montserrat';
src: url('fonts/Montserrat-Regular.otf')
}
#font-face {
font-family: 'MontserratSlim';
src: url('fonts/Montserrat-ExtraLight.otf')
}
body {
font-family: Helvetica, Arial;
margin: 0px;
}
#header {
top: 0px;
}
.signsize {
width: 140px;
height: 90px;
}
.movesimg {
float: right;
}
.packing {
float: left;
}
h1 {
font-family: 'Montserrat';
font-size: 50px;
text-align: right;
color: #3d3d3d;
margin:0;
}
h2 {
margin: 0;
color: #3d3d3d;
}
h3 {
color: #3d3d3d;
}
h4 {
font-family: 'Montserrat';
font-size: 50px;
text-align: left;
color: #3d3d3d;
margin:0;
}
h5 {
font-size: 50px;
padding-top: 60px;
color: #3d3d3d;
margin: 0;
}
h6 {
font-family: 'MontserratSlim';
font-size: 15px;
text-align: left;
color: #929292;
margin:0;
}
#descriptionl {
font-family: 'MontserratSlim';
font-size: 15px;
color: #929292;
margin:0;
}
#descriptionr {
font-family: 'MontserratSlim';
font-size: 15px;
color: #929292;
text-align: right;
margin:0;
}
#movessec {
display: inline-block;
padding-top: 60px;
padding-bottom: 60px;
border-bottom: solid thin #d8d8d8;
}
#navbar {
position: fixed;
z-index: 1;
background: white;
right: 0px;
top: 0px;
width: 100%;
}
#logo {
float: left;
margin-left: 10%;
padding-top: 10px;
padding-bottom: 10px;
}
#top-menu {
z-index: 1;
float: right;
padding-right: 10%;
padding-top: 25px;
padding-bottom: 25px;
}
#top-menu li {
float: left;
list-style-type: none;
white-space: nowrap;
font-size: 15px;
font-family: Montserrat;
text-transform: uppercase;
font-weight: 600;
text-align: center;
letter-spacing: 1px;
}
#more {
padding-left: 50px;
}
#moreR {
padding-right: 50px;
}
#more li {
float: left;
list-style-type: none;
white-space: nowrap;
font-size: 15px;
font-family: Montserrat;
text-transform: uppercase;
font-weight: 600;
text-align: center;
letter-spacing: 1px;
padding: 8px;
outline: #4690d4 solid thin;
text-decoration: none;
}
#moreR li {
float: right;
list-style-type: none;
white-space: nowrap;
font-size: 15px;
font-family: Montserrat;
text-transform: uppercase;
font-weight: 600;
text-align: center;
letter-spacing: 1px;
padding: 8px;
outline: #4690d4 solid thin;
text-decoration: none;
}
#top-menu a {
display: inline;
width: 6em;
text-align: center;
padding: 15px;
-webkit-transition: .5s all ease-out;
-moz-transition: .5s all ease-out;
transition: .5s all ease-out;
color: #545454;
text-decoration: none;
letter-spacing: 1px;
}
#top-menu a:hover {
color: #575757;
}
#top-menu li.active a {
color: white;
position: relative;
background: #4690d4;
}
#home {
padding-left: 70px;
padding-top: 150px;
height: 800px;
background-image: url(img/movingboxes.jpg);
background-size: cover;
background-repeat: no-repeat;
font-family: Montserrat;
}
#services {
height: 1600px;
}
#servicesleft {
float: left;
height: 100%;
width: 12%;
}
#servicesmain {
float: left;
height: 100%;
width: 76%;
}
#servicesright {
float: left;
height: 100%;
width: 12%;
}
#moving {
height: 800px;
padding-top: 50px;
padding-left: 12%;
padding-right: 12%;
background-image: url('img/cardboardbright.jpg');
font-family: Montserrat;
}
#quote {
height: 800px;
background: grey;
}
#contact {
height: 325px;
}
#contactleft {
float: left;
height: 100%;
width: 12%;
background: white;
}
#contactmain {
float: left;
height: 100%;
width: 76%;
background: white;
}
#contactright {
float: left;
height: 100%;
width: 12%;
background: white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div id="header">
<div id="navbar">
<div id="logo">
<img src="logosmall.png">
</div>
<ul id="top-menu">
<li class="active">
Home
</li>
<li>
Services
</li>
<li>
Moving Tips
</li>
<li>
Get A Quote
</li>
<li>
Contact Us
</li>
</ul>
</div>
</div>
<div id="home">
Content Here.
</div>
<div id="services">
<div id="servicesleft"></div>
<div id="servicesmain">
<div id="movessec">
Content Here.
</div>
<div id="movessec">
Content Here.
</div>
<div id="movessec">
Content Here.
</div>
</div>
<div id="servicesright"></div>
</div>
<div id="moving">Content here.</div>
<div id="quote">Quote form goes here.</div>
<div id="contact">
<div id="contactleft">Content Here</div>
<div id="contactmain">Content Here</div>
<div id="contactright">Content Here</div>
</div>
</body>
You could move the change of the active class to the click, here i have commented out the change that happens on scroll, moved it to the click event, and also added a line to get the id:
window.onload=function(){
// Cache selectors
var lastId,
topMenu = $("#top-menu"),
topMenuHeight = topMenu.outerHeight()+15,
// All list items
menuItems = topMenu.find("a"),
// Anchors corresponding to menu items
scrollItems = menuItems.map(function(){
var item = $($(this).attr("href"));
if (item.length) { return item; }
});
// Bind click handler to menu items
// so we can get a fancy scroll animation
menuItems.click(function(e){
var href = $(this).attr("href"),
id = href.split('#')[1],
offsetTop = href === "#" ? 0 : $(href).offset().top-topMenuHeight+1;
$('html, body').stop().animate({
scrollTop: offsetTop
}, 300);
e.preventDefault();
menuItems.parent().removeClass("active").end().filter("[href='#"+id+"']").parent().addClass("active");
});
// Bind to scroll
$(window).scroll(function(){
// Get container scroll position
var fromTop = $(this).scrollTop()+topMenuHeight;
// Get id of current scroll item
var cur = scrollItems.map(function(){
if ($(this).offset().top < fromTop)
return this;
});
// Get the id of the current element
cur = cur[cur.length-1];
var id = cur && cur.length ? cur[0].id : "";
if (lastId !== id) {
lastId = id;
// Set/remove active class
//menuItems
// .parent().removeClass("active")
// .end().filter("[href='#"+id+"']").parent().addClass("active");
}
});
}//]]>
#font-face {
font-family: 'Montserrat';
src: url('fonts/Montserrat-Regular.otf')
}
#font-face {
font-family: 'MontserratSlim';
src: url('fonts/Montserrat-ExtraLight.otf')
}
body {
font-family: Helvetica, Arial;
margin: 0px;
}
#header {
top: 0px;
}
.signsize {
width: 140px;
height: 90px;
}
.movesimg {
float: right;
}
.packing {
float: left;
}
h1 {
font-family: 'Montserrat';
font-size: 50px;
text-align: right;
color: #3d3d3d;
margin:0;
}
h2 {
margin: 0;
color: #3d3d3d;
}
h3 {
color: #3d3d3d;
}
h4 {
font-family: 'Montserrat';
font-size: 50px;
text-align: left;
color: #3d3d3d;
margin:0;
}
h5 {
font-size: 50px;
padding-top: 60px;
color: #3d3d3d;
margin: 0;
}
h6 {
font-family: 'MontserratSlim';
font-size: 15px;
text-align: left;
color: #929292;
margin:0;
}
#descriptionl {
font-family: 'MontserratSlim';
font-size: 15px;
color: #929292;
margin:0;
}
#descriptionr {
font-family: 'MontserratSlim';
font-size: 15px;
color: #929292;
text-align: right;
margin:0;
}
#movessec {
display: inline-block;
padding-top: 60px;
padding-bottom: 60px;
border-bottom: solid thin #d8d8d8;
}
#navbar {
position: fixed;
z-index: 1;
background: white;
right: 0px;
top: 0px;
width: 100%;
}
#logo {
float: left;
margin-left: 10%;
padding-top: 10px;
padding-bottom: 10px;
}
#top-menu {
z-index: 1;
float: right;
padding-right: 10%;
padding-top: 25px;
padding-bottom: 25px;
}
#top-menu li {
float: left;
list-style-type: none;
white-space: nowrap;
font-size: 15px;
font-family: Montserrat;
text-transform: uppercase;
font-weight: 600;
text-align: center;
letter-spacing: 1px;
}
#more {
padding-left: 50px;
}
#moreR {
padding-right: 50px;
}
#more li {
float: left;
list-style-type: none;
white-space: nowrap;
font-size: 15px;
font-family: Montserrat;
text-transform: uppercase;
font-weight: 600;
text-align: center;
letter-spacing: 1px;
padding: 8px;
outline: #4690d4 solid thin;
text-decoration: none;
}
#moreR li {
float: right;
list-style-type: none;
white-space: nowrap;
font-size: 15px;
font-family: Montserrat;
text-transform: uppercase;
font-weight: 600;
text-align: center;
letter-spacing: 1px;
padding: 8px;
outline: #4690d4 solid thin;
text-decoration: none;
}
#top-menu a {
display: inline;
width: 6em;
text-align: center;
padding: 15px;
-webkit-transition: .5s all ease-out;
-moz-transition: .5s all ease-out;
transition: .5s all ease-out;
color: #545454;
text-decoration: none;
letter-spacing: 1px;
}
#top-menu a:hover {
color: #575757;
}
#top-menu li.active a {
color: white;
position: relative;
background: #4690d4;
}
#home {
padding-left: 70px;
padding-top: 150px;
height: 800px;
background-image: url(img/movingboxes.jpg);
background-size: cover;
background-repeat: no-repeat;
font-family: Montserrat;
}
#services {
height: 1600px;
}
#servicesleft {
float: left;
height: 100%;
width: 12%;
}
#servicesmain {
float: left;
height: 100%;
width: 76%;
}
#servicesright {
float: left;
height: 100%;
width: 12%;
}
#moving {
height: 800px;
padding-top: 50px;
padding-left: 12%;
padding-right: 12%;
background-image: url('img/cardboardbright.jpg');
font-family: Montserrat;
}
#quote {
height: 800px;
background: grey;
}
#contact {
height: 325px;
}
#contactleft {
float: left;
height: 100%;
width: 12%;
background: white;
}
#contactmain {
float: left;
height: 100%;
width: 76%;
background: white;
}
#contactright {
float: left;
height: 100%;
width: 12%;
background: white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div id="header">
<div id="navbar">
<div id="logo">
<img src="logosmall.png">
</div>
<ul id="top-menu">
<li class="active">
Home
</li>
<li>
Services
</li>
<li>
Moving Tips
</li>
<li>
Get A Quote
</li>
<li>
Contact Us
</li>
</ul>
</div>
</div>
<div id="home">
Content Here.
</div>
<div id="services">
<div id="servicesleft"></div>
<div id="servicesmain">
<div id="movessec">
Content Here.
</div>
<div id="movessec">
Content Here.
</div>
<div id="movessec">
Content Here.
</div>
</div>
<div id="servicesright"></div>
</div>
<div id="moving">Content here.</div>
<div id="quote">Quote form goes here.</div>
<div id="contact">
<div id="contactleft">Content Here</div>
<div id="contactmain">Content Here</div>
<div id="contactright">Content Here</div>
</div>
</body>
By setting a min-height to 100vh you can make sure it is always at least the height of the user's screen.
I am working on a product page exercise. For the product page if a user puts in a correctly formatted e-mail, they get a validation message. If they put in an incorrectly formatted e-mail, they're supposed to get an error message.
The product page's input is connected to something my professor made in Ruby on Rails that automatically validates whether it's properly formatted or not. I've successfully managed to make it so that when a user puts in a correctly formatted e-mail that a validation message comes up, but I've been able to get the same result for the error message.
This is how it's supposed to look when someone puts in an incorrectly formatted e-mail:
This is how it looks when someone puts in an incorrectly formatted e-mail:
This is the error I get in the console.log when I put in an incorrectly formatted e-mail:
Why is my javascript only working for my validation message and not my error message? What am I doing incorrectly? From my understanding I have the error message set up to respond to a failure from the server, why isn't it coming up?
$(document).ready(function() {
$('form').submit(function(event) {
var formData = $(this).serialize();
$.ajax({
type : 'POST',
url : 'https://web2-product-page.herokuapp.com/subscribers',
data : formData,
dataType : 'json'
}).done(function(data) {
console.log(data);
$('.confirmation').fadeIn();
$('.error-message').text("");
$('input[name=email]').val("");
}).fail(function(data) {
console.log(data);
var errorMessage = JSON.parse(data.responseText).email[0];
$('.error-message').text(errorMessage);
$('.confirmation').hide();
});
event.preventDefault();
});
});
* {
box-sizing: border-box;
}
#font-face {
font-family: 'gilroysemibold';
src: url('radomir_tinkov_-_gilroy-semibold-webfont.woff2') format('woff2'),
url('radomir_tinkov_-_gilroy-semibold-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
body {
margin: 0px;
}
#calltoaction {
background-image: url("calltoactionbackground.jpg");
background-size: 100%;
background-repeat: no-repeat;
display: inline-block;
height: 500px;
padding-bottom: 100px;
padding-left: 70px;
padding-right: 70px;
padding-top: 100px;
text-align: center;
width: 100%;
}
#calltoaction p {
margin: auto;
padding-top: 25px;
padding-bottom: 55px;
width: 500px;
}
.clearfix:before,
.clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
zoom: 1; /* ie 6/7 */
}
.confirmation {
display: none;
}
.error-message {
display: none;
float: left;
}
#functions {
background-color: #FFFFFF;
display: block;
height: 1080px;
margin: auto;
padding-top: 100px;
width: 100%;
}
#functions p {
color: #62CE9C;
}
h1 {
color: #FFFFFF;
font-family: 'gilroysemibold';
font-size: 36px;
font-weight: lighter;
}
h2 {
color: #62CE9C;
font-family: 'gilroysemibold';
font-size: 30px;
font-weight: lighter;
}
h3 {
color: #00AF78;
font-family: Open Sans;
font-size: 18px;
line-height: 10px;
}
.hashtag {
color: #00AF78;
font-weight: bold;
}
#hero {
background-color: #62CE9C;
height: 650px;
margin: 0px;
padding-bottom: 100px;
padding-left: 120px;
padding-right: 120px;
padding-top: 100px;
width: 100%;
}
#herocontent {
margin: auto;
width: 900px;
}
#herotext {
float: left;
width: 600px;
}
#hero h1 {
width: 470px;
}
#hero img {
display: block;
float: right;
}
#hero p {
padding-top: 30px;
padding-bottom: 40px;
width: 500px;
}
input, select, textarea{
color: #62CE9C;
}
textarea:focus, input:focus {
color: #62CE9C;
}
input::-webkit-input-placeholder {
color: #62CE9C !important;
}
input:-moz-placeholder { /* Firefox 18- */
color: #62CE9C !important;
}
input::-moz-placeholder { /* Firefox 19+ */
color: #62CE9C !important;
}
input:-ms-input-placeholder {
color: #62CE9C !important;
}
p {
color: #FFFFFF;
font-family: Open Sans;
font-size: 18px;
line-height: 26px;
}
#save {
align-items: center;
display: block;
margin: auto;
width: 800px;
}
#savefood {
float: right;
margin: auto;
}
#savefoodimage {
float: right;
}
#savefoodtext {
float: right;
height: 300px;
margin-right: 30px;
padding-top: 30px;
width: 290px;
}
#savemoney {
float: left;
margin: auto;
}
#savemoneyimage {
float: left;
}
#savemoneytext {
float: left;
height: 300px;
margin-left: 30px;
padding-top: 30px;
width: 330px;
}
#savetime {
float: left;
margin: auto;
}
#savetimeimage {
float: left;
}
#savetimetext {
float: left;
height: 300px;
margin-left: 30px;
padding-top: 30px;
width: 330px;
}
#searchbar {
background-color: #FFFFFF;
border: none;
border-radius: 8px;
font-size: 18px;
height: 40px;
padding-left: 15px;
width: 300px;
}
#searchbutton {
background-color: #28C787;
border: none;
border-radius: 8px;
color: #FFFFFF;
font-size: 18px;
height: 40px;
margin-left: 20px;
width: 180px;
}
#searchbutton:hover {
background-color: #00BE8B;
}
#tweetone {
background-color: #FFFFFF;
border-radius: 25px;
height: 208px;
margin: auto;
margin-top: 60px;
padding-bottom: 30px;
padding-left: 25px;
padding-right: 25px;
padding-top: 30px;
width: 650px;
}
#tweetone img {
float: left;
padding-top: 10px;
}
#tweetonetext {
float: left;
padding-left: 15px;
width: 400px;
}
#tweettwo {
background-color: #FFFFFF;
border-radius: 25px;
height: 208px;
margin: auto;
margin-top: 60px;
padding-bottom: 30px;
padding-left: 25px;
padding-right: 25px;
padding-top: 30px;
width: 650px;
}
#tweettwo img {
float: left;
padding-top: 5px;
}
#tweettwotext {
float: left;
padding-left: 15px;
width: 400px;
}
#tweetthree {
background-color: #FFFFFF;
border-radius: 25px;
height: 208px;
margin: auto;
margin-top: 60px;
padding-bottom: 30px;
padding-left: 25px;
padding-right: 25px;
padding-top: 30px;
width: 650px;
}
#tweetthree img {
float: left;
height: 140px;
width: 140px;
}
#tweetthreetext {
float: left;
padding-left: 15px;
width: 400px;
}
ul {
list-style-type: none;
}
#vocational {
background-color: #62CE9C;
display: inline-block;
height: 1120px;
padding-bottom: 100px;
padding-left: 70px;
padding-right: 70px;
padding-top: 100px;
width: 100%;
}
#vocational h1 {
margin: auto;
text-align: center;
margin-bottom: 0px;
width: 500px;
}
#vocational p {
color: #62CE9C;
display: inline-block;
}
<!DOCTYPE html>
<html>
<head>
<link href="css/main.css" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="js/main.js"></script>
</head>
<body>
<div class="container clearfix" id="hero">
<div id="herocontent">
<div id="herotext">
<h1>Make the Most of your Food With Pantree</h1>
<p>Pantree for iOS lets you search for recipes based on the ingredients you already have in your home.</p>
<form id="subscribe" method="post" action="https://web-2-product-page.herokuapp.com/subscribers">
<input id="searchbar" type="text" name="email" placeholder="yourname#email.com">
<input id="searchbutton" type="submit" value="Get Early Access">
<p class="confirmation">Thank you!</p>
<p class="error-message">Incorrect E-mail Address.</p>
</form>
</div>
<img src="images/phone.png"/>
</div>
</div>
<div id="functions">
<div id=save>
<div id="savemoney">
<img id="savemoneyimage" src="images/savemoney.png"/>
<div id="savemoneytext">
<h2>Save Money</h2>
<p>Pantree finds you recipes containing ingredients you already have in your home, saving you from unecessary trips to the grocery store.</p>
</div>
</div>
<div id="savefood">
<img id="savefoodimage" src="images/savefood.png"/>
<div id="savefoodtext">
<h2>Save Food</h2>
<p>Pantree keeps track of expiration dates, alerting you when food will go stale so you can use it before it goes bad.</p>
</div>
</div>
<div id="savetime">
<img id="savetimeimage" src="images/savetime.png"/>
<div id="savetimetext">
<h2>Save Time</h2>
<p>Pantree's built-in kitchen organizing system helps you monitor all of the food in your home, so figuring out what food you have is quick & easy.</p>
</div>
</div>
</div>
</div>
<div id="vocational">
<h1>These Folks Could Use Pantree Every Day</h1>
<ul>
<li>
<div id="tweetone">
<img src="images/tweetone.png"/>
<div id="tweetonetext">
<h3>Kat</h3>
<h3>#devicat</h3>
<p>I have no idea what to make for dinner. I am so bad at this game. <span class="hashtag">#adulting</span></p>
</div>
</div>
</li>
<li>
<div id="tweettwo">
<img src="images/tweettwo.png"/>
<div id="tweettwotext">
<h3>Jack Falahee</h3>
<h3>#RestingPlatypus</h3>
<p>Dear Mom, How do I organize my kitchen? Love, me</p>
</div>
</div>
</li>
<li>
<div id="tweetthree">
<img src="images/tweetthree.png"/>
<div id="tweetthreetext">
<h3>mason ryan</h3>
<h3>#MasonTheManiac</h3>
<p>Something in my fridge smells really bad.... <span class="hashtag">#cantfindit</span></p>
</div>
</div>
</li>
</ul>
</div>
<div id="calltoaction">
<h1>Manage your Kitchen, Effortlessly</h1>
<p>Pantree makes it easy to find recipes, keep track of food, and organize your kitchen.</p>
<form id="subscribe" method="post" action="https://web-2-product-page.herokuapp.com/subscribers">
<input id="searchbar" type="text" name="email" placeholder="yourname#email.com">
<input id="searchbutton" type="submit" value="Get Early Access">
<p class="confirmation">Thank you!</p>
<p class="error-message">Incorrect E-mail Address.</p>
</form>
</div>
</body>
</html>
The site is connected to a Ruby On Rails server. The server automatically responds with "Invalid E-mail Address" when an incorrectly formatted e-mail is put in, but not a validation message.
I had incorrectly assumed the server responded with neither a validation or error message, and that I needed to create responses for both, and hide both initially and make it so that the javascript changed depending on the user input. Hence, this process only worked for the validation message, but not the error message. Once I removed "display:none" from the CSS of the .error-message class, the problem was immediately resolved!
$(document).ready(function() {
$('form').submit(function(event) {
var formData = $(this).serialize();
$.ajax({
type : 'POST',
url : 'https://web2-product-page.herokuapp.com/subscribers',
data : formData,
dataType : 'json'
}).done(function(data) {
console.log(data);
$('.confirmation').fadeIn();
$('.error-message').text("");
$('input[name=email]').val("");
}).fail(function(data) {
console.log(data);
var errorMessage = JSON.parse(data.responseText).email[0];
$('.error-message').text(errorMessage);
$('.confirmation').hide();
});
event.preventDefault();
});
});
* {
box-sizing: border-box;
}
#font-face {
font-family: 'gilroysemibold';
src: url('radomir_tinkov_-_gilroy-semibold-webfont.woff2') format('woff2'),
url('radomir_tinkov_-_gilroy-semibold-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
body {
margin: 0px;
}
#calltoaction {
background-image: url("calltoactionbackground.jpg");
background-size: 100%;
background-repeat: no-repeat;
display: inline-block;
height: 532px;
padding-bottom: 100px;
padding-left: 70px;
padding-right: 70px;
padding-top: 100px;
text-align: center;
width: 100%;
}
#calltoaction p {
margin: auto;
padding-top: 25px;
padding-bottom: 55px;
width: 500px;
}
.clearfix:before,
.clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
zoom: 1;
}
.confirmation {
display: none;
height: 0px;
}
#functions {
background-color: #FFFFFF;
display: block;
height: 1080px;
margin: auto;
padding-top: 100px;
width: 100%;
}
#functions p {
color: #62CE9C;
}
h1 {
color: #FFFFFF;
font-family: 'gilroysemibold';
font-size: 36px;
font-weight: lighter;
}
h2 {
color: #62CE9C;
font-family: 'gilroysemibold';
font-size: 30px;
font-weight: lighter;
}
h3 {
color: #00AF78;
font-family: Open Sans;
font-size: 18px;
line-height: 10px;
margin-bottom: 3px;
}
.hashtag {
color: #00AF78;
font-weight: bold;
}
#hero {
background-color: #62CE9C;
height: 650px;
margin: 0px;
padding-bottom: 100px;
padding-left: 120px;
padding-right: 120px;
padding-top: 100px;
width: 100%;
}
#herocontent {
margin: auto;
width: 900px;
}
#herotext {
float: left;
width: 600px;
}
#hero h1 {
width: 470px;
}
#hero img {
display: block;
float: right;
}
#hero p {
padding-top: 30px;
padding-bottom: 40px;
width: 500px;
}
input, select, textarea{
color: #62CE9C;
}
input::-webkit-input-placeholder {
color: #62CE9C !important;
}
input:-moz-placeholder { /* Firefox 18- */
color: #62CE9C !important;
}
input::-moz-placeholder { /* Firefox 19+ */
color: #62CE9C !important;
}
input:-ms-input-placeholder {
color: #62CE9C !important;
}
p {
color: #FFFFFF;
font-family: Open Sans;
font-size: 18px;
line-height: 26px;
}
#save {
align-items: center;
display: block;
margin: auto;
width: 800px;
}
#savefood {
float: right;
margin: auto;
}
#savefoodimage {
float: right;
}
#savefoodtext {
float: right;
height: 300px;
margin-right: 30px;
padding-top: 30px;
width: 290px;
}
#savemoney {
float: left;
margin: auto;
}
#savemoneyimage {
float: left;
}
#savemoneytext {
float: left;
height: 300px;
margin-left: 30px;
padding-top: 30px;
width: 330px;
}
#savetime {
float: left;
margin: auto;
}
#savetimeimage {
float: left;
}
#savetimetext {
float: left;
height: 300px;
margin-left: 30px;
padding-top: 30px;
width: 330px;
}
#searchbar {
background-color: #FFFFFF;
border: none;
border-radius: 8px;
font-size: 18px;
height: 40px;
padding-left: 15px;
width: 300px;
}
#searchbutton {
background-color: #28C787;
border: none;
border-radius: 8px;
color: #FFFFFF;
font-size: 18px;
height: 40px;
margin-left: 20px;
width: 180px;
}
#searchbutton:hover {
background-color: #00BE8B;
}
textarea:focus, input:focus {
color: #62CE9C;
}
#tweetone {
background-color: #FFFFFF;
border-radius: 25px;
height: 208px;
margin: auto;
margin-top: 60px;
padding-bottom: 30px;
padding-left: 35px;
padding-right: 25px;
padding-top: 30px;
width: 620px;
}
#tweetone img {
float: left;
height: 140px;
margin-top: 6px;
width: 140px;
}
#tweetonetext {
float: left;
margin-left: 15px;
margin-top: 8px;
padding-left: 15px;
width: 400px;
}
#tweettwo {
background-color: #FFFFFF;
border-radius: 25px;
height: 208px;
margin: auto;
margin-top: 60px;
padding-bottom: 30px;
padding-left: 35px;
padding-right: 25px;
padding-top: 30px;
width: 620px;
}
#tweettwo img {
float: left;
height: 140px;
margin-top: 6px;
width: 140px;
}
#tweettwotext {
float: left;
margin-left: 15px;
margin-top: 8px;
padding-left: 15px;
width: 400px;
}
#tweetthree {
background-color: #FFFFFF;
border-radius: 25px;
height: 208px;
margin: auto;
margin-top: 60px;
padding-bottom: 30px;
padding-left: 35px;
padding-right: 25px;
padding-top: 30px;
width: 620px;
}
#tweetthree img {
float: left;
height: 140px;
margin-top: 6px;
width: 140px;
}
#tweetthreetext {
float: left;
margin-left: 15px;
margin-top: 8px;
padding-left: 15px;
width: 400px;
}
ul {
list-style-type: none;
}
#vocational {
background-color: #62CE9C;
display: inline-block;
height: 1120px;
padding-bottom: 100px;
padding-left: 70px;
padding-right: 70px;
padding-top: 100px;
width: 100%;
}
#vocational h1 {
margin: auto;
text-align: center;
margin-bottom: 0px;
width: 500px;
}
#vocational p {
color: #62CE9C;
display: inline-block;
}
<!DOCTYPE html>
<html>
<head>
<link href="css/main.css" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="js/main.js"></script>
<script type="text/javascript" src="javascripts/modernizr.foundation.js"></script>
</head>
<body>
<div class="container clearfix" id="hero">
<div id="herocontent">
<div id="herotext">
<h1>Make the Most of your Food With Pantree</h1>
<p>Pantree for iOS lets you search for recipes based on the ingredients you already have in your home.</p>
<form id="subscribe" method="post" action="https://web-2-product-page.herokuapp.com/subscribers">
<input id="searchbar" type="text" name="email" placeholder="yourname#email.com">
<input id="searchbutton" type="submit" value="Get Early Access">
<p class="confirmation">Thank you!</p>
<p class="error-message"></p>
</form>
</div>
<img src="images/phone.png"/>
</div>
</div>
<div id="functions">
<div id=save>
<div id="savemoney">
<img id="savemoneyimage" src="images/savemoney.png"/>
<div id="savemoneytext">
<h2>Save Money</h2>
<p>Pantree finds you recipes containing ingredients you already have in your home, saving you from unecessary trips to the grocery store.</p>
</div>
</div>
<div id="savefood">
<img id="savefoodimage" src="images/savefood.png"/>
<div id="savefoodtext">
<h2>Save Food</h2>
<p>Pantree keeps track of expiration dates, alerting you when food will go stale so you can use it before it goes bad.</p>
</div>
</div>
<div id="savetime">
<img id="savetimeimage" src="images/savetime.png"/>
<div id="savetimetext">
<h2>Save Time</h2>
<p>Pantree's built-in kitchen organizing system helps you monitor all of the food in your home, so figuring out what food you have is quick & easy.</p>
</div>
</div>
</div>
</div>
<div id="vocational">
<h1>These Folks Could Use Pantree Every Day</h1>
<ul>
<li>
<div id="tweetone">
<img src="images/tweetone.jpg"/>
<div id="tweetonetext">
<h3>Kat</h3>
<h3>#devicat</h3>
<p>I have no idea what to make for dinner. I am so bad at this game. <span class="hashtag">#adulting</span></p>
</div>
</div>
</li>
<li>
<div id="tweettwo">
<img src="images/tweettwo.jpg"/>
<div id="tweettwotext">
<h3>Jack Falahee</h3>
<h3>#RestingPlatypus</h3>
<p>Dear Mom, How do I organize my kitchen? Love, me</p>
</div>
</div>
</li>
<li>
<div id="tweetthree">
<img src="images/tweetthree.jpg"/>
<div id="tweetthreetext">
<h3>mason ryan</h3>
<h3>#MasonTheManiac</h3>
<p>Something in my fridge smells really bad.... <span class="hashtag">#cantfindit</span></p>
</div>
</div>
</li>
</ul>
</div>
<div id="calltoaction">
<h1>Manage your Kitchen, Effortlessly</h1>
<p>Pantree makes it easy to find recipes, keep track of food, and organize your kitchen.</p>
<form id="subscribe" method="post" action="https://web-2-product-page.herokuapp.com/subscribers">
<input id="searchbar" type="text" name="email" placeholder="yourname#email.com">
<input id="searchbutton" type="submit" value="Get Early Access">
<p class="confirmation">Thank you!</p>
<p class="error-message"></p>
</form>
</div>
</body>
</html>
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.