I am having big trouble with my website as it is not being responsive. I already included the required script for adjusting page to device width on the html :
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
I also made sure I was using 320px as minimum device width and 688px as maximum for my media queries but it seems it doesn't work at all. By trouble I mean I am encountering the following issues:
First: Since editing the file on my liveport, I could notice that the page could scroll to the right, and if done, you can see like a kind of black "empty" space that goes from top to bottom of the entire document, again, located at the right hand of the page. This is my major issue as on mobile phones the page's content is not over the body but rather located at half over the body and this mysterious black empty space I cannot fix. I don't know if it has something to do with the body of the page, I already tried multiple methods but it still doesn't work.
Second: As a result of the first problem, some elements appear shifted and floating. It is as if this empty space is not part of the page and generates a strong distortion in the rest of it and its other elements.
[A picture of the issue][1]
The blue part is the body element, the black is not defined in any part of the document. It is also worth mentioning this is mobile view in a PC, as when viewing in phones it gets worse as this black spaces takes over have of the page's space.
The following code is my HTML and CSS for the page on PC and mobile devices, respectively:
body {
background: linear-gradient(to right, #000, #1d152f);
position: relative;
height: 100%;
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: 'Roboto Serif', serif;
font-weight: 400;
}
#media screen and (max-width: 688px) and (min-width: 320px) {
div.container {
display: grid;
grid-template-columns: auto;
max-width: 1440px;
margin-right: auto;
margin-left: auto;
padding-left: 25px !important;
padding-right: 25px !important;
}
h1 {
font-size: 3rem !important;
padding-left: 20px !important;
margin: 15px 15px;
}
.image-9 {
top: 250px !important;
right: 110px !important;
bottom: 0%;
max-width: 100% !important;
display: grid;
}
}
}
<body>
<div class="container">
<h1>Text goes here<br>text goes here<br>text goes here</h1><img src="" alt="" class="image-9">
<p style="color: #4a8ad3; font-family:'Roboto Serif', serif; font-size: 1.2rem; font-weight: bold;">text goes here</p>
<p class="max-700">text goes here</p>
</div>
<body>
<div class="redirect-modal" id="modal">
<div class="modal-content">
<div class="close">+</div>
<img src="" alt="logo" id="navbar__logo" class="modal__logo">
<br>
<br>
<strong style="font-size: 0.8rem;">text goes here</strong>
<p style="color: whitesmoke; font-size: 0.9rem; font-family: Roboto Serif;">By accessing this link you are leaving example.comtext goes here<br></p>
<form action="?" method="POST">
<div class="g-recaptcha" style="padding-left: 45px !important;" data-sitekey="6LeIxAcTAAAAAJcZVRqyHh71UMIEGNQ_MXjiZKhI" data-secretkey="6LeIxAcTAAAAAGG-vFI1TnRWxMZNFuojJ4WifJWe" data-callback="recaptcha_callback" data-theme="dark"></div>
<br/>
<!--input type="submit" value="Submit"-->
</form>
<p class="max-700" style="font-size: 0.7rem">By logging in, you agree to the Terms of Service</p>
<form action="example.com">
<button type="submit" value="login" id="link-to-app" class= "link-to-app" disabled><i class="fa-solid fa-up-right-from-square"></i>Login</button>
</form>
</script>
<script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit"
async defer>
</script>
</div>
</div>
</body>
Third: On media query view in PC, the image behind my h1 text is placed correctly, but again when viewed on mobile devices, it is completely messed up.
Fourth: There is a recaptcha at the footer that disables and enables a contact button that opens the user's email app. The recaptcha works fine in both types of devices, nevertheless, the button only works in computers and not in phones. This is the code I am using for this:
<form action="?" method="POST">
<div class="g-recaptcha" class="recaptcha_footer" style="padding-left: 20px !important;" data-sitekey="6LeIxAcTAAAAAJcZVRqyHh71UMIEGNQ_MXjiZKhI" data-secretkey="6LeIxAcTAAAAAGG-vFI1TnRWxMZNFuojJ4WifJWe" data-callback="recaptcha_callback" data-theme="dark"></div>
<br/>
<!--input type="submit" value="Submit"-->
</form>
<br>
<fieldset class="form-group text-xs-right">
<form action="mailto:myemail#gmail.com" method="POST" enctype="multipart/form-data">
<button onclick="sendContact();" type="submit" id="submit" style="width: fit-content; padding-left: 10px; padding-right: 10px; margin: 5px;" disabled>Send us an email</button>
</form>
</fieldset>
Fifth: I guess this is the result of all the issues described above; the page is obviously not adapting to device width and every time I open it on devices with different screen sizes it is completely different.
This is the Screenshot of the issue with the page being viewed on mobile view
The Issue is your .image-9 class. Add same css as shown below and add an image as shown in html below. I think this should work for you. Also a small tip: use background-color: #000; a backup for not supported browsers when using gradient colours.
Revised CSS-
* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: 'Roboto Serif', serif;
font-weight: 400;
}
body {
background-color: #000;
background: linear-gradient(to right, #000, #1d152f);
/* background-image: linear-gradient(to right, #000, #1d152f); */
position: relative;
height: 100%;
}
.modal__logo {
width: 10%;
}
.image-9 {
max-width: 100%;
padding: 0 1rem;
}
#media screen and (max-width: 688px) and (min-width: 320px) {
div.container {
/* display: grid; */
/* grid-template-columns: auto; */
max-width: 1440px;
margin-right: auto;
margin-left: auto;
padding-left: 25px !important;
padding-right: 25px !important;
}
h1 {
font-size: 3rem !important;
/* padding-left: 20px !important; */
/* margin: 15px 15px; */
}
/* .image-9 {
top: 250px !important;
right: 110px !important;
bottom: 0%;
max-width: 100% !important;
display: grid;
} */
}
Revised HTML -
<div class="container">
<h1>Text goes here<br>text goes here<br>text goes here</h1>
<img
src="https://images.pexels.com/photos/4577703/pexels-photo-4577703.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"
alt="" class="image-9">
<p style="color: #4a8ad3; font-family:'Roboto Serif', serif; font-size: 1.2rem; font-weight: bold;">text goes here
</p>
<p class="max-700">text goes here</p>
</div>
<div class="redirect-modal" id="modal">
<div class="modal-content">
<div class="close">+</div>
<img src="https://static.wixstatic.com/media/2c0034_400708cb5f7d44bcb1f272ebc2a51aab~mv2.png" alt="logo"
id="navbar__logo" class="modal__logo">
<br>
<br>
<strong style="font-size: 0.8rem;">text goes here</strong>
<p style="color: whitesmoke; font-size: 0.9rem; font-family: Roboto Serif;">By accessing this link you are
leaving example.comtext goes here<br></p>
<form action="?" method="POST">
<div class="g-recaptcha" class="recaptcha_footer" style="padding-left: 20px !important;"
data-sitekey="6LeIxAcTAAAAAJcZVRqyHh71UMIEGNQ_MXjiZKhI"
data-secretkey="6LeIxAcTAAAAAGG-vFI1TnRWxMZNFuojJ4WifJWe" data-callback="recaptcha_callback"
data-theme="dark"></div>
<br />
<!--input type="submit" value="Submit"-->
</form>
<br>
<fieldset class="form-group text-xs-right">
<form action="mailto:myemail#gmail.com" method="POST" enctype="multipart/form-data">
<button onclick="sendContact();" type="submit" id="submit"
style="width: fit-content; padding-left: 10px; padding-right: 10px; margin: 5px;" disabled>Send us an
email</button>
</form>
</fieldset>
<p class="max-700" style="font-size: 0.7rem">By logging in, you agree to the <a href="terms.html"
style="color: #4a8ad3; font-size: 0.8rem;">Terms of Service</a></p>
<form action="example.com">
<button type="submit" value="login" id="link-to-app" class="link-to-app" disabled><i
class="fa-solid fa-up-right-from-square"></i>Login</button>
</form>
<script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit" async defer>
</script>
</div>
</div>
Related
I am trying to create Google's Advanced Search page copy. I am new to programming and I'm having 2 problems. First is that link titled "google search" should be inside the gray bar positioned at the start of the page. Second, I am trying to write css code to reverse positions of texts and their correlated input fields, because I noticed in Google's html that it is also coded in reverse and then corrected from initial position.
Help would be greatly appreciated!
.label {
color: rgb(218, 32, 32);
margin-left: 15px;
padding: 15px;
margin-bottom: 15px;
} */
html, body {
padding: 0;
margin: 0;
font-size: 16px;
}
.navbar {
padding: 20px;
text-align: right;
size: default;
}
.navbar a {
margin: 0 10px;
color:black;
text-decoration: none;
}
.navbar a:hover{
text-decoration: underline;
}
.content {
margin-top:100px;
text-align:center;
}
#textbox {
font-size: large;
height: 30px;
width: 500px;
border-radius: 25px;
}
.graybar{
background-size: 75% 50%;
background: #f1f1f1;
font: 13px/27px Arial,sans-serif;
height: 60px;
width: 100%;
}
#image {
height: 33px;
width: 92px;
margin: 15px;
}
.margin {
margin-left: 10px;
margin-right: 10px;
margin-bottom: 10px;
}
body {
font-family: arial,sans-serif;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Advanced Search</title>
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body>
<div class="graybar">
<img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" id=image>
<div class=navbar>
<a href="index.html">
Google Search
</a>
</div>
</div>
<div class="label">Advanced Search</div>
<h3 style="font-weight:normal">Find pages with...</h3>
<form action="https://google.com/search">
<input class="margin" value autofocus="autofocus" id="xX4UFf" name="as_q" type="text">
<label for="xX4UFf" class="float">all these words:</label>
<br>
<input class="margin" value autofocus="autofocus" id="CwYCWc" name="as_epq" type="text">
<label for="CwYCWc" class="float">this exact word or phrase:</label>
<br>
<input class="margin" value autofocus="autofocus" id="mSoczb" name="as_oq" type="text">
<label for="mSoczb" class=float>any of these words:</label>
<br>
<input class="margin" value autofocus="autofocus" id="t2dX1c" name="as_eq" type="text">
<label for="t2dX1c" class="float">none of these words:</label>
<br>
<input type="submit">
</form>
</body>
</htmL>
Here is how website looks
Assuming that you can change your HTML, flexbox is the solution to both of your issues.
Let's start with your header. You need your image and your text to be both in the grey box, with the image on the left side and the text on the right side.
If you set your header to use display: flex, then you can specify justify-content: space-between to tell the browser to render the child elements with as much space as is possible between them. For two children, that will result in the first child being on the left, and the second child being on the right. If there were more children, they'd be spaced evenly between (eg left, middle, right for three children etc.)
In your case, this would simply require adding the appropriate styling to the .graybar class which is serving as your header:
.graybar {
display: flex;
flex-direction: row;
justify-content: space-between;
}
.graybar {
display: flex;
flex-direction: row;
justify-content: space-between;
background-size: 75% 50%;
background: #f1f1f1;
font: 13px/27px Arial, sans-serif;
height: 60px;
width: 100%;
}
.navbar {
padding: 20px;
text-align: right;
size: default;
}
.navbar a {
margin: 0 10px;
color: black;
text-decoration: none;
}
.navbar a:hover {
text-decoration: underline;
}
#image {
height: 33px;
width: 92px;
margin: 15px;
}
body {
font-family: arial, sans-serif;
}
<div class="graybar">
<img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" id=image>
<div class=navbar>
Google Search
</div>
</div>
I've left the other styling as you had in your original.
CSS's flexbox is extremely powerful; you can use it for your other issue with the labels/inputs as well, if you can modify your HTML. Looking at the actual Google advanced search page here, your HTML doesn't actually look anything like the original, so I'm assuming you're not restricted to keeping the same HTML as you have in your original post.
Let's instead structure our HTML like this:
<div class="row">
<input type="text" id="allwords" >
<label for="allwords">All these words</label>
</div>
We can now apply display: flex to each row and leverage the flex-direction property to reverse the order of the children so that the label is displayed prior to the input.
.row {
display: flex;
flex-direction: row-reverse;
justify-content: flex-end;
}
label {
display: block;
margin-right: 8px;
}
<div class="row">
<input type="text" id="allwords">
<label for="allwords">All these words:</label>
</div>
Generally I wouldn't recommend doing it like this, but I'm equally unsure why you're trying to force inputs before labels in your HTML. :)
For more information about CSS's flexbox, I highly recommend this guide from CSS-Tricks.
I'm currently working on freecodecamp's first test, so my question is probably dumb. I would like to change the line-height of #titles to a smaller one, while keeping it's background color. It's probably the display element, but I can't figure out what to do. Also, I'd like to get rid of the white line surrounding my image, right before the border...
<div id="main">
<div id="titles">
<h1 id="title">A tribute to Ocelote</h1>
<h2 id="title2">The man who has done it all.</h2>
</div>
<hr>
<div id="img-div">
<img id="image" src="https://theshotcaller.net/wp-content/uploads/2017/09/IMG_5488-1.jpg" alt="A photo of Ocelote">
<div id="img-caption"> A story of how far can one go, if only the desire is
there.
</div>
<div id="tribute-info">
<br>
<br>
fgj
</div>
<a id="tribute-link" href="https://lol.gamepedia.com/Ocelote" target="_blank"> </a>
</div>
</div>
https://jsfiddle.net/deffciu/hrna0Lfs/
any help is appreciated
Adding the below two rules to #titles makes it work:
#titles {
display: block;
background: #6C7E95;
line-height: 5px;
/* Add the below two rules */
overflow: hidden;
padding: 0 0 20px;
}
You get this:
Snippet
html, body {
font-family: 'Oswald', sans-serif;
text-align: center;
background: white;
}
#title2 {
color: #052449;
margin-bottom: 0px;
}
#titles {
display: block;
background: #6C7E95;
line-height: 5px;
/* Add the below two rules */
overflow: hidden;
padding: 0 0 20px;
}
#image {
border: 8px solid #052449;
border-radius: 50%;
width: 500px;
height: 375px;
margin-top: 15px;
}
hr {
border-color: #486282;
margin-top:0px;
}
#img-caption {
margin-top: 20px;
font-style: italic;
font-size: 25px;;
}
<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
<link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet">
<div id="main">
<div id="titles">
<h1 id="title">A tribute to Ocelote</h1>
<h2 id="title2">The man who has done it all.</h2>
</div>
<hr>
<div id="img-div">
<img id="image" src="https://theshotcaller.net/wp-content/uploads/2017/09/IMG_5488-1.jpg" alt="A photo of Ocelote">
<div id="img-caption"> A story of how far can one go, if only the desire is there.
</div>
<div id="tribute-info">
<br>
<br>
fgj
</div>
<a id="tribute-link" href="https://lol.gamepedia.com/Ocelote" target="_blank"> </a>
</div>
</div>
For the white border issue, it's your body's margins. The below code will fix it.
body {margin: 0;}
This is my HTML:
<div class="row trolibelanja">
<div class="col-md-3">
<img src="http://2.bp.blogspot.com/-WGiyrP7xGOk/VQlHwjgporI/AAAAAAAABHI/zLGXTH0-H2w/s1600/Mie%2BAyam%2B(4).jpg" class="detailfoto">
</div>
<div class="col-md-4">
<p class="detailnama">Mie Ayam Bakso</p>
<p class="detailtoko">Toko Bu Lastri</p>
</div>
<div class="col-md-2">
<p class="detailharga">Rp. 30.000</p>
</div>
<div class="col-md-2">
<div class="input-group">
<span class="input-group-btn">
<button class="btnjumlah" type="button">-</button>
</span>
<input type="text" class="form-control jumlah" value="1">
<span class="input-group-btn">
<button class="btnjumlah" type="button">+</button>
</span>
</div>
</div>
<div class="col-md-1">
</div>
</div>
This is my css:
body{
background-color: #661f61 !important;
font-family: 'Saira Extra Condensed', sans-serif !important;
}
.container-fluid.keranjang {
background-color: #e9e9e9;
flex: 1;
}
.container.keranjang {
}
.row.trolibelanja {
background-color: #e1e1e1;
position: relative;
padding-top: 10px;
padding-bottom: 23px;
}
.row.trolibelanja:after{
background-image: -webkit-linear-gradient(135deg, #6e1c64 25%, #e27f31 25%) !important;
position: absolute;
content: " ";
width: 100%;
height: 15px;
bottom: 0;
}
.detailfoto {
width: 100%;
height: 110px;
border: 6px solid white;
}
.detailnama{
font-size: 20px;
font-weight: bold;
}
.detailtoko{
line-height: 20px;
margin: -17px 0px;
}
.detailharga{
font-size: 20px;
font-weight: bold;
text-align: center;
}
.input-group .jumlah {
width: 50%;
text-align: center;
}
.input-group .btnjumlah {
background-color: #e27f31;
color: white;
border: 0;
font-size: 20px;
font-weight: bold;
padding: 0px 10px;
height: 100%;
}
I am trying to put text and form next to photo using bootstrap, as in photo below:
enter image description here
My code result:
enter image description here
Please let me know what am I missing? I tried each combination of display that i know, but they wouldn't work. Thank you
Arrange your columns properly. And you will be good. put image in one column (col-md-3 in this case) and rest of the content in another (col-md-9), then put all rest of the content in a new row. I would suggest that you have a better understanding of the rows and columns from bootstrap website.
https://www.w3schools.com/bootstrap/bootstrap_grid_system.asp
<div class="row trolibelanja">
<div class="col-md-3">
<img src="http://2.bp.blogspot.com/-WGiyrP7xGOk/VQlHwjgporI/AAAAAAAABHI/zLGXTH0-H2w/s1600/Mie%2BAyam%2B(4).jpg" class="detailfoto">
</div>
<div class="col-md-9">
<div class="row">
<div class="col-md-4">
<p class="detailnama">Mie Ayam Bakso</p>
<p class="detailtoko">Toko Bu Lastri</p>
</div>
<div class="col-md-2">
<p class="detailharga">Rp. 30.000</p>
</div>
<div class="col-md-2">
<div class="input-group">
<span class="input-group-btn">
<button class="btnjumlah" type="button">-</button>
</span>
<input type="text" class="form-control jumlah" value="1">
<span class="input-group-btn">
<button class="btnjumlah" type="button">+</button>
</span>
</div>
</div>
</div>
</div>
</div>
Add flex-wrap: nowrap; to your .row.trolibelanja like this:
.row.trolibelanja {
background-color: #e1e1e1;
position: relative;
padding-top: 10px;
padding-bottom: 23px;
flex-wrap: nowrap;
}
I made codepen example with your code: https://codepen.io/anon/pen/wPZoXX
i ran your code on bootsnipp and found everything is placed side by side to each other, except for the fact that you did not add img-responsive to the image class. and that the below code is distorting your design.
.row.trolibelanja:after{
background-image: -webkit-linear-gradient(135deg, #6e1c64 25%, #e27f31 25%) !important;
position: absolute;
content: " ";
width: 100%;
height: 15px;
bottom: 0;
}
dont you what you intent designing with that, but i think you need to run a check that css code .
when i added your css to it, it distort the whole code.
first review your CSS is well written , targeting the right class.
second add img-responsive to the img class and i think you are good
to go.
I'm making a webpage for one of my projects and I'm trying to align the Upload buttons beside a text field. Maybe better explained as a picture. You can see that the two buttons are aligned on the bottom left of the submit button. I want it to be aligned on the left of the device Id text field. I've tried setting the display attributes for the text field, as well as the two buttons but it didn't work. I tried setting the float properties, which also didn't work. I was looking at grids I could possibly use from Purecss.io, but I'm not sure if that would fix the problem. I've tried using vertical-align attribute, still no dough.
I'm using a plain bootstrap theme. My HTML skills are pretty basic coming from Java. Anyone know what I can do here?
Here is my main container:
<div class="container">
<!-- Main content here -->
<div id="main">
<h1 id="mainheader">Send an image to a Wearable device</h1>
<hr>
<form method="post" action="/gcm/gcm.php/?push=true" onsubmit="return checkTextAreaLen()">
<textarea id="deviceID" rows="1" name="message" cols="25" placeholder="Device ID"></textarea> <br/>
<button type="submit" id="mainbutton" class="button-xlarge pure-button">Send Image</button>
</form>
<form action="upload.php" method="post" enctype="multipart/form-data">
Select image to upload:
<div id="filebutton">
<input type="file" name="fileToUpload" id="fileToUpload">
</div>
<input type="submit" value="Upload Image" name="submit">
</form>
</div>
Here are my styles
#main {
vertical-align: middle;
}
#status{
text-align: center;
background-color: #FFFFFF;
padding: 10px;
margin-top: 25px;
}
#mainheader{
margin-bottom: 20px;
text-align: center;
font-family: 'Raleway', sans-serif;
}
#deviceID {
display: block;
margin-left: auto;
margin-right: auto;
}
#mainbutton {
display: block;
margin-left: auto;
margin-right: auto;
}
.button-xlarge {
font-size: 125%;
width:350px;
background: rgb(66, 184, 221); /* this is a light blue */
}
Here is a preview image: (Having trouble uploading it directly)
http://tinypic.com/view.php?pic=1z499gw&s=8
EDIT:
I somewhat fixed this by applying "float:right" on the first whole form, the text area and the button. There is still a huge horizontal between the two.
#main {
float:right;
}
#main {
text-align: center;
}
#mainheader{
margin-bottom: 20px;
text-align: center;
font-family: 'Raleway', sans-serif;
}
#mainbutton {
display: block;
margin: 35px auto;
}
.button-xlarge {
font-size: 125%;
width:350px;
background: rgb(66, 184, 221); /* this is a light blue */
}
input[type="submit"], #deviceID {
display: inline;
vertical-align: middle;
margin-top: 35px;
}
.left{
float: left;
text-align: left;
}
<div id="main">
<h1 id="mainheader">Send an image to a Wearable device</h1>
<hr>
<form method="post" action="/gcm/gcm.php/?push=true" onsubmit="return checkTextAreaLen()">
<textarea id="deviceID" rows="1" name="message" cols="25" placeholder="Device ID"></textarea>
<input type="submit" value="Upload Image" name="submit">
<button type="submit" id="mainbutton" class="button-xlarge pure-button">Send Image</button>
</form>
<form class="left" action="upload.php" method="post" enctype="multipart/form-data">
Select image to upload:
<div id="filebutton">
<input type="file" name="fileToUpload" id="fileToUpload">
</div>
</form>
</div>
i think this is what you are asking for.
i rearranged your html a little and added a couple of css rules.
by setting the display on the device id field and the upload button to inline instead of block i got them to be on the same line.
i used vertical-align to... well... align them. and gave them a margin-top.
then floated your second form to the left.
Im having trouble getting rid of the border at the bottom of my website, www.goodlord.co. It is a single page scroller.
The last image is the problem I need to extend it to the end of the whole website but each time i do that the website its self extends. I would really appreciate any help.
Tom
This is the Style Sheet for the section css.
section{ background: #fff; }
body{ -webkit-font-smoothing: antialiased; #fefefe; }
#main-container{ overflow: hidden; }
input{ -webkit-appearance: none; }
input:focus{ outline: none; }
.nopad{ padding: 0px; }
.offix{ overflow: hidden; }
.pad-normal{ padding-top: 66px; padding-bottom: 34px; }
.pad-large{ padding-top: 60px; padding-bottom: 60px; }
.pad-end{ padding-top: 60px; padding-bottom: 60px; }
.pad-large-top{ padding-top: 99px; }
.pad-large-bottom{ padding-bottom: 99px; }
.pad-top{ padding-top: 66px; }
.pad-bottom{ padding-bottom: 66px; }
.space-top{ margin-top: 22px; }
.space-top-large{ margin-top: 44px; }
::selection {color:#fff;background:#444444;}
::-moz-selection {color:#fff;background:#444444;}
This is the index for the section.
<a id="contact-scroll"></a>
<section id="contact" class="text-divider bg-cover pad-end">
<img alt="Slider Background" class="divider-bg" src="img/estate.jpg" />
<div class="divider-overlay"></div>
<div class="row divider-content">
</div>
<div class="row divider-content">
<div class="medium-8 medium-centered columns">
<form id="contact-form" class="text-center">
<h1 class="text-white">Get in touch</h1>
<input id="form-name" type="text" placeholder="Name" />
<input id="form-email" type="text" placeholder="Email" />
<input id="form-msg" type="text" placeholder="Message" />
<div class="text-right">
<span id="details-error" class="text-white">*Error: Please complete all fields correctly</span>
<span id="form-sent" class="text-white">Thankyou, your enquiry has been sent!</span>
<div class="btn white-btn clear-btn"><h6 class="alt-h text-white">Clear</h6></div>
<div id="form-btn" class="btn white-btn"><h6 class="alt-h text-white">Send</h6></div>
</div>
</form>
</div>
</div>
Having a look, that last white border is actually padding, not border.
the final section with ID '#work' has the '.pad-large' class on it. remove it and the final image should butt up right to the bottom of the page.
You might need to restore the top padding of the item, as .pad-large adds 60px padding to the top and bottom of the item.