I am making a little form and have some line-breaks so that the text boxes are ontop of eachother. I can't seem to get the submit button and radio buttons to the right to start at the top of the form. Any ideas on what I need to do to achieve my goal design?I just need to shift the stuff to the right of the input text boxes up so they are inline with the "Restaurant Name" box
main {
margin-left: 88px;
margin-right: 88px;
}
#search_button {
height: 35px;
width: 60px;
border: 1px solid #ebebeb;
background-color: #bb0000;
font-size: 1em;
color: white;
border-radius: 8px;
margin-left: 12px;
cursor: pointer;
}
.textbox {
padding-left: 8px;
margin-bottom: 5px;
height: 28px;
width: 400px;
border: 1px solid #ebebeb;
border-radius: 3px;
}
<main>
<img id="header" src="images/header.jpeg">
<div>
<form>
<input type="text" placeholder="Restaurant Name" class="textbox"><br/>
<input type="text" placeholder="Location" class="textbox">
<button type="submit" id="search_button">
<i class="fa fa-search"></i>
</button>
<input type="radio" value="Best Match" name="search_terms">
<label>Best Match</label>
<input type="radio" value="Review Count" name="search_terms">
<label>Review Count</label> <br/>
<input type="radio" value="Rating" name="search_terms">
<label>Rating</label>
<input type="radio" value="Distance" name="search_terms">
<label>Distance</label> <br/>
</form>
</div>
</main>
My Current Code (BAD):
My Design Goal:
flexbox would be the best here. It has all the needed stuff to format your design to specifications. Also, don't be afraid to use divs, they exist to be used to format. HTML needs to be foolproof, since it will be used on a large number of devices, and it is prone to breaking if you do not nest well enough.
main {
margin-left: 88px;
margin-right: 88px;
}
#search_button {
height: 35px;
width: 60px;
border: 1px solid #ebebeb;
background-color: #bb0000;
font-size: 1em;
color: white;
border-radius: 8px;
margin-left: 12px;
cursor: pointer;
}
.textbox {
padding-left: 8px;
margin-bottom: 5px;
height: 28px;
width: 100%;
max-width: 400px;
box-sizing: border-box;
border: 1px solid #ebebeb;
border-radius: 3px;
}
.form {
display: flex;
flex-direction: row;
align-items: flex-start;
}
.left, .right {width: 50%;}
<main>
<img id="header" src="images/header.jpeg">
<div>
<form class="form">
<div class="left">
<input type="text" placeholder="Restaurant Name" class="textbox"><br/>
<input type="text" placeholder="Location" class="textbox">
</div>
<div class="right">
<button type="submit" id="search_button">
<i class="fa fa-search"></i>
</button>
<input type="radio" value="Best Match" name="search_terms">
<label>Best Match</label>
<input type="radio" value="Review Count" name="search_terms">
<label>Review Count</label> <br/>
<input type="radio" value="Rating" name="search_terms">
<label>Rating</label>
<input type="radio" value="Distance" name="search_terms">
<label>Distance</label> <br/>
</div>
</form>
</div>
</main>
I had to add a few more divs in order to make it cleanly.
When in doubt, use flexbox.
Biggest change is spliting your form into columns using flexbox and then using again flexbox in those columns to create desired layout.
Lines that I have added has been marked with /* added */. html you will figure out yourself.
main {
margin-left: 88px;
margin-right: 88px;
}
form { /* added */
display: flex; /* added */
column-gap: 12px; /* added */
} /* added */
.form-column { /* added */
width: fit-content; /* added */
display: flex; /* added */
flex-wrap: wrap; /* added */
} /* added */
.textbox {
padding-left: 8px;
margin-bottom: 5px;
height: 28px;
max-width: 400px;
width: 100%; /* added */
border: 1px solid #ebebeb;
border-radius: 3px;
}
.radio-group { /* added */
flex: 0 0 50%; /* added */
max-width: 50%; /* added */
} /* added */
#search_button {
height: 35px;
width: 60px;
border: 1px solid #ebebeb;
background-color: #bb0000;
font-size: 1em;
color: white;
border-radius: 8px;
cursor: pointer;
}
<main>
<form>
<div class="form-column">
<input type="text" placeholder="Restaurant Name" class="textbox">
<input type="text" placeholder="Location" class="textbox">
</div>
<div class="form-column">
<button type="submit" id="search_button">
<i class="fa fa-search"></i>
</button>
</div>
<div class="form-column">
<div class="radio-group">
<input type="radio" value="Best Match" name="search_terms">
<label>Best Match</label>
</div>
<div class="radio-group">
<input type="radio" value="Review Count" name="search_terms">
<label>Review Count</label>
</div>
<div class="radio-group">
<input type="radio" value="Rating" name="search_terms">
<label>Rating</label>
</div>
<div class="radio-group">
<input type="radio" value="Distance" name="search_terms">
<label>Distance</label>
</div>
</div>
</form>
</main>
This can be done well with flexbox. In addition to #GhostPengy, I have added a flexbox to the right area.
main {
margin-left: 88px;
margin-right: 88px;
}
#search_button {
height: 35px;
width: 60px;
border: 1px solid #ebebeb;
background-color: #bb0000;
font-size: 1em;
color: white;
border-radius: 8px;
margin-left: 12px;
cursor: pointer;
}
.textbox {
padding-left: 8px;
margin-bottom: 5px;
height: 28px;
width: 100%;
max-width: 400px;
box-sizing: border-box;
border: 1px solid #ebebeb;
border-radius: 3px;
}
.form {
display: flex;
flex-direction: row;
align-items: flex-start;
}
.left, .right {width: 50%;}
.right {
display: flex;
}
<main>
<img id="header" src="images/header.jpeg">
<div>
<form class="form">
<div class="left">
<input type="text" placeholder="Restaurant Name" class="textbox"><br/>
<input type="text" placeholder="Location" class="textbox">
</div>
<div class="right">
<div>
<button type="submit" id="search_button">
<i class="fa fa-search"></i>hello
</button>
</div>
<div>
<input type="radio" value="Best Match" name="search_terms">
<label>Best Match</label>
<input type="radio" value="Review Count" name="search_terms">
<label>Review Count</label> <br/>
<input type="radio" value="Rating" name="search_terms">
<label>Rating</label>
<input type="radio" value="Distance" name="search_terms">
<label>Distance</label> <br/>
</div>
</div>
</form>
</div>
</main>
Use display flex for making it desired and responsive for all kind of screens.
Code below - Working example here.
HTML -
<main>
<div>
<form>
<div class="form-container">
<div class="col-50">
<input
type="text"
placeholder="Restaurant Name"
class="textbox"
/><br />
<input type="text" placeholder="Location" class="textbox" />
</div>
<div class="col-50">
<div>
<button type="submit" id="search_button">
<i class="fa fa-search"></i>
</button>
</div>
<div class="radio-buttons-container">
<label class="radio-element">
<input type="radio" value="Best Match" name="search_terms" />
Best Match</label
>
<label class="radio-element">
<input type="radio" value="Review Count" name="search_terms" />
Review Count</label
>
<label class="radio-element">
<input type="radio" value="Rating" name="search_terms" />
Rating</label
>
<label class="radio-element">
<input type="radio" value="Distance" name="search_terms" />
Distance</label
>
<br />
</div>
</div>
</div>
</form>
</div>
</main>
And CSS -
* {
box-sizing: border-box;
}
main {
padding: 24px;
}
main .form-container {
display: flex;
gap: 8px;
flex-wrap: wrap;
}
.form-container .col-50 {
flex: 1;
min-width: 200px;
}
.form-container .col-50:last-of-type {
display: flex;
gap: 8px;
}
.radio-buttons-container {
display: flex;
flex-wrap: wrap;
}
.radio-buttons-container .radio-element {
min-width: 50%;
white-space: nowrap;
}
#search_button {
height: 35px;
width: 60px;
border: 1px solid #ebebeb;
background-color: #bb0000;
font-size: 1em;
color: white;
border-radius: 8px;
cursor: pointer;
}
.textbox {
padding-left: 8px;
margin-bottom: 5px;
height: 28px;
width: 100%;
max-width: 100%;
border: 1px solid #ebebeb;
border-radius: 3px;
}
You can divide form in two columns like this and can further customize CSS properties on those
You can open the following code snippet in full screen or can checkout the same on Codepen, you can make it responsive accordingly too
main {
margin-left: 88px;
margin-right: 88px;
}
#search_button {
height: 35px;
width: 60px;
border: 1px solid #ebebeb;
background-color: #bb0000;
font-size: 1em;
color: white;
border-radius: 8px;
margin-left: 12px;
cursor: pointer;
}
.textbox {
padding-left: 8px;
margin-bottom: 5px;
height: 28px;
width: 400px;
border: 1px solid #ebebeb;
border-radius: 3px;
}
* {
box-sizing: border-box;
}
.column {
float: left;
padding: 10px;
}
.row:after {
content: "";
display: table;
clear: both;
}
<main>
<img id="header" src="images/header.jpeg">
<div>
<form>
<div class="row">
<div class="column">
<input type="text" placeholder="Restaurant Name" class="textbox"><br />
<input type="text" placeholder="Location" class="textbox">
<button type="submit" id="search_button">
<i class="fa fa-search"></i>
</button>
</div>
<div class="column">
<input type="radio" value="Best Match" name="search_terms">
<label>Best Match</label>
<input type="radio" value="Review Count" name="search_terms">
<label>Review Count</label> <br />
<input type="radio" value="Rating" name="search_terms">
<label>Rating</label>
<input type="radio" value="Distance" name="search_terms">
<label>Distance</label> <br />
</div>
</div>
</form>
</div>
</main>
I'm Having trouble with my radio buttons, I don't want them to entirely fill the circle. Any word of advice. Here is link to what is happening on Codepen.
https://codepen.io/winterlion/pen/LYYJwZP
.item .text {
position: absolute;
display: inline-block;
cursor: pointer;
}
.item .text:before {
content: '';
display: inline-block;
vertical-align: text-bottom;
width: 18px;
height: 18px;
margin-right: 5px;
border-radius: 50%;
border: 2px solid #235b96;
outline: none;
box-shadow: 0 0 5px 0px gray inset;
}
.item input[type="radio"] {
display: none;
}
.item input[type="radio"]:checked+label .text:before {
content: '';
color: #235b96;
background-color: #479623;
}
<div class="item">
<input type="radio" id="r1" name="group1" value="trial1" />
<label for="r1" class="wrapper">
<span class="background"></span>
<h1 class="rp-text">Radio Buttons</h1>
<hr class="split-hr">
<br>
<span class="text"></span>
</label>
</div>
<div class="item">
<input type="radio" id="r2" name="group1" value="trial2" />
<label for="r2" class="wrapper">
<span class="background"></span>
<h1 class="rp-text">Buttons</h1>
<span class="text"></span>
</label>
</div>
If I understood your question right, you just want to move styles related to a green dot to an ::after pseudo element that must be a bit smaller than ::before.
.item .text {
position: absolute;
display: inline-block;
cursor: pointer;
}
.item .text::before,
.item .text::after {
content: '';
display: inline-block;
margin-right: 5px;
border-radius: 50%;
}
.item .text::before {
width: 18px;
height: 18px;
border: 2px solid #235b96;
box-shadow: 0 0 5px 0px gray inset;
}
.item input[type="radio"]:checked + label .text::after {
width: 12px;
height: 12px;
position: absolute;
left: 5px;
top: 5px;
}
.item input[type="radio"] {
display: none;
}
.item input[type="radio"]:checked + label .text:after {
color: #235b96;
background-color: #479623;
}
<div class="item">
<input type="radio" id="r1" name="group1" value="trial1" />
<label for="r1" class="wrapper">
<span class="background"></span>
<h1 class="rp-text">Radio Buttons</h1>
<hr class="split-hr">
<br>
<span class="text"></span>
</label>
</div>
<div class="item">
<input type="radio" id="r2" name="group1" value="trial2" />
<label for="r2" class="wrapper">
<span class="background"></span>
<h1 class="rp-text">Buttons</h1>
<span class="text"></span>
</label>
</div>
Hey Guys I Was setting a media query with a max width of 715px. I only wanted to change the background position of the header because the background image wasn't centered. So I moved it background-position: -300px; but now when I switch to the galaxy S5 for example the screen width is 640px so it will catch the styles from the 715px query, but the height is 360px so the image goes halfway off the screen. I thought I could fix this using
`#media screen and (max-width: 640px) , screen and (max-height: 360px) {
header {
background-position: 0px;
}
}`
and set the image position back to normal just when it has that width plus the height, this doesn't work though? Any ideas?
html, body {
margin: 0;
padding: 0;
}
/*---HEADER---*/
header {
background-image: url(https://www.pymnts.com/wp-content/uploads/2018/05/construction-late-payments.jpg);
background-attachment: fixed;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
width: 100%;
height: 65vh;
}
.careers-wrapper{
width: 100%;
height: 65vh;
display: flex;
justify-content: center;
align-items: center;
background-color: rgba(0, 0, 0, 0.2);
}
header h1 {
color: white;
font-size: 5rem;
font-family: 'Arvo';
margin: 0;
}
/*---NAV---*/
nav {
background-color: white;
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
position: fixed;
top: 0;
left: 0;
z-index: 2;
box-shadow: 0px 0px 100px grey;
}
li a {
text-decoration-line: none;
color: rgba(102,102,102,0.75);
}
ul {
margin-right: 30px;
margin-top: 25px;
}
li {
display: inline-block;
font-size: 1.55rem;
margin-right: 20px;
font-family: 'Rajdhani';
}
li a:hover {
cursor: pointer;
color: #1a1a1a;
transition: all 0.7s ease;
}
.after:after {
position: relative;
left: 12px;
top: 2px;
display: inline-block;
content: "";
width: 1px;
height: 20px;
background-color: rgba(102,102,102,0.25);
}
.logo {
color: red;
font-size: 3.7rem;
margin: 10px;
opacity: 1;
margin-left: 30px;
}
/*---FORM---*/
form {
border: 1px solid black;
margin-top: 10px;
margin-left: 30px;
margin-right: 30px;
background-color: rgba(102, 102, 102, 0.15);
border-radius: 5px;
}
.form h2 {
font-family: 'Rajdhani';
color: rgba(102,102,102, 0.85);
font-size: 3rem;
text-align: center;
margin-top: 20px;
margin-bottom: 20px;
}
.form h2:after {
content: '';
width: 18px;
height: 2px;
background-color: red;
display: inline-block;
margin-left: 5px;
margin-bottom: 13px;
}
.form h2:before {
content: '';
width: 18px;
height: 2px;
background-color: red;
display: inline-block;
margin-right: 5px;
margin-bottom: 13px;
}
.form .row {
margin: 20px;
display: flex;
}
label {
color: black;
}
label, input {
font-size: 1.3rem;
font-family: 'Rajdhani';
}
.label {
background-color: rgba(102, 102, 102, 0.3);
display: flex;
justify-content: center;
align-items: center;
}
.middle {
margin-left: 15px;
margin-right: 15px;
}
.row-1 input, .row-3 input {
flex-basis: 33.33%;
}
.row-2 input {
width: 100%;
}
.row-4 {
justify-content: space-between;
}
.row-4 input, .row-4 .label {
flex-basis: 24%;
}
.row-5 {
flex-direction: column;
}
.radio {
margin-top: 10px;
}
.row-6 {
justify-content: space-between;
}
.row-6 input, .row-6 .label {
flex-basis: 24%;
}
.row-7 {
justify-content: space-between;
}
.row-7 .col {
flex-basis: 50%;
}
.row-8 {
justify-content: space-between;
}
.row-8 .col {
flex-basis: 50%;
}
.crime-textarea {
margin-top: 10px;
display: none;
resize: none;
}
#crime-yes:checked ~ textarea {
display: block;
}
.row-9 {
justify-content: space-between;
}
.row-9 .label {
flex-basis: 24%;
}
.row-9 input {
margin-left: 15px;
flex-grow: 1;
}
.row-10 {
justify-content: space-between;
}
.row-10 input, .row-10 .label {
flex-basis: 24%;
}
.row-11 {
justify-content: space-between;
}
.row-11 input, .row-11 .label {
flex-basis: 24%;
}
.row-12 {
justify-content: space-between;
}
.row-12 input, .row-12 .label {
flex-basis: 24%;
}
.row-13 {
justify-content: space-between;
}
.row-13 input, .row-13 .label {
flex-basis: 24%;
}
h3 {
font-family: 'Rajdhani';
text-align: center;
}
/*---TABLE---*/
table {
width: 95%;
margin-right: auto;
margin-left: auto;
border-spacing: 15px;
}
thead tr {
background-color: rgba(102, 102, 102, 0.3);
color: black;
}
thead th {
font-size: 1.3rem;
font-family: 'Rajdhani';
}
th td {
margin-right: 10px;
margin-left: 10px;
}
tbody input {
width: 100%;
}
#submit {
background-color: red;
border: none;
color: white;
outline: none;
font-size: 1.5rem;
padding: 7px;
width: 35%;
align-self: center;
border-radius: 5px;
margin-right: auto;
margin-left: auto;
margin-top: 5px;
margin-bottom: 20px;
display: block;
transition: all 0.3s ease;
}
#submit:hover {
cursor: pointer;
background-color: #cc0000;
}
/*---FOOTER---*/
.footer .wrapper {
display: flex;
}
.footer div {
display: inline-block;
flex-basis: 33.33%;
font-family: 'Rajdhani';
color: rgba(102,102,102, 1);
margin-top: 5px;
}
.footer h1 {
font-size: 2rem;
margin-top: 15px;
}
.footer .inner {
margin-left: 55px;
}
.social .inner {
margin-left: 45px;
}
.contact .inner {
margin-left: 35px;
}
.footer .inner:before {
display: inline-block;
content: '';
width: 27.1%;
height: 2px;
background-color: rgba(102,102,102, 0.6);
position: absolute;
margin-top: 54px;
}
.footer h1 span {
display: inline;
position: relative;
}
.footer h1 span:after {
content: '';
height: 2px;
width: 100%;
background-color: red;
position: absolute;
bottom: 0;
left: 0;
}
.wrap:before {
content: '';
width: 100px;
height: 2px;
background-color: red;
position: absolute;
margin-top: 55px;
}
.links a {
display: block;
text-decoration-line: none;
color: rgba(102,102,102, 1);
font-size: 1.2rem;
position: relative;
top: -10px;
transition: color 0.4s ease;
}
.links a:hover {
color: red;
}
.contact p {
position: relative;
top: -10px;
}
.social i {
font-size: 1.7rem;
margin-right: 5px;
position: relative;
top: -20px;
color: rgba(102,102,102, 0.7);
transition: all 0.4s ease;
}
.social i:hover {
color: red;
cursor: pointer;
}
#msg {
margin-top: -15px;
}
.footer-textarea {
background-color: rgba(102,102,102, 0.2);
outline: none;
color: rgba(102,102,102, 1);
resize: none;
width: 89%;
}
.footer button {
float: right;
margin-right: 9.5%;
margin-top: -17px;
border: none;
font-family: 'Rajdhani';
font-size: 1.2rem;
transition: all ease 0.4s;
outline: none;
}
button:hover {
cursor: pointer;
color: red;
}
.dark {
color: red;
}
.copyright {
position: absolute;
background-color: white;
text-align: center;
width: 100%;
margin-bottom: 0;
font-size: 1.2rem;
padding-bottom: 4px;
}
/*-------MEDIA QUERIES-------*/
/*---LAPTOP-LARGE---*/
#media screen and (max-width: 1440px) {
/*---FOOTER---*/
.footer button {
margin-left: 16.5%;
}
}
/*---TABLET-LARGE---*/
#media screen and (max-width: 1024px) {
/*---NAV---*/
.logo {
font-size: 5rem;
}
nav li {
font-size: 2.5rem;
}
/*---MAIN---*/
header {
background-position: -700px;
}
/*---FOOTER---*/
.footer .inner {
margin-left: 30px;
}
.footer-textarea {
width: 88%;
}
.footer button {
margin-right: 10.25%;
}
}
#media screen and (max-width: 823px) {
/*---MAIN---*/
header, .careers-wrapper {
height: 65vh;
}
.label {
font-size: 1rem;
padding: 0;
}
}
#media screen and (max-width: 812px) {
/*---NAV---*/
nav li {
font-size: 1.7rem;
}
.logo {
font-size: 2.7rem;
}
/*---MAIN---*/
header, .careers-wrapper {
height: 100vh;
}
label {
font-size: 1rem;
}
/*---FOOTER---*/
.footer button {
margin-left: 8.5%;
}
.contact .inner {
margin-right: 20px;
}
}
#media screen and (max-width: 768px) {
/*---NAV---*/
nav li {
font-size: 1.6rem;
}
.logo {
font-size: 3rem;
}
/*---MAIN---*/
header {
background-position: -600px;
}
header, .careers-wrapper {
height: 65vh;
}
.row-1 input, .row-2 input, .row-3 input {
font-size: 1.2rem;
}
/*---FOOTER---*/
.footer button {
margin-left: 7.4%;
}
}
#media screen and (max-width: 731px) {
/*---MAIN---*/
header {
background-position: 0px;
}
/*---FOOTER---*/
.footer button {
margin-left: 6%;
}
.contact .inner p {
margin: 5px;
}
}
/*------LANDSCAPE-MODE-MOBILE------*/
#media screen and (max-width: 715px) {
/*---NAV---*/
nav ul {
padding-left: 0;
margin: 0;
}
nav li {
font-size: 1.4rem;
}
nav .logo {
font-size: 2.5rem;
}
/*---MAIN---*/
header, .careers-wrapper {
height: 100vh;
}
header {
background-position: -300px;
}
form {
margin-left: 10px;
margin-right: 10px;
}
.row {
flex-direction: column;
}
.middle {
margin: 0;
}
.row-1 input, .row-3 input {
margin-top: 5px;
margin-bottom: 5px;
}
.row-4 input, .row-6 input {
margin-bottom: 7px;
}
.row-9 input {
margin-left: 0;
}
#submit {
width: 90%;
}
/*---FOOTER---*/
.links a {
font-size: 1.1rem;
top: -13px;
}
.contact .inner {
margin-right: 15px;
}
.contact p {
margin: 5px;
}
.footer-textarea {
position: relative;
top: -5px;
width: 90.5%;
}
.footer button {
margin-top: -18px;
margin-right: 7%;
font-size: 1.1rem;
}
}
#media screen and (max-width: 640px) , screen and (max-height: 360px) {
header {
background-position: 0px;
}
}
#media screen and (max-width: 586px) {
/*---MAIN---*/
header h1 {
font-size: 3.5rem;
}
/*---FOOTER---*/
.footer .wrapper {
display: flex;
flex-direction: column;
}
.footer div {
margin: 0;
}
.footer h1 {
font-size: 2rem;
margin-top: 10px;
}
.footer .inner {
margin: 0;
}
.footer .inner:before {
display: inline-block;
content: '';
width: 100vw;
height: 2px;
background-color: rgba(102,102,102, 0.6);
position: absolute;
margin-top: 48px;
}
.footer h1 span:after {
content: '';
height: 2px;
width: 100%;
background-color: red;
position: absolute;
bottom: 1px;
left: 0;
}
.social .inner {
position: relative;
top: -10px;
}
.links a {
margin-left: 5px;
}
.social h1 {
margin-bottom: 10px;
}
#msg {
font-size: 1rem;
margin-bottom: 0;
margin-right: 25.5%;
position: absolute;
right: 5px;
top: 80px;
}
.footer button {
right: 9.25%;
margin-top: 0.2px;
}
.social i {
font-size: 1.8rem;
margin-right: 2px;
position: relative;
top: -5px;
left: 5px;
color: rgba(102,102,102, 0.7);
transition: all 0.4s ease;
}
.footer-textarea {
width: 88.5%;
margin-top: 25px;
margin-left: 5px;
}
.contact p {
margin: 5px;
font-size: 1.2rem;
}
.copyright {
background-color: red;
padding-top: 10px;
padding-bottom: 10px;
}
.copyright span {
color: white;
background-color: red;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Careers | Kane Concrete & Construction LLC</title>
<link rel="stylesheet" href="../css/careers.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Arvo|Bitter|Lato|Montserrat|Noto+Sans|Open+Sans|Poppins|Roboto|Sarabun|Ubuntu" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Abel|Asap|Krub|Oxygen|Rajdhani|Staatliches|Varela+Round" rel="stylesheet">
</head>
<body>
<header>
<div class="careers-wrapper">
<nav>
<div class="logo">
<i class="fab fa-accusoft"></i>
</div>
<div class="nav">
<div class="ham-menu">
<div class="m1" id="m1"></div>
<div class="m2" id="m2"></div>
<div class="m3" id="m3"></div>
</div>
<ul>
<li class="after">Home</li>
<li class="after">About</li>
<li class="after">Services</li>
<li class="after">Careers</li>
<li>Contact</li>
</ul>
</div>
</nav>
<h1>Join Our Team</h1>
</div>
</header>
<section class="form">
<h2>We're Hiring</h2>
<form action="" method="" id="form">
<h3>General Information</h3>
<div class="row row-1">
<input type="text" name="First" placeholder="First Name">
<input type="text" name="Last" placeholder="Last Name" class="middle">
<input type="text" name="SSN" placeholder="SSN">
</div>
<div class="row row-2">
<input type="text" name="Address" placeholder="Address">
</div>
<div class="row row-3">
<input type="text" name="City" placeholder="City">
<input type="text" name="State" placeholder="State" class="middle">
<input type="text" name="Zipcode" placeholder="Zipcode">
</div>
<div class="row row-4">
<div class="label"><label for="Primary-Phone" class="row-4">Primary-Phone #</label></div>
<input type="text" name="Primary-Phone" placeholder="(xxx)-xxx-xxxx">
<div class="label"><label for="Cell-Phone" class="row-4">Cell-Phone #</label></div>
<input type="text" name="Cell-Phone" placeholder="(xxx)-xxx-xxxx">
</div>
<div class="row row-5">
<label>Are you 18 years old or older?</label>
<div class="radio">
<input type="radio" name="ageYears" value="Yes" id="ageYearsYes">
<label for="ageYearsYes">Yes</label>
<input type="radio" name="ageYears" value="No" required="" id="ageYearsNo">
<label for="ageYearsNo">No</label>
</div>
</div>
<div class="row row-6">
<div class="label"><label>Desired Wage:</label></div>
<input type="text" id="wage-desired">
<div class="label"><label>Available Start Date:</label></div>
<input type="text" id="start-date">
</div>
<div class="row row-7">
<div class="col">
<label>Are you legally authorized to work in the U.S?</label>
<div class="radio">
<input type="radio" name="legally" value="Yes" id="legally-yes">
<label for="legally-yes">Yes</label>
<input type="radio" name="legally" value="No" required="" id="legally-no">
<label for="legally-no">No</label>
</div>
</div>
<div class="col">
<label>Are you willing to submit to a drug test?</label>
<div class="radio">
<input type="radio" name="drug-test" value="Yes" id="drug-yes">
<label for="drug-yes">Yes</label>
<input type="radio" name="drug-test" value="No" required="" id="drug-no">
<label for="drug-no">No</label>
</div>
</div>
</div>
<div class="row row-8">
<div class="col">
<label>Have you ever been convicted of a crime? If yes, please explain.</label>
<div class="radio">
<input type="radio" name="crime-answer" value="Yes" id="crime-yes">
<label for="crime-yes" id="crime-yes">Yes</label>
<input type="radio" name="crime-answer" value="No" required="" id="crime-no">
<label for="crime-no">No</label>
<textarea name="crime-info" cols="70" rows="4" class="crime-textarea"></textarea>
</div>
</div>
<div class="col">
<label class="">How did you hear about this job?</label>
<div class="radio">
<input type="radio" name="friend" value="friend" id="friend">
<label for="friend">friend</label>
<input type="radio" name="friend" value="online" id="online">
<label for="friend">online</label>
<input type="radio" name="friend" value="other" id="other">
<label for="other">other</label>
</div>
</div>
</div>
<hr>
<h3>Employment History</h3>
<div class="row row-9">
<div class="label"><label for="employer">Current/Recent Employer:</label></div>
<input type="text" name="employer">
</div>
<div class="row row-10">
<div class="label"><label for="employer-phone">Phone #</label></div>
<input type="text" name="employer-phone">
<div class="label"><label for="employer-address">Address:</label></div>
<input type="text" name="employer-address">
</div>
<div class="row row-11">
<div class="label"><label for="hire-date">Hired Date:</label></div>
<input type="text" name="hire-date">
<div class="label"><label for="end-date">End Date:</label></div>
<input type="text" name="end-date">
</div>
<div class="row row-12">
<div class="label"><label for="job-title">Job Title:</label></div>
<input type="text" name="job-title">
<div class="label"><label for="job-responsibilities">Job Responsibilities:</label></div>
<input type="text" name="job-responsibilities">
</div>
<div class="row row-13">
<div class="label"><label for="wage-rate">Wage Rate:</label></div>
<input type="text" name="wage-rate">
<div class="label"><label for="reason-left">Reason For Leaving:</label></div>
<input type="text" name="reason-left">
</div>
<hr>
<div class="row row-9">
<div class="label"><label for="employer">Current/Recent Employer:</label></div>
<input type="text" name="employer">
</div>
<div class="row row-10">
<div class="label"><label for="employer-phone">Phone #</label></div>
<input type="text" name="employer-phone">
<div class="label"><label for="employer-address">Address:</label></div>
<input type="text" name="employer-address">
</div>
<div class="row row-11">
<div class="label"><label for="hire-date">Hired Date:</label></div>
<input type="text" name="hire-date">
<div class="label"><label for="end-date">End Date:</label></div>
<input type="text" name="end-date">
</div>
<div class="row row-12">
<div class="label"><label for="job-title">Job Title:</label></div>
<input type="text" name="job-title">
<div class="label"><label for="job-responsibilities">Job Responsibilities:</label></div>
<input type="text" name="job-responsibilities">
</div>
<div class="row row-13">
<div class="label"><label for="wage-rate">Wage Rate:</label></div>
<input type="text" name="wage-rate">
<div class="label"><label for="reason-left">Reason For Leaving:</label></div>
<input type="text" name="reason-left">
</div>
<hr>
<div class="row row-9">
<div class="label"><label for="employer">Current/Recent Employer:</label></div>
<input type="text" name="employer">
</div>
<div class="row row-10">
<div class="label"><label for="employer-phone">Phone #</label></div>
<input type="text" name="employer-phone">
<div class="label"><label for="employer-address">Address:</label></div>
<input type="text" name="employer-address">
</div>
<div class="row row-11">
<div class="label"><label for="hire-date">Hired Date:</label></div>
<input type="text" name="hire-date">
<div class="label"><label for="end-date">End Date:</label></div>
<input type="text" name="end-date">
</div>
<div class="row row-12">
<div class="label"><label for="job-title">Job Title:</label></div>
<input type="text" name="job-title">
<div class="label"><label for="job-responsibilities">Job Responsibilities:</label></div>
<input type="text" name="job-responsibilities">
</div>
<div class="row row-13">
<div class="label"><label for="wage-rate">Wage Rate:</label></div>
<input type="text" name="wage-rate">
<div class="label"><label for="reason-left">Reason For Leaving:</label></div>
<input type="text" name="reason-left">
</div>
<hr>
<h3>Refrences</h3>
<div class="table-wrap">
<table>
<thead>
<tr>
<th>NAME</th>
<th>RELATIONSHIP</th>
<th>COMPANY</th>
<th>PHONE NUMBER</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type="text" id="refName1" name="refName1" placeholder="John Doe" required="">
</td>
<td>
<input type="text" id="refRel1" name="refRel1" placeholder="Relationship" required="">
</td>
<td>
<input type="text" id="refComp1" name="refComp1" placeholder="Company Name" required="">
</td>
<td>
<input type="text" id="refPhone1" name="refPhone1" placeholder="Phone #">
</td>
</tr>
<tr>
<td>
<input type="text" id="refName1" name="refName1" placeholder="John Doe" required="">
</td>
<td>
<input type="text" id="refRel1" name="refRel1" placeholder="Relationship" required="">
</td>
<td>
<input type="text" id="refComp1" name="refComp1" placeholder="Company Name" required="">
</td>
<td>
<input type="text" id="refPhone1" name="refPhone1" placeholder="Phone #">
</td>
</tr>
<tr>
<td>
<input type="text" id="refName1" name="refName1" placeholder="John Doe" required="">
</td>
<td>
<input type="text" id="refRel1" name="refRel1" placeholder="Relationship" required="">
</td>
<td>
<input type="text" id="refComp1" name="refComp1" placeholder="Company Name" required="">
</td>
<td>
<input type="text" id="refPhone1" name="refPhone1" placeholder="Phone #">
</td>
</tr>
<tr>
<td>
<input type="text" id="refName1" name="refName1" placeholder="John Doe" required="">
</td>
<td>
<input type="text" id="refRel1" name="refRel1" placeholder="Relationship" required="">
</td>
<td>
<input type="text" id="refComp1" name="refComp1" placeholder="Company Name" required="">
</td>
<td>
<input type="text" id="refPhone1" name="refPhone1" placeholder="Phone #">
</td>
</tr>
</tbody>
</table>
</div>
<input type="submit" value="Submit" id="submit">
</form>
</section>
<section class="footer">
<div class="wrapper">
<div class="links">
<div class="inner">
<h1><span>Quick Links</span></h1>
Home
About
Services
Careers
Contact
Quote
</div>
</div>
<div class="social">
<div class="inner">
<h1><span>Social</span></h1>
<i class="fab fa-linkedin"></i>
<i class="fab fa-facebook"></i>
<i class="fab fa-twitter-square"></i>
<button name="msg">Send</button>
<textarea name="msg" class="footer-textarea" cols="45" rows="5" placeholder="Send us some feedback..."></textarea>
</div>
</div>
<div class="contact">
<div class="inner" class="wrap">
<h1><span>Contact</span></h1>
<p>(208)546-7827 - <span class="dark">Matt</span></p>
<p>(208)546-7827 - <span class="dark">Keegan</span></p>
<p><span class="dark">Address</span> - P.O. Box 50860 IF, ID 83405</p>
<p><span class="dark">Email</span> - KaneConcrete#fake.com</p>
</div>
</div>
</div>
<div class="copyright"><span>© 2019 - Kane Concrete & Construction | ALL RIGHTS RESERVED</span></div>
</section>
<script src="../script.js"></script>
</body>
</html>
Add both media query using this css
#media screen and (max-width: 640px) and (min-height: 320px) {
header {
background-position: 0px;
}
}
html, body {
margin: 0;
padding: 0;
}
/*---HEADER---*/
header {
background-image: url(https://www.pymnts.com/wp-content/uploads/2018/05/construction-late-payments.jpg);
background-attachment: fixed;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
width: 100%;
height: 65vh;
}
.careers-wrapper{
width: 100%;
height: 65vh;
display: flex;
justify-content: center;
align-items: center;
background-color: rgba(0, 0, 0, 0.2);
}
header h1 {
color: white;
font-size: 5rem;
font-family: 'Arvo';
margin: 0;
}
/*---NAV---*/
nav {
background-color: white;
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
position: fixed;
top: 0;
left: 0;
z-index: 2;
box-shadow: 0px 0px 100px grey;
}
li a {
text-decoration-line: none;
color: rgba(102,102,102,0.75);
}
ul {
margin-right: 30px;
margin-top: 25px;
}
li {
display: inline-block;
font-size: 1.55rem;
margin-right: 20px;
font-family: 'Rajdhani';
}
li a:hover {
cursor: pointer;
color: #1a1a1a;
transition: all 0.7s ease;
}
.after:after {
position: relative;
left: 12px;
top: 2px;
display: inline-block;
content: "";
width: 1px;
height: 20px;
background-color: rgba(102,102,102,0.25);
}
.logo {
color: red;
font-size: 3.7rem;
margin: 10px;
opacity: 1;
margin-left: 30px;
}
/*---FORM---*/
form {
border: 1px solid black;
margin-top: 10px;
margin-left: 30px;
margin-right: 30px;
background-color: rgba(102, 102, 102, 0.15);
border-radius: 5px;
}
.form h2 {
font-family: 'Rajdhani';
color: rgba(102,102,102, 0.85);
font-size: 3rem;
text-align: center;
margin-top: 20px;
margin-bottom: 20px;
}
.form h2:after {
content: '';
width: 18px;
height: 2px;
background-color: red;
display: inline-block;
margin-left: 5px;
margin-bottom: 13px;
}
.form h2:before {
content: '';
width: 18px;
height: 2px;
background-color: red;
display: inline-block;
margin-right: 5px;
margin-bottom: 13px;
}
.form .row {
margin: 20px;
display: flex;
}
label {
color: black;
}
label, input {
font-size: 1.3rem;
font-family: 'Rajdhani';
}
.label {
background-color: rgba(102, 102, 102, 0.3);
display: flex;
justify-content: center;
align-items: center;
}
.middle {
margin-left: 15px;
margin-right: 15px;
}
.row-1 input, .row-3 input {
flex-basis: 33.33%;
}
.row-2 input {
width: 100%;
}
.row-4 {
justify-content: space-between;
}
.row-4 input, .row-4 .label {
flex-basis: 24%;
}
.row-5 {
flex-direction: column;
}
.radio {
margin-top: 10px;
}
.row-6 {
justify-content: space-between;
}
.row-6 input, .row-6 .label {
flex-basis: 24%;
}
.row-7 {
justify-content: space-between;
}
.row-7 .col {
flex-basis: 50%;
}
.row-8 {
justify-content: space-between;
}
.row-8 .col {
flex-basis: 50%;
}
.crime-textarea {
margin-top: 10px;
display: none;
resize: none;
}
#crime-yes:checked ~ textarea {
display: block;
}
.row-9 {
justify-content: space-between;
}
.row-9 .label {
flex-basis: 24%;
}
.row-9 input {
margin-left: 15px;
flex-grow: 1;
}
.row-10 {
justify-content: space-between;
}
.row-10 input, .row-10 .label {
flex-basis: 24%;
}
.row-11 {
justify-content: space-between;
}
.row-11 input, .row-11 .label {
flex-basis: 24%;
}
.row-12 {
justify-content: space-between;
}
.row-12 input, .row-12 .label {
flex-basis: 24%;
}
.row-13 {
justify-content: space-between;
}
.row-13 input, .row-13 .label {
flex-basis: 24%;
}
h3 {
font-family: 'Rajdhani';
text-align: center;
}
/*---TABLE---*/
table {
width: 95%;
margin-right: auto;
margin-left: auto;
border-spacing: 15px;
}
thead tr {
background-color: rgba(102, 102, 102, 0.3);
color: black;
}
thead th {
font-size: 1.3rem;
font-family: 'Rajdhani';
}
th td {
margin-right: 10px;
margin-left: 10px;
}
tbody input {
width: 100%;
}
#submit {
background-color: red;
border: none;
color: white;
outline: none;
font-size: 1.5rem;
padding: 7px;
width: 35%;
align-self: center;
border-radius: 5px;
margin-right: auto;
margin-left: auto;
margin-top: 5px;
margin-bottom: 20px;
display: block;
transition: all 0.3s ease;
}
#submit:hover {
cursor: pointer;
background-color: #cc0000;
}
/*---FOOTER---*/
.footer .wrapper {
display: flex;
}
.footer div {
display: inline-block;
flex-basis: 33.33%;
font-family: 'Rajdhani';
color: rgba(102,102,102, 1);
margin-top: 5px;
}
.footer h1 {
font-size: 2rem;
margin-top: 15px;
}
.footer .inner {
margin-left: 55px;
}
.social .inner {
margin-left: 45px;
}
.contact .inner {
margin-left: 35px;
}
.footer .inner:before {
display: inline-block;
content: '';
width: 27.1%;
height: 2px;
background-color: rgba(102,102,102, 0.6);
position: absolute;
margin-top: 54px;
}
.footer h1 span {
display: inline;
position: relative;
}
.footer h1 span:after {
content: '';
height: 2px;
width: 100%;
background-color: red;
position: absolute;
bottom: 0;
left: 0;
}
.wrap:before {
content: '';
width: 100px;
height: 2px;
background-color: red;
position: absolute;
margin-top: 55px;
}
.links a {
display: block;
text-decoration-line: none;
color: rgba(102,102,102, 1);
font-size: 1.2rem;
position: relative;
top: -10px;
transition: color 0.4s ease;
}
.links a:hover {
color: red;
}
.contact p {
position: relative;
top: -10px;
}
.social i {
font-size: 1.7rem;
margin-right: 5px;
position: relative;
top: -20px;
color: rgba(102,102,102, 0.7);
transition: all 0.4s ease;
}
.social i:hover {
color: red;
cursor: pointer;
}
#msg {
margin-top: -15px;
}
.footer-textarea {
background-color: rgba(102,102,102, 0.2);
outline: none;
color: rgba(102,102,102, 1);
resize: none;
width: 89%;
}
.footer button {
float: right;
margin-right: 9.5%;
margin-top: -17px;
border: none;
font-family: 'Rajdhani';
font-size: 1.2rem;
transition: all ease 0.4s;
outline: none;
}
button:hover {
cursor: pointer;
color: red;
}
.dark {
color: red;
}
.copyright {
position: absolute;
background-color: white;
text-align: center;
width: 100%;
margin-bottom: 0;
font-size: 1.2rem;
padding-bottom: 4px;
}
/*-------MEDIA QUERIES-------*/
/*---LAPTOP-LARGE---*/
#media screen and (max-width: 1440px) {
/*---FOOTER---*/
.footer button {
margin-left: 16.5%;
}
}
/*---TABLET-LARGE---*/
#media screen and (max-width: 1024px) {
/*---NAV---*/
.logo {
font-size: 5rem;
}
nav li {
font-size: 2.5rem;
}
/*---MAIN---*/
header {
background-position: -700px;
}
/*---FOOTER---*/
.footer .inner {
margin-left: 30px;
}
.footer-textarea {
width: 88%;
}
.footer button {
margin-right: 10.25%;
}
}
#media screen and (max-width: 823px) {
/*---MAIN---*/
header, .careers-wrapper {
height: 65vh;
}
.label {
font-size: 1rem;
padding: 0;
}
}
#media screen and (max-width: 812px) {
/*---NAV---*/
nav li {
font-size: 1.7rem;
}
.logo {
font-size: 2.7rem;
}
/*---MAIN---*/
header, .careers-wrapper {
height: 100vh;
}
label {
font-size: 1rem;
}
/*---FOOTER---*/
.footer button {
margin-left: 8.5%;
}
.contact .inner {
margin-right: 20px;
}
}
#media screen and (max-width: 768px) {
/*---NAV---*/
nav li {
font-size: 1.6rem;
}
.logo {
font-size: 3rem;
}
/*---MAIN---*/
header {
background-position: -600px;
}
header, .careers-wrapper {
height: 65vh;
}
.row-1 input, .row-2 input, .row-3 input {
font-size: 1.2rem;
}
/*---FOOTER---*/
.footer button {
margin-left: 7.4%;
}
}
#media screen and (max-width: 731px) {
/*---MAIN---*/
header {
background-position: 0px;
}
/*---FOOTER---*/
.footer button {
margin-left: 6%;
}
.contact .inner p {
margin: 5px;
}
}
/*------LANDSCAPE-MODE-MOBILE------*/
#media screen and (max-width: 715px) {
/*---NAV---*/
nav ul {
padding-left: 0;
margin: 0;
}
nav li {
font-size: 1.4rem;
}
nav .logo {
font-size: 2.5rem;
}
/*---MAIN---*/
header, .careers-wrapper {
height: 100vh;
}
header {
background-position: -300px;
}
form {
margin-left: 10px;
margin-right: 10px;
}
.row {
flex-direction: column;
}
.middle {
margin: 0;
}
.row-1 input, .row-3 input {
margin-top: 5px;
margin-bottom: 5px;
}
.row-4 input, .row-6 input {
margin-bottom: 7px;
}
.row-9 input {
margin-left: 0;
}
#submit {
width: 90%;
}
/*---FOOTER---*/
.links a {
font-size: 1.1rem;
top: -13px;
}
.contact .inner {
margin-right: 15px;
}
.contact p {
margin: 5px;
}
.footer-textarea {
position: relative;
top: -5px;
width: 90.5%;
}
.footer button {
margin-top: -18px;
margin-right: 7%;
font-size: 1.1rem;
}
}
#media screen and (max-width: 640px) and (min-height: 320px) {
header {
background-position: 0px;
}
}
#media screen and (max-width: 586px) {
/*---MAIN---*/
header h1 {
font-size: 3.5rem;
}
/*---FOOTER---*/
.footer .wrapper {
display: flex;
flex-direction: column;
}
.footer div {
margin: 0;
}
.footer h1 {
font-size: 2rem;
margin-top: 10px;
}
.footer .inner {
margin: 0;
}
.footer .inner:before {
display: inline-block;
content: '';
width: 100vw;
height: 2px;
background-color: rgba(102,102,102, 0.6);
position: absolute;
margin-top: 48px;
}
.footer h1 span:after {
content: '';
height: 2px;
width: 100%;
background-color: red;
position: absolute;
bottom: 1px;
left: 0;
}
.social .inner {
position: relative;
top: -10px;
}
.links a {
margin-left: 5px;
}
.social h1 {
margin-bottom: 10px;
}
#msg {
font-size: 1rem;
margin-bottom: 0;
margin-right: 25.5%;
position: absolute;
right: 5px;
top: 80px;
}
.footer button {
right: 9.25%;
margin-top: 0.2px;
}
.social i {
font-size: 1.8rem;
margin-right: 2px;
position: relative;
top: -5px;
left: 5px;
color: rgba(102,102,102, 0.7);
transition: all 0.4s ease;
}
.footer-textarea {
width: 88.5%;
margin-top: 25px;
margin-left: 5px;
}
.contact p {
margin: 5px;
font-size: 1.2rem;
}
.copyright {
background-color: red;
padding-top: 10px;
padding-bottom: 10px;
}
.copyright span {
color: white;
background-color: red;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Careers | Kane Concrete & Construction LLC</title>
<link rel="stylesheet" href="../css/careers.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Arvo|Bitter|Lato|Montserrat|Noto+Sans|Open+Sans|Poppins|Roboto|Sarabun|Ubuntu" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Abel|Asap|Krub|Oxygen|Rajdhani|Staatliches|Varela+Round" rel="stylesheet">
</head>
<body>
<header>
<div class="careers-wrapper">
<nav>
<div class="logo">
<i class="fab fa-accusoft"></i>
</div>
<div class="nav">
<div class="ham-menu">
<div class="m1" id="m1"></div>
<div class="m2" id="m2"></div>
<div class="m3" id="m3"></div>
</div>
<ul>
<li class="after">Home</li>
<li class="after">About</li>
<li class="after">Services</li>
<li class="after">Careers</li>
<li>Contact</li>
</ul>
</div>
</nav>
<h1>Join Our Team</h1>
</div>
</header>
<section class="form">
<h2>We're Hiring</h2>
<form action="" method="" id="form">
<h3>General Information</h3>
<div class="row row-1">
<input type="text" name="First" placeholder="First Name">
<input type="text" name="Last" placeholder="Last Name" class="middle">
<input type="text" name="SSN" placeholder="SSN">
</div>
<div class="row row-2">
<input type="text" name="Address" placeholder="Address">
</div>
<div class="row row-3">
<input type="text" name="City" placeholder="City">
<input type="text" name="State" placeholder="State" class="middle">
<input type="text" name="Zipcode" placeholder="Zipcode">
</div>
<div class="row row-4">
<div class="label"><label for="Primary-Phone" class="row-4">Primary-Phone #</label></div>
<input type="text" name="Primary-Phone" placeholder="(xxx)-xxx-xxxx">
<div class="label"><label for="Cell-Phone" class="row-4">Cell-Phone #</label></div>
<input type="text" name="Cell-Phone" placeholder="(xxx)-xxx-xxxx">
</div>
<div class="row row-5">
<label>Are you 18 years old or older?</label>
<div class="radio">
<input type="radio" name="ageYears" value="Yes" id="ageYearsYes">
<label for="ageYearsYes">Yes</label>
<input type="radio" name="ageYears" value="No" required="" id="ageYearsNo">
<label for="ageYearsNo">No</label>
</div>
</div>
<div class="row row-6">
<div class="label"><label>Desired Wage:</label></div>
<input type="text" id="wage-desired">
<div class="label"><label>Available Start Date:</label></div>
<input type="text" id="start-date">
</div>
<div class="row row-7">
<div class="col">
<label>Are you legally authorized to work in the U.S?</label>
<div class="radio">
<input type="radio" name="legally" value="Yes" id="legally-yes">
<label for="legally-yes">Yes</label>
<input type="radio" name="legally" value="No" required="" id="legally-no">
<label for="legally-no">No</label>
</div>
</div>
<div class="col">
<label>Are you willing to submit to a drug test?</label>
<div class="radio">
<input type="radio" name="drug-test" value="Yes" id="drug-yes">
<label for="drug-yes">Yes</label>
<input type="radio" name="drug-test" value="No" required="" id="drug-no">
<label for="drug-no">No</label>
</div>
</div>
</div>
<div class="row row-8">
<div class="col">
<label>Have you ever been convicted of a crime? If yes, please explain.</label>
<div class="radio">
<input type="radio" name="crime-answer" value="Yes" id="crime-yes">
<label for="crime-yes" id="crime-yes">Yes</label>
<input type="radio" name="crime-answer" value="No" required="" id="crime-no">
<label for="crime-no">No</label>
<textarea name="crime-info" cols="70" rows="4" class="crime-textarea"></textarea>
</div>
</div>
<div class="col">
<label class="">How did you hear about this job?</label>
<div class="radio">
<input type="radio" name="friend" value="friend" id="friend">
<label for="friend">friend</label>
<input type="radio" name="friend" value="online" id="online">
<label for="friend">online</label>
<input type="radio" name="friend" value="other" id="other">
<label for="other">other</label>
</div>
</div>
</div>
<hr>
<h3>Employment History</h3>
<div class="row row-9">
<div class="label"><label for="employer">Current/Recent Employer:</label></div>
<input type="text" name="employer">
</div>
<div class="row row-10">
<div class="label"><label for="employer-phone">Phone #</label></div>
<input type="text" name="employer-phone">
<div class="label"><label for="employer-address">Address:</label></div>
<input type="text" name="employer-address">
</div>
<div class="row row-11">
<div class="label"><label for="hire-date">Hired Date:</label></div>
<input type="text" name="hire-date">
<div class="label"><label for="end-date">End Date:</label></div>
<input type="text" name="end-date">
</div>
<div class="row row-12">
<div class="label"><label for="job-title">Job Title:</label></div>
<input type="text" name="job-title">
<div class="label"><label for="job-responsibilities">Job Responsibilities:</label></div>
<input type="text" name="job-responsibilities">
</div>
<div class="row row-13">
<div class="label"><label for="wage-rate">Wage Rate:</label></div>
<input type="text" name="wage-rate">
<div class="label"><label for="reason-left">Reason For Leaving:</label></div>
<input type="text" name="reason-left">
</div>
<hr>
<div class="row row-9">
<div class="label"><label for="employer">Current/Recent Employer:</label></div>
<input type="text" name="employer">
</div>
<div class="row row-10">
<div class="label"><label for="employer-phone">Phone #</label></div>
<input type="text" name="employer-phone">
<div class="label"><label for="employer-address">Address:</label></div>
<input type="text" name="employer-address">
</div>
<div class="row row-11">
<div class="label"><label for="hire-date">Hired Date:</label></div>
<input type="text" name="hire-date">
<div class="label"><label for="end-date">End Date:</label></div>
<input type="text" name="end-date">
</div>
<div class="row row-12">
<div class="label"><label for="job-title">Job Title:</label></div>
<input type="text" name="job-title">
<div class="label"><label for="job-responsibilities">Job Responsibilities:</label></div>
<input type="text" name="job-responsibilities">
</div>
<div class="row row-13">
<div class="label"><label for="wage-rate">Wage Rate:</label></div>
<input type="text" name="wage-rate">
<div class="label"><label for="reason-left">Reason For Leaving:</label></div>
<input type="text" name="reason-left">
</div>
<hr>
<div class="row row-9">
<div class="label"><label for="employer">Current/Recent Employer:</label></div>
<input type="text" name="employer">
</div>
<div class="row row-10">
<div class="label"><label for="employer-phone">Phone #</label></div>
<input type="text" name="employer-phone">
<div class="label"><label for="employer-address">Address:</label></div>
<input type="text" name="employer-address">
</div>
<div class="row row-11">
<div class="label"><label for="hire-date">Hired Date:</label></div>
<input type="text" name="hire-date">
<div class="label"><label for="end-date">End Date:</label></div>
<input type="text" name="end-date">
</div>
<div class="row row-12">
<div class="label"><label for="job-title">Job Title:</label></div>
<input type="text" name="job-title">
<div class="label"><label for="job-responsibilities">Job Responsibilities:</label></div>
<input type="text" name="job-responsibilities">
</div>
<div class="row row-13">
<div class="label"><label for="wage-rate">Wage Rate:</label></div>
<input type="text" name="wage-rate">
<div class="label"><label for="reason-left">Reason For Leaving:</label></div>
<input type="text" name="reason-left">
</div>
<hr>
<h3>Refrences</h3>
<div class="table-wrap">
<table>
<thead>
<tr>
<th>NAME</th>
<th>RELATIONSHIP</th>
<th>COMPANY</th>
<th>PHONE NUMBER</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type="text" id="refName1" name="refName1" placeholder="John Doe" required="">
</td>
<td>
<input type="text" id="refRel1" name="refRel1" placeholder="Relationship" required="">
</td>
<td>
<input type="text" id="refComp1" name="refComp1" placeholder="Company Name" required="">
</td>
<td>
<input type="text" id="refPhone1" name="refPhone1" placeholder="Phone #">
</td>
</tr>
<tr>
<td>
<input type="text" id="refName1" name="refName1" placeholder="John Doe" required="">
</td>
<td>
<input type="text" id="refRel1" name="refRel1" placeholder="Relationship" required="">
</td>
<td>
<input type="text" id="refComp1" name="refComp1" placeholder="Company Name" required="">
</td>
<td>
<input type="text" id="refPhone1" name="refPhone1" placeholder="Phone #">
</td>
</tr>
<tr>
<td>
<input type="text" id="refName1" name="refName1" placeholder="John Doe" required="">
</td>
<td>
<input type="text" id="refRel1" name="refRel1" placeholder="Relationship" required="">
</td>
<td>
<input type="text" id="refComp1" name="refComp1" placeholder="Company Name" required="">
</td>
<td>
<input type="text" id="refPhone1" name="refPhone1" placeholder="Phone #">
</td>
</tr>
<tr>
<td>
<input type="text" id="refName1" name="refName1" placeholder="John Doe" required="">
</td>
<td>
<input type="text" id="refRel1" name="refRel1" placeholder="Relationship" required="">
</td>
<td>
<input type="text" id="refComp1" name="refComp1" placeholder="Company Name" required="">
</td>
<td>
<input type="text" id="refPhone1" name="refPhone1" placeholder="Phone #">
</td>
</tr>
</tbody>
</table>
</div>
<input type="submit" value="Submit" id="submit">
</form>
</section>
<section class="footer">
<div class="wrapper">
<div class="links">
<div class="inner">
<h1><span>Quick Links</span></h1>
Home
About
Services
Careers
Contact
Quote
</div>
</div>
<div class="social">
<div class="inner">
<h1><span>Social</span></h1>
<i class="fab fa-linkedin"></i>
<i class="fab fa-facebook"></i>
<i class="fab fa-twitter-square"></i>
<button name="msg">Send</button>
<textarea name="msg" class="footer-textarea" cols="45" rows="5" placeholder="Send us some feedback..."></textarea>
</div>
</div>
<div class="contact">
<div class="inner" class="wrap">
<h1><span>Contact</span></h1>
<p>(208)546-7827 - <span class="dark">Matt</span></p>
<p>(208)546-7827 - <span class="dark">Keegan</span></p>
<p><span class="dark">Address</span> - P.O. Box 50860 IF, ID 83405</p>
<p><span class="dark">Email</span> - KaneConcrete#fake.com</p>
</div>
</div>
</div>
<div class="copyright"><span>© 2019 - Kane Concrete & Construction | ALL RIGHTS RESERVED</span></div>
</section>
<script src="../script.js"></script>
</body>
</html>
It might be worth to add a class to your element with a jquery function then you can call the -300px only on the element that doesn not have the class (not the GalaxyS7)
https://api.jquery.com/addclass/
Though, I think it is better to create media queries with 'min-width' instead of 'max-width' ensuring compatibility on smaller screens.
https://www.w3schools.com/css/css_rwd_mediaqueries.asp
I've built a modified tab-chart. When you click on the tabs on the left hand side, they switch the content on the right. The only problem is the main content div on the right, even with a width of 100% is only going about a third of the way across the screen. Any ideas why?
* {
padding: 0;
margin: 0;
}
#container {
display: block;
height: 100%;
width: 100%;
}
#topBar1 {
height: 55px;
width: 100%;
background-color: #FAFAFA;
border-bottom: 1px solid #d9d9d9;
display: block;
position: relative;
z-index: 2;
}
#topBar2 {
height: 22px;
width: 100%;
background-color: #FAFAFA;
display: block;
border-radius: 11%;
box-shadow: 0 6px 10px -2.5px #ccc;
position: relative;
z-index: 2;
transition: all;
}
main {
display: block;
background-color: #EEEEEE;
height: 1000px;
width: 100%;
position: relative;
z-index: 1;
top: -5px;
}
nav {
height: 100%;
width: 261px;
}
nav::after {
height: 100%;
width: 1px;
content: "";
display: block;
background: #d9d9d9;
position: relative;
left: 260px;
top: -1000px;
}
input[type=radio] {
display: none;
}
.tabs {
list-style: none;
position: relative;
//border: 1px solid #ccc;
width: 260px;
height: 100%;
top: 15px;
}
.tabs li {
font-family: Roboto, sans-serif;
font-size: 13px;
padding: 10px 20px 20px 60px;
color: #222222;
//border: 1px solid #ccc;
background-color: none;
transition: all .2s ease-in-out;
}
.tabs li:hover {
background-color: #d9d9d9;
}
.tabs li:active {
background-color: #d9d9d9;
}
.tabs label {
display: block;
position: relative;
cursor: pointer;
top: 6px;
}
.tab-content {
position: absolute;
display: none;
z-index: 2;
height: 100%;
width: 100%;
left: 261px;
top: 0;
border: 1px solid #ccc;
}
[id^=tab]:checked~[class^=tab-content] {
display: block;
}
.contentItem {
//border: 1px solid #ccc;
height: 38px;
width: 200px;
margin-left: 10px;
margin-top: 10px;
margin-bottom: 20px;
margin-left: 10px;
background-color: #FAFAFA;
box-shadow: .5px 2px 6px #ccc;
float: left;
}
.documentIcon {
height: 30px;
width: 30px;
border: 1px solid #ccc;
margin: 3px;
margin-left: 5px;
margin-right: 10px;
float: left;
}
.contentText {
font-family: Roboto, sans-serif;
font-size: 12px;
color: #222222;
line-height: 3;
}
<div id="container">
<div id="topBar1"></div>
<!--topBar-->
<div id="topBar2"></div>
<!--topBar2-->
<main>
<nav>
<ul class="tabs">
<li>
<input type="radio" name="tabs" id="tab-1" checked />
<label for="tab-1">Staff Directory</label>
<div class="tab-content" id="tab-content-1">
<div class="contentItem" id="ci1">
<img src="" alt="" class="documentIcon" />
<p class="contentText">Telephone Extension List</p>
</div>
</div>
<!--tab-content-->
</li>
<li>
<input type="radio" name="tabs" id="tab-2" />
<label for="tab-2">How-To Guides</label>
<div class="tab-content" id="tab-content-2">
<p>Put Tab 2 Content here</p>
</div>
</li>
<li>
<input type="radio" name="tabs" id="tab-3" />
<label for="tab-3">OECTA Calendar</label>
<div class="tab-content" id="tab-content3">
<p>Put tab content 3 here</p>
</div>
</li>
<li>
<input type="radio" name="tabs" id="tab-4" />
<label for="tab-4">Finance</label>
<div class="tab-content" id="tab-content-4">
<p>Put tab content for 4 here</p>
</div>
</li>
<li>
<input type="radio" name="tabs" id="tab-5" />
<label for="tab-5">Directories and Contact Lists</label>
<div class="tab-content" id="tab-content-5">
<p>Put Tab 5 content here</p>
</div>
</li>
<li>
<input type="radio" name="tabs" id="tab-6" />
<label for="tab-6">Upcoming Meetings</label>
<div class="tab-content" id="tab-content-6">
<p>Put tab 6 content here</p>
</div>
</li>
<li>
<input type="radio" name="tabs" id="tab-7" />
<label for="tab-7">Manuals and Handbooks</label>
<div class="tab-content" id="tab-content-7">
<p>Tab Content 7</p>
</div>
</li>
<li>
<input type="radio" name="tabs" id="tab-8" />
<label for="tab-8">Information and Forms</label>
<div class="tab-content" id="tab-content-8">
<p>Tab Content 8</p>
</div>
</li>
<li>
<input type="radio" name="tabs" id="tab-9" />
<label for="tab-9">Visitor Information</label>
<div class="tab-content" id="tab-content-9">
<p>Tab Content 9</p>
</div>
</li>
</ul>
</nav>
</main>
</div>
You looking for something like this? https://jsfiddle.net/csgn6051/9/
.tabs
{
width: calc(100% - 270px);
}
First off let me say, I don't do a whole lot of front end design so please excuse all my inline code etc...
I've built these check boxes to be able to include the image when clicked. I understand it's not inside the parent class but i'm a bit confused at this point on how to move forward. Since it doesn't have a parent class it just looks for the whole web page as it's parent class i presume.
Fairly simple, i think; when i minimize my screen my label positioning removes itself from the boxes and floats off. I'll attach screen shots for more clarity.
I've tried to put a few of them in divs with some success but i'm not 100% sure the right way of doing this and that's why i'm here. I've tried some relative positioning as well.
<div class="interests">
<div class="subHeader">Interests:</div>
<label style="background-color: #000; color:#fff; width:160px; font-family: 'itc_avant_garde_gothic_ltbold';
font-size: 18px !important;
text-transform: uppercase;
color: #FFF;
padding-top: 20px;
display: inline-block; z-index: 5; position:absolute; left: 465px; top: 1105px;"><div style="position:relative;left:10px; bottom: 8px;">SKATE</div></label>
<label style="background-color: #000; color:#fff; width:160px; font-family: 'itc_avant_garde_gothic_ltbold';
font-size: 18px !important;
text-transform: uppercase;
color: #FFF;
padding-top: 20px;
display: inline-block; z-index: 5; position:absolute; left: 685px; top: 1105px;"><div style="position:relative;left:10px; bottom: 8px;">SURF</div></label>
<label style="background-color: #000; color:#fff; width:160px; font-family: 'itc_avant_garde_gothic_ltbold';
font-size: 18px !important;
text-transform: uppercase;
color: #FFF;
padding-top: 20px;
display: inline-block; z-index: 5; position:absolute; left: 906px; top: 1105px;"><div style="position:relative;left:10px; bottom: 8px;">SNOW</div></label>
<label style="background-color: #000; color:#fff; width:160px; font-family: 'itc_avant_garde_gothic_ltbold';
font-size: 18px !important;
text-transform: uppercase;
color: #FFF;
padding-top: 20px;
display: inline-block; z-index: 5; position:absolute; left: 465px; top: 1300px;"><div style="position:relative;left:10px; bottom: 8px;"> WOMEN</div></label>
<label style="background-color: #000; color:#fff; width:160px; font-family: 'itc_avant_garde_gothic_ltbold';
font-size: 18px !important;
text-transform: uppercase;
color: #FFF;
padding-top: 20px;
display: inline-block; z-index: 5; position:absolute; left: 685px; top: 1300px;"><div style="position:relative;left:10px; bottom: 8px;"> MUSIC/ART </div></label>
<label style="position: relative; top: 90px;">
<input type="checkbox" name="CheckBox.A address.Sk" style="z-index: 1;position: relative; top:4px;">Skate<img src="https://stuff/Images/thumb.jpg" style="position: absolute;left: 0;bottom: 0;height: 185px;width: 205px;">
</label>
<input type="hidden" name="CheckBox.A address.Sk" value="off">
<label style="position: relative; left:140px; top: 90px;">
<input type="checkbox" name="CheckBox.A address.Su" style="z-index: 1;position: relative; top:4px;">Surf<img src="https://stuff/Images/thumb.jpg" style="position: absolute;left: 0;bottom: 0;height: 185px;width: 205px;">
</label>
<input type="hidden" name="CheckBox.A address.Su" value="off">
<label style="position: relative; left:290px; top: 90px;">
<input type="checkbox" name="CheckBox.A address.Sn" style="z-index: 1;position: relative; top:4px;">Snow<img src="https://stuff/Images/thumb.jpg" style="position: absolute;left: 0;bottom: 0;height: 185px;width:205px;">
</label>
<input type="hidden" name="CheckBox.A address.Sn" value="off">
<br><br><br><br><br><br><br><br><br><br><br><br>
<label style="position:relative; top: 60px;">
<input type="checkbox" name="CheckBox.A address.Wo" style="z-index: 1;position: relative; top:4px;">Women<img src="https://stuff/Images/thumb.jpg" style="position: absolute;left: 0;bottom: 0;height: 185px;width:205px;">
</label>
<input type="hidden" name="CheckBox.A address.Wo" value="off">
<label style="position:relative; left: 130px; top: 60px;">
<input type="checkbox" name="CheckBox.A address.Mu" style="z-index: 1;position: relative; top:4px;">Music<img src="https://stuff/Images/music_thumb.jpg" style="position: absolute;left: 0;bottom: 0;height: 185px;width:205px;">
</label><input type="hidden" name="CheckBox.A address.Mu " value="off">
<label><input type="checkbox" name="CheckBox.A address.Subscribe"></label>
<div style="position:relative; left: 50px; bottom: 33px;">Subscribe</div>
<input type="hidden" name="CheckBox.A address.Subscribe" value="off">
<input type="submit" id="submit" value="Sign Up" style="width: 280px;
height: 45px;
display: block !important;
outline-style: none !important;
outline-width: 0px !important;
color: #fff !important;
font-weight: normal !important;
font-family: 'itc_avant_garde_gothic_ltbold';
text-transform: uppercase;
text-decoration: none;
text-align: center;
border: 1px solid #434242;
background-color: #434242;
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#434242), to(#2f2e2e));
background-image: -webkit-linear-gradient(top, #434242, #2f2e2e);
background-image: -moz-linear-gradient(top, #434242, #2f2e2e);
background-image: -ms-linear-gradient(top, #434242, #2f2e2e);
background-image: -o-linear-gradient(top, #434242, #2f2e2e);
-moz-box-shadow: 0 0 1px #bbb;
-webkit-box-shadow: 0 0 1px #bbb;
box-shadow: 0 0 1px #bbb;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
vertical-align: middle;
padding: 10px 0;
line-height: 1em;
cursor: pointer;
line-height: 18px;
font-size: 18px;
margin: 40px 0;">
</div>
Any help would be greatly appreciated. Thank you. Screen shots below.
Labels are floating off when i minimize :
Works fine when full screen :
I commented with a few bad practices and falsehoods on another answer, so I really had to make a quick example myself, this is one way to do it with flexbox (there are a lot of solutions to this problem, this is a good one if you don't have to support obsolete browsers):
Example: https://jsfiddle.net/um6fm744/1/
CSS:
* { box-sizing: border-box; margin: 0; padding: 0; }
.interests {
display: flex;
flex-wrap: wrap;
}
.sub-header {
margin: 0 0 24px;
width: 100%;
}
.interest {
align-items: flex-end;
background-color: green;
display: flex;
margin: 0 12px 24px 0;
min-height: 160px;
width: 160px;
}
.interest-info {
background-color: black;
display: flex;
justity-content: space-between;
width: 100%;
}
.interest-checkbox {
height: 30px;
width: 30px;
}
.interest-label {
color: white;
font-family: sans-serif;
flex: 1;
height: 30px;
line-height: 30px;
margin-left: 12px;
}
HTML
<div class="interests">
<h1 class="sub-header">Interests:</h1>
<div class="interest">
<div class="interest-info">
<input class="interest-checkbox" type="checkbox" />
<label class="interest-label">SKATE</label>
</div>
</div>
<div class="interest">
<div class="interest-info">
<input class="interest-checkbox" type="checkbox" />
<label class="interest-label">SNOW</label>
</div>
</div>
<div class="interest">
<div class="interest-info">
<input class="interest-checkbox" type="checkbox" />
<label class="interest-label">WOMEN</label>
</div>
</div>
<div class="interest">
<div class="interest-info">
<input class="interest-checkbox" type="checkbox" />
<label class="interest-label">SURF</label>
</div>
</div>
<div class="interest">
<div class="interest-info">
<input class="interest-checkbox" type="checkbox" />
<label class="interest-label">MUSIC/ART</label>
</div>
</div>
</div>
Please don't use inline styling.
I would tackle it more like this: http://codepen.io/anon/pen/VeEXEv
HTML:
<ul class="items">
<li class="item1">
<button class="add-button">+</button>
<span class="description">box 1</span>
</li>
<li class="item2">
<button class="add-button">+</button>
<span class="description">box 2</span>
</li>
<li class="item3">
<button class="add-button">+</button>
<span class="description">box 3</span>
</li>
<li class="item2">
<button class="add-button">+</button>
<span class="description">box 2</span>
</li>
<li class="item3">
<button class="add-button">+</button>
<span class="description">box 3</span>
</li>
<li class="item1">
<button class="add-button">+</button>
<span class="description">box 1</span>
</li>
</ul>
CSS:
.items > li {
list-style: none;
float: left;
height: 20px;
width: 100px;
margin: 10px;
border: 1px #000 solid;
position: relative;
padding-top: 80px;
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
}
.items .description {
background: rgba(0,0,0,0.8);
height: 20px;
width: 80px;
color: #fff;
display: block;
float: right;
text-align: center;
}
.items .add-button {
width: 20px;
height: 20px;
border: none;
background-color: #666;
color: #fff;
}
.item1 {
background-image: url(https://pbs.twimg.com/profile_images/586137164188004352/wTK4hjbl.jpg);
}
.item2 {
background-image: url(https://pbs.twimg.com/profile_images/3276050019/f1d244a9f3254f30176922985c761d28.png);
}
.item3 {
background-image: url(https://people.rit.edu/~bmd6715/230/exercises/images/cat.png);
}