Recently I asked about a comparable case over here.
I tried to center the items (in this case) by the solution given in the question above but with no end. I have been wrapping these columns in an apart row col 'div' but (this time) it makes no sense. The dotted line in the background is the real center and all items displayed (envelope-image, CONTACT, get in contact-box and even the contact form and SEND-button) are not exactly in the center of the webpage. Who can help me out of this asymmetry?
Codepen
HTML:
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>JFP</title>
<link rel="stylesheet" href="http://s3.amazonaws.com/codecademy-content/courses/ltp/css/bootstrap.css">
<link rel="stylesheet" href="/static/main.css" >
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="/static/app.js"></script>
</head>
<body>
<div class="supporting">
<div class="container" style="min-height:300px;">
<div class="col">
<h1>😀</h1>
<a>Learn more</a>
</div>
<div class="col">
<img src="http://rexkirby.com/kirbyandson/images/email.svg">
<h2>Contact</h2>
<p></p>
<b>Get in contact</b>
</div>
<div class="col">
<img src="https://s3.amazonaws.com/codecademy-content/projects/broadway/deploy.svg">
<h2>Support</h2>
<p></p>
<div class="interests text-center">
<a class="learn-more">Learn more</a>
</div>
<div class="int text-center" style="display:none">
<c>Lorem ipsum.</c>
</div>
</div>
</div>
</div>
</div>
<div class="contactform">
<div class="container">
<div class="row col-md-12">
<div class="col-md-12 text-center">
<form class="form" id="form1">
<p class="name">
<input name="name" type="text" class="validate[required,custom[onlyLetter],length[0,100]] feedback-input" placeholder="Name" id="name" />
</p>
<p class="email">
<input name="email" type="text" class="validate[required,custom[email]] feedback-input" id="email" placeholder="Email" />
</p>
<p class="text">
<textarea name="text" class="validate[required,length[6,300]] feedback-input" id="comment" placeholder="Comment"></textarea>
</p>
<div class="row col text-center">
<div class="submit">
<input type="submit" value="SEND" id="button-blue"/>
<div class="ease"></div>
</div>
</div>
</form>
</div>
</div>
</div>
</body>
CSS:
body:after {
content: "";
position: absolute;
z-index: -1;
top: 10%;
bottom: 0%;
left: 50%;
border-left: 2px dotted rgb(51,51,51);
}
.supporting {
padding-top: 80px;
padding-bottom: 100px;
}
.supporting .col {
float: left;
width: 33%;
font-family: 'Open Sans', sans-serif;
text-align: center;
margin-bottom: 64px;
padding: 0px 0px;
}
.supporting img {
height: 40px;
}
.supporting .col h1 {
font-size: 35px;
padding-bottom: 48px;
margin-top: 49px;
}
.supporting h2 {
font-weight: 600;
font-size: 23px;
text-transform: uppercase;
padding: 0 50px;
margin-bottom: 60px;
}
.supporting p {
font-weight: 400;
font-size: 14px;
line-height: 20px;
}
.supporting a {
font-size: 10px;
color: rgb(51,51,51);
font-weight: 600;
border: 1px solid rgb(51,51,51);
padding: 15px 50px;
text-decoration: none;
text-transform: uppercase;
letter-spacing: 1.1px;
position: relative;
}
.supporting b {
font-size: 10px;
color: rgb(51,51,51);
font-weight: 600;
border: 1px solid rgb(51,51,51);
padding: 15px 39px;
text-decoration: none;
text-transform: uppercase;
letter-spacing: 1.1px;
position: relative;
}
.supporting .int c {
font-size: 15px;
color: rgb(51,51,51);
height: -10px;
padding: 0px 50px;
}
.clearfix {
clear: both;
}
.footer {
background-color: rgb(51,51,51);
color: rgb(51,51,51);
padding: 30px 0;
margin-top: 30px;
}
.footer p {
color: rgb(250,250,250);
font-family: 'Open Sans', sans-serif;
text-transform: normal;
font-size: 11px;
left: -185px;
}
#feedback-page{
text-align:center;
}
#form-main{
width:100%;
float:middle;
padding-top:0px;
}
#form-div {
background-color:rgba(72,72,72,0.4);
padding-left:35px;
padding-right:35px;
padding-top:35px;
padding-bottom:50px;
width: 450px;
float: middle;
left: 50%;
position: absolute;
margin-top:30px;
margin-left: -260px;
-moz-border-radius: 7px;
-webkit-border-radius: 7px;
}
.feedback-input {
color:#3c3c3c;
font-family: 'Open Sans', sans-serif;
font-weight:500;
font-size: 18px;
border-radius: 0;
line-height: 22px;
background-color: rgb(245,245,245);
padding: 13px 13px 13px 54px;
margin-bottom: 10px;
width:100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
border: 3px solid rgba(0,0,0,0);
}
.feedback-input:focus{
background: #fff;
box-shadow: 0;
border: 3px solid rgb(42,186,214);
color: rgb(51,51,51);
outline: none;
padding: 13px 13px 13px 54px;
}
.focused{
color:#30aed6;
border:#30aed6 solid 3px;
}
#name{
background-image: url(http://rexkirby.com/kirbyandson/images/name.svg);
background-size: 30px 30px;
background-position: 11px 8px;
background-repeat: no-repeat;
}
#name:focus{
background-image: url(http://rexkirby.com/kirbyandson/images/name.svg);
background-size: 30px 30px;
background-position: 8px 5px;
background-position: 11px 8px;
background-repeat: no-repeat;
}
#email{
background-image: url(http://rexkirby.com/kirbyandson/images/email.svg);
background-size: 30px 30px;
background-position: 11px 8px;
background-repeat: no-repeat;
}
#email:focus{
background-image: url(http://rexkirby.com/kirbyandson/images/email.svg);
background-size: 30px 30px;
background-position: 11px 8px;
background-repeat: no-repeat;
}
#comment{
background-image: url(https://s3.amazonaws.com/codecademy-content/projects/broadway/design.svg);
background-size: 30px 30px;
background-position: 11px 8px;
background-repeat: no-repeat;
}
textarea {
width: 100%;
height: 150px;
line-height: 150%;
resize:vertical;
}
input:hover, textarea:hover,
input:focus, textarea:focus {
background-color:white;
}
#button-blue{
font-family: 'Open Sans', sans-serif;
float:middle;
width: 50%;
border: rgb(51,51,51) solid 1px;
cursor:pointer;
background-color: rgb(255,255,255);
color: rgb(51,51,51);
font-size: 16px;
padding-top:12px;
padding-bottom:12px;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;
margin-top:-4px;
font-weight:600;
letter-spacing: 1.1px;
}
#button-blue:hover{
color: rgb(51,51,51);
}
.submit:hover {
rgb(51,51,51);
}
.ease {
width: 0px;
height: 74px;
background-color: #fbfbfb;
-webkit-transition: .3s ease;
-moz-transition: .3s ease;
-o-transition: .3s ease;
-ms-transition: .3s ease;
transition: .3s ease;
}
.submit:hover .ease{
width:100%;
background-color:white;
}
#media (max-width: 500px) {
.main h1 {
font-size: 50px;
padding: 0 40px;
}
.supporting .col {
width: 100%;
}
#form-div{
left: 30%;
margin-right: 3%;
width: 88%;
margin-left: 0;
padding-left: 3%;
padding-right: 3%;
}
}
You have set the width of your ".suporting .col" divs to 33%, which is not quite one-third of the page. If you choose to be more precise (e.g. 33.33%) you will see that your text is more nearly centered on the page. Here is a slight revision of your code.
.supporting .col {
float: left;
width: 33.33%;
font-family: 'Open Sans', sans-serif;
text-align: center;
margin-bottom: 64px;
padding: 0px 0px;
}
Related
This question already has answers here:
Break long word with CSS
(6 answers)
Closed last year.
In the example code - I have given box 3 and box 4 widths of 200px I don't actually care for using these widths, but I have given them colours so you can see my problem better visually.
The problem is my text is not being contained by the parent <div> with a set (hardcoded) pixel width in box 3 especially it runs waaay out to the right in 1 line instead of wrapping inside the <div>. For box 4, I can understand it's trying to stretch to the end, but if it were any longer it would again just run outside of the grid anyways. So theres something I'm missing to help wrap content. How do I solve this problem?
* {
margin:0;
padding:0;
}
html {
box-sizing: border-box;
font-size: 30px;
font-family: 'Bitter', serif;
}
body{
background: rgb(7, 7, 7);
color: #fff;
}
.imgContainer{
width: 100%;
height: fit-content;
background-color: black;
pointer-events: none;
user-select: none;
}
.mySlides {
opacity: 0.5;
overflow: hidden;
background-position: center;
width: 100%;
height: 650px;
max-height: 75vh;
pointer-events: none;
user-select: none;
}
.bodyC {
padding-top: 75px;
max-width: 360px;
font-weight: 200;
font-size: 0.8rem;
}
.bodyC2 {
padding-left: 180px;
padding-top: 250px;
max-width: 450px;
font-weight: 200;
font-size: 0.8rem;
}
.bodyContainer {
display: flex;
width: 100%;
padding-right: 80px;
padding-bottom: 80px;
justify-content: center;
min-height: 50vh;
}
h3 {
font-size: 36px;
margin-bottom:10px;
font-weight: 700;
}
h4 {
text-transform: uppercase;
font-weight: 700;
font-size: 27px;
margin-bottom:10px;
}
.logobutton {
padding-right: 45px;
user-select: none;
}
.homenugget{
height:70px;
width:50px;
position:fixed;
top: 5px;
left: 32px;
opacity:0;
user-select: none;
}
.smallu {
height: 50px;
width:50px;
user-select: none;
}
.container {
margin: 0 auto;
display:flex;
align-items: center;
justify-content: space-between;
}
nav {
position:relative;
top: 0;
left: 0;
right: 0;
z-index: 99;
background-color: #212121;
padding: 16px 32px;
border-bottom: 3px solid rgb(37, 164, 173);
}
h1 {
color: #ffffff ;
font-size: 28px;
font-weight: 900;
letter-spacing: 1px;
text-transform: uppercase;
}
.hamburger {
display: block;
position: relative;
z-index: 1;
user-select: none;
appearance: none;
border: none;
outline: none;
background: none;
cursor: pointer;
}
.hamburger span {
display: block;
width: 33px;
height: 4px;
margin-bottom: 5px;
position: relative;
background-color: #eeeeee;
border-radius: 6px;
z-index: 1;
transform-origin: 0 0;
transition: 0.4s;
}
.hamburger:hover span:nth-child(2) {
transform: translateX(10px);
background-color: rgb(37, 164, 173);
}
.hamburger.is-active span:nth-child(1) {
transform: translate(0px, -2px) rotate(45deg);
background-color: rgb(37, 164, 173);
}
.hamburger.is-active span:nth-child(2) {
opacity: 0;
transform: translateX(15px);
}
.hamburger.is-active span:nth-child(3) {
transform: translate(-3px, 3px) rotate(-45deg);
background-color:rgb(37, 164, 173);
}
.hamburger.is-active:hover span {
background-color: rgb(75, 243, 255);
filter: blur(0.5px);
box-shadow: 1px -1px rgb(75, 243, 255);
}
.menu {
display:none;
flex: 1 1 0%;
justify-content: center;
margin: 0 -16;
letter-spacing: 2px;
}
.menu a{
color: ivory;
margin: 0 16;
font-weight: 700;
text-decoration: none;
transition: 0.4s;
padding: 5px 16px;
border-radius: 50px;
}
.menu a.is-active, .menu a:hover{
background-color: rgba(88, 223, 233, 0.295);
color: rgb(75, 243, 255);
}
.dropdown {
position: relative;
}
.dropdownMenu {
position: absolute;
width: 300px;
z-index: 100;
right: -60px;
top: calc(100% + 32px);
border-top: 1px solid rgb(75, 243, 255);
border-bottom: 3px solid rgb(75, 243, 255);
border-left: 3px solid rgb(55, 225, 240);
background-color: #212121;
border-radius: 0 0 15px 15px;
opacity: 0;
}
.link{
display: block;
text-align: left;
margin: 10px;
font-size: 30px;
color: ivory;
text-decoration: none;
opacity: 1;
}
.dropdownMenu a:hover {
background-color: rgba(88, 223, 233, 0.295);
border-radius: 5px;
color: rgb(75, 243, 255);
text-decoration: none;
opacity: 1;
}
.wth{
padding-bottom: 1000px;
}
.footer {
position: relative;
width: 100%;
bottom: 0 ;
text-align: left;
background-color: #212121;
padding:50px 0 50px 0;
}
.footer-container {
margin-left: 1em;
}
.footer h5 {
color: #fff;
}
.footer h5 {
margin-bottom: 20px;
}
.footer p {
color: rgba(255, 255, 255, 0.25);
font-size:16px;
line-height:22px;
}
.hearted {
color:red;
font-size: 12px;
}
.opacityStyle{
opacity: 1;
}
.subscribe {
width: 100%;
background-color: rgb(92, 89, 89);
background-image: url('../images/backgrounds/parallax-bg.jpg');
background-attachment: fixed;
background-repeat: no-repeat;
background-position: 50% 0;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
position: relative;
}
.subscribe >.sub-container {
padding-top: 80px;
padding-bottom: 80px;
}
.subscribe-title h2 {
font-weight: 600;
font-size: 23px;
color: #fff;
letter-spacing:3px;
margin:0 3%;
line-height:70px;
text-transform:uppercase;
}
.subscribe-form {
margin-top: 6px;
}
.subscribe-form input[type=text] {
width: 65%;
height: 60px;
display: block;
padding: 0 20px;
background-color: #fff;
border: 1px solid #fff;
border-radius: 10px;
-webkit-border-top-left-radius: 10px;
-webkit-border-bottom-left-radius: 10px;
-moz-border-radius-topleft: 10px;
-moz-border-radius-bottomleft: 10px;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
line-height: 60px;
letter-spacing:1px;
font-size:15px;
font-weight:300;
float: left;
}
.subscribe-form input:focus {
outline: 0;
}
.subscribe-form input[type=submit] {
width: 35%;
height: 62px;
display: flex;
position: absolute;
right: 5px;
justify-content: center;
background-color: rgb(35, 142, 151);
border: 1px solid rgb(35, 142, 151);
color: #fff;
-webkit-border-top-right-radius: 10px;
-webkit-border-bottom-right-radius: 10px;
-moz-border-radius-topright: 10px;
-moz-border-radius-bottomright: 10px;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
font-weight: 700;
font-size: 33px;
transition: all 0.125s ease-in-out 0s;
-moz-transition: all 0.125s ease-in-out 0s;
-webkit-transition: all 0.125s ease-in-out 0s;
-o-transition: all 0.125s ease-in-out 0s;
-ms-transition: all 0.125s ease-in-out 0s;
}
.subscribe-form input[type=submit]:hover {
background-color: rgb(23, 90, 95);
border: 1px solid rgb(23, 90, 95);
color:rgb(75, 243, 255);
}
.error_message {
color:#fc6e51;
padding-bottom:15px;
font-size:13px;
line-height:30px;
}
#success_page {
color:#9ce726;
padding-bottom:10px;
font-size:12px;
}
#success_page h3 {
font-size:17px;
font-weight:400px;
color:#4ab217;
}
#success_page p {
font-size:12px;
font-weight:400px;
color:#b3b3b3;
}
.box1 {
grid-column: 1/4;
text-align: center;
background: chartreuse;
}
.box2 {
grid-column: 1 / 2;
grid-row: 2/2;
width:300px;
height: 300px;
background:blueviolet
}
.box3 {
width: 200px;
grid-column: 2/3 ;
grid-row:2/3;
background: blue;
}
.box4 {
width: 200px;
grid-column: 1/4;
grid-row:4/4;
background: #fc6e51;
}
.wrapper{
display: grid;
grid-template-columns: repeat(3, auto);
grid-template-rows: repeat(1, 1fr);
gap:10px;
max-height: 55vh;
background: #212121;
}
.megawrap{
display: grid;
grid-auto-flow: column;
height: 350px;
width: 200px;
gap: 20px;
}
#media (min-width: 1080px){
.bodyC2{
max-width: 360px;
padding-left: 150px;
}
.bodyC2{
flex-direction: column;
padding-top: 200px;
padding:50px;
padding-left: 200px;
margin-left: 100px;
}
.bodyC {
padding:50px;
margin-left: 25px;
}
}
#media (max-width: 1175px){
.bodyC2{
max-width: 360px;
padding-left: 75px;
}
.bodyC2{
flex-direction: column;
padding-top: 200px;
padding:50px;
padding-left: 0px;
margin-left: 50px;
}
.bodyC {
padding:50px;
margin-left: 25px;
}
}
#media (max-width: 1400px){
.bodyC2{
max-width: 360px;
padding-left: 75px;
}
.bodyC2{
flex-direction: column;
padding-top: 200px;
padding:50px;
padding-left: 0px;
margin-left: 100px;
}
.bodyC {
padding:50px;
margin-left: 25px;
}
}
#media (min-width: 975px) {
.hamburger{
display: none;
}
.dropdown {
display: none;
}
.menu{
display:flex;
}
.bodyContainer{
flex-direction: row;
}
.bodyC2{
flex-direction: column;
padding-top: 100px;
}
}
#media (max-width: 975px){
.bodyContainer{
flex-direction: column;
}
.bodyC2{
flex-direction: column;
padding-top: 50px;
font-size: .8em;
margin-left: 150px;
}
.bodyC {
font-size: .8em;
margin-left: 50px;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>III</title>
<link rel="stylesheet" href="main.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Dosis:wght#200;300;400;500;600;700;800&family=Roboto+Mono:ital,wght#0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,200;1,300;1,400;1,500;1,600;1,700&family=Rock+3D&display=swap" rel="stylesheet">
</head>
<body>
<nav>
<div class="container">
<div class="logobutton">
<img class="smallu" src="images/ulogo-white.jpg">
<a class="homenugget" href="home.html"></a>
</div>
<h1>Ideas Imprint</h1>
<div class="menu">
Events
About
Login
Dashboard
</div>
<div class="dropdown">
<button class="hamburger">
<span> </span>
<span></span>
<span></span>
</button>
<div class="dropdownMenu">
Events
About
Login
Dashboard
</div>
</div>
</div>
< /nav>
<div class="megawrap">
<div class="wrapper">
<div class="box1">Hello I'm a Head</div>
<img class="box2" src="images/7.jpg" alt="">
<div class= "box3">
box3box3box3box3box3box3box3box3box3box3box3box3
</div>
<div class= "box4">
box4box4box4box4box4box4box4box4box4box4box4
</div>
</div>
<div class="wrapper">
<div class="box1">Hello I'm a Head</div>
<img class="box2" src="images/7.jpg" alt="">
<div class= "box3">
box3box3box3box3box3box3box3box3box3box3box3
</div>
<div class= "box4">
box4box4box4box4box4box4box4box
</div>
</div>
<div class="wrapper">
<div class="box1">Hello I'm a Head</div>
<img class="box2" src="images/7.jpg" alt="">
<div class= "box3">
box3box3box3box3box3box3box3box3box3box3box3box3
</div>
<div class= "box4">
box4box4box4box4box4box4box4box4box
</div>
</div>
</div>
<div class="wth"></div>
<!-- Footer section -->
<footer class="footer">
<div class="footer-container">
<div class="footer-row">
<div class="Footer-text-left">
<p>Copyright © 2022 Ideas Imprint Inc. All Rights Reserved.</p>
<p> Made with <span class="hearted"> ❤</span></p>
</div>
</div>
</div>
<!-- footer top -->
</footer>
<!-- Footer section -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="main.js"></script>
</body>
</html>
Make use of word-wrap property. Add word-wrap: break-word; on your .box3 and .box4 classes. More on it here.
* {
margin: 0;
padding: 0;
}
html {
box-sizing: border-box;
font-size: 30px;
font-family: 'Bitter', serif;
}
body {
background: rgb(7, 7, 7);
color: #fff;
}
.imgContainer {
width: 100%;
height: fit-content;
background-color: black;
pointer-events: none;
user-select: none;
}
.mySlides {
opacity: 0.5;
overflow: hidden;
background-position: center;
width: 100%;
height: 650px;
max-height: 75vh;
pointer-events: none;
user-select: none;
}
.bodyC {
padding-top: 75px;
max-width: 360px;
font-weight: 200;
font-size: 0.8rem;
}
.bodyC2 {
padding-left: 180px;
padding-top: 250px;
max-width: 450px;
font-weight: 200;
font-size: 0.8rem;
}
.bodyContainer {
display: flex;
width: 100%;
padding-right: 80px;
padding-bottom: 80px;
justify-content: center;
min-height: 50vh;
}
h3 {
font-size: 36px;
margin-bottom: 10px;
font-weight: 700;
}
h4 {
text-transform: uppercase;
font-weight: 700;
font-size: 27px;
margin-bottom: 10px;
}
.logobutton {
padding-right: 45px;
user-select: none;
}
.homenugget {
height: 70px;
width: 50px;
position: fixed;
top: 5px;
left: 32px;
opacity: 0;
user-select: none;
}
.smallu {
height: 50px;
width: 50px;
user-select: none;
}
.container {
margin: 0 auto;
display: flex;
align-items: center;
justify-content: space-between;
}
nav {
position: relative;
top: 0;
left: 0;
right: 0;
z-index: 99;
background-color: #212121;
padding: 16px 32px;
border-bottom: 3px solid rgb(37, 164, 173);
}
h1 {
color: #ffffff;
font-size: 28px;
font-weight: 900;
letter-spacing: 1px;
text-transform: uppercase;
}
.hamburger {
display: block;
position: relative;
z-index: 1;
user-select: none;
appearance: none;
border: none;
outline: none;
background: none;
cursor: pointer;
}
.hamburger span {
display: block;
width: 33px;
height: 4px;
margin-bottom: 5px;
position: relative;
background-color: #eeeeee;
border-radius: 6px;
z-index: 1;
transform-origin: 0 0;
transition: 0.4s;
}
.hamburger:hover span:nth-child(2) {
transform: translateX(10px);
background-color: rgb(37, 164, 173);
}
.hamburger.is-active span:nth-child(1) {
transform: translate(0px, -2px) rotate(45deg);
background-color: rgb(37, 164, 173);
}
.hamburger.is-active span:nth-child(2) {
opacity: 0;
transform: translateX(15px);
}
.hamburger.is-active span:nth-child(3) {
transform: translate(-3px, 3px) rotate(-45deg);
background-color: rgb(37, 164, 173);
}
.hamburger.is-active:hover span {
background-color: rgb(75, 243, 255);
filter: blur(0.5px);
box-shadow: 1px -1px rgb(75, 243, 255);
}
.menu {
display: none;
flex: 1 1 0%;
justify-content: center;
margin: 0 -16;
letter-spacing: 2px;
}
.menu a {
color: ivory;
margin: 0 16;
font-weight: 700;
text-decoration: none;
transition: 0.4s;
padding: 5px 16px;
border-radius: 50px;
}
.menu a.is-active,
.menu a:hover {
background-color: rgba(88, 223, 233, 0.295);
color: rgb(75, 243, 255);
}
.dropdown {
position: relative;
}
.dropdownMenu {
position: absolute;
width: 300px;
z-index: 100;
right: -60px;
top: calc(100% + 32px);
border-top: 1px solid rgb(75, 243, 255);
border-bottom: 3px solid rgb(75, 243, 255);
border-left: 3px solid rgb(55, 225, 240);
background-color: #212121;
border-radius: 0 0 15px 15px;
opacity: 0;
}
.link {
display: block;
text-align: left;
margin: 10px;
font-size: 30px;
color: ivory;
text-decoration: none;
opacity: 1;
}
.dropdownMenu a:hover {
background-color: rgba(88, 223, 233, 0.295);
border-radius: 5px;
color: rgb(75, 243, 255);
text-decoration: none;
opacity: 1;
}
.wth {
padding-bottom: 1000px;
}
.footer {
position: relative;
width: 100%;
bottom: 0;
text-align: left;
background-color: #212121;
padding: 50px 0 50px 0;
}
.footer-container {
margin-left: 1em;
}
.footer h5 {
color: #fff;
}
.footer h5 {
margin-bottom: 20px;
}
.footer p {
color: rgba(255, 255, 255, 0.25);
font-size: 16px;
line-height: 22px;
}
.hearted {
color: red;
font-size: 12px;
}
.opacityStyle {
opacity: 1;
}
.subscribe {
width: 100%;
background-color: rgb(92, 89, 89);
background-image: url('../images/backgrounds/parallax-bg.jpg');
background-attachment: fixed;
background-repeat: no-repeat;
background-position: 50% 0;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
position: relative;
}
.subscribe>.sub-container {
padding-top: 80px;
padding-bottom: 80px;
}
.subscribe-title h2 {
font-weight: 600;
font-size: 23px;
color: #fff;
letter-spacing: 3px;
margin: 0 3%;
line-height: 70px;
text-transform: uppercase;
}
.subscribe-form {
margin-top: 6px;
}
.subscribe-form input[type=text] {
width: 65%;
height: 60px;
display: block;
padding: 0 20px;
background-color: #fff;
border: 1px solid #fff;
border-radius: 10px;
-webkit-border-top-left-radius: 10px;
-webkit-border-bottom-left-radius: 10px;
-moz-border-radius-topleft: 10px;
-moz-border-radius-bottomleft: 10px;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
line-height: 60px;
letter-spacing: 1px;
font-size: 15px;
font-weight: 300;
float: left;
}
.subscribe-form input:focus {
outline: 0;
}
.subscribe-form input[type=submit] {
width: 35%;
height: 62px;
display: flex;
position: absolute;
right: 5px;
justify-content: center;
background-color: rgb(35, 142, 151);
border: 1px solid rgb(35, 142, 151);
color: #fff;
-webkit-border-top-right-radius: 10px;
-webkit-border-bottom-right-radius: 10px;
-moz-border-radius-topright: 10px;
-moz-border-radius-bottomright: 10px;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
font-weight: 700;
font-size: 33px;
transition: all 0.125s ease-in-out 0s;
-moz-transition: all 0.125s ease-in-out 0s;
-webkit-transition: all 0.125s ease-in-out 0s;
-o-transition: all 0.125s ease-in-out 0s;
-ms-transition: all 0.125s ease-in-out 0s;
}
.subscribe-form input[type=submit]:hover {
background-color: rgb(23, 90, 95);
border: 1px solid rgb(23, 90, 95);
color: rgb(75, 243, 255);
}
.error_message {
color: #fc6e51;
padding-bottom: 15px;
font-size: 13px;
line-height: 30px;
}
#success_page {
color: #9ce726;
padding-bottom: 10px;
font-size: 12px;
}
#success_page h3 {
font-size: 17px;
font-weight: 400px;
color: #4ab217;
}
#success_page p {
font-size: 12px;
font-weight: 400px;
color: #b3b3b3;
}
/* ------------------------------------------------------------------------------
THE IMPORTANT PART
-------------------------------------------------------------------------------*/
.box1 {
grid-column: 1/4;
text-align: center;
background: chartreuse;
}
.box2 {
grid-column: 1 / 2;
grid-row: 2/2;
width: 300px;
height: 300px;
background: blueviolet
}
.box3 {
width: 200px;
grid-column: 2/3;
grid-row: 2/3;
background: blue;
word-wrap: break-word;
}
.box4 {
width: 200px;
grid-column: 1/4;
grid-row: 4/4;
background: #fc6e51;
word-wrap: break-word;
}
.wrapper {
display: grid;
grid-template-columns: repeat(3, auto);
grid-template-rows: repeat(1, 1fr);
gap: 10px;
max-height: 55vh;
background: #212121;
}
.megawrap {
display: grid;
grid-auto-flow: column;
height: 350px;
width: 200px;
gap: 20px;
}
/* ------------------------------------------------------------------------------
THE IMPORTANT PART END
-------------------------------------------------------------------------------*/
#media (min-width: 1080px) {
.bodyC2 {
max-width: 360px;
padding-left: 150px;
}
.bodyC2 {
flex-direction: column;
padding-top: 200px;
padding: 50px;
padding-left: 200px;
margin-left: 100px;
}
.bodyC {
padding: 50px;
margin-left: 25px;
}
}
#media (max-width: 1175px) {
.bodyC2 {
max-width: 360px;
padding-left: 75px;
}
.bodyC2 {
flex-direction: column;
padding-top: 200px;
padding: 50px;
padding-left: 0px;
margin-left: 50px;
}
.bodyC {
padding: 50px;
margin-left: 25px;
}
}
#media (max-width: 1400px) {
.bodyC2 {
max-width: 360px;
padding-left: 75px;
}
.bodyC2 {
flex-direction: column;
padding-top: 200px;
padding: 50px;
padding-left: 0px;
margin-left: 100px;
}
.bodyC {
padding: 50px;
margin-left: 25px;
}
}
#media (min-width: 975px) {
.hamburger {
display: none;
}
.dropdown {
display: none;
}
.menu {
display: flex;
}
.bodyContainer {
flex-direction: row;
}
.bodyC2 {
flex-direction: column;
padding-top: 100px;
}
}
/* Once completely tiny shrink text to columns */
#media (max-width: 975px) {
.bodyContainer {
flex-direction: column;
}
.bodyC2 {
flex-direction: column;
padding-top: 50px;
font-size: .8em;
margin-left: 150px;
}
.bodyC {
font-size: .8em;
margin-left: 50px;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>III</title>
<link rel="stylesheet" href="main.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Dosis:wght#200;300;400;500;600;700;800&family=Roboto+Mono:ital,wght#0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,200;1,300;1,400;1,500;1,600;1,700&family=Rock+3D&display=swap" rel="stylesheet">
</head>
<body>
<nav>
<div class="container">
<div class="logobutton">
<img class="smallu" src="images/ulogo-white.jpg">
<a class="homenugget" href="home.html"></a>
</div>
<h1>Ideas Imprint</h1>
<div class="menu">
Events
About
Login
Dashboard
</div>
<div class="dropdown">
<button class="hamburger">
<span> </span>
<span></span>
<span></span>
</button>
<div class="dropdownMenu">
Events
About
Login
Dashboard
</div>
</div>
</div>
< /nav>
<div class="megawrap">
<div class="wrapper">
<div class="box1">Hello I'm a Head</div>
<img class="box2" src="images/7.jpg" alt="">
<div class="box3">
box3box3box3box3box3box3box3box3box3box3box3box3
</div>
<div class="box4">
box4box4box4box4box4box4box4box4box4box4box4
</div>
</div>
<div class="wrapper">
<div class="box1">Hello I'm a Head</div>
<img class="box2" src="images/7.jpg" alt="">
<div class="box3">
box3box3box3box3box3box3box3box3box3box3box3
</div>
<div class="box4">
box4box4box4box4box4box4box4box
</div>
</div>
<div class="wrapper">
<div class="box1">Hello I'm a Head</div>
<img class="box2" src="images/7.jpg" alt="">
<div class="box3">
box3box3box3box3box3box3box3box3box3box3box3box3
</div>
<div class="box4">
box4box4box4box4box4box4box4box4box
</div>
</div>
</div>
<div class="wth"></div>
<!-- Footer section -->
<footer class="footer">
<div class="footer-container">
<div class="footer-row">
<div class="Footer-text-left">
<p>Copyright © 2022 Ideas Imprint Inc. All Rights Reserved.</p>
<p> Made with <span class="hearted"> ❤</span></p>
</div>
</div>
</div>
<!-- footer top -->
</footer>
<!-- Footer section -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="main.js"></script>
</body>
</html>
I want to move the "Not got account" submit button to below the form but not sure what I am doing wrong
I think it is the CSS for .box but not sure how to edit it so it moves the button below and I tried using div tags to move it and they did not work.
Is there a bit of code in my CSS that is keeping it in the centre
I would like to keep it in the same style
Any help would be greatly appreiated
* {
box-sizing: border-box;
}
html {
background: #191919;
}
body {
background: #191919, #f5f5f5;
margin: 0;
padding: 0;
font-family: 'Lato', sans-serif;
text-align: center;
font-weight: 100;
width 100vw;
height 100vh;
}
.box {
width: 400px;
padding: 40px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: #191919;
text-align: center;
}
.box h1 {
color: white;
text-transform: uppercase;
font-weight: 500;
}
.box input[type="text"],
.box input[type="password"] .box input[type="email"] {
border: 0;
background: none;
display: block;
margin: 20px auto;
text-align: center;
border: 2px solid #3498db;
padding: 14px 10px;
width: 200px;
outline: none;
color: white;
border-radius: 24px;
transition: 0.25s;
}
.box input[type="text"]:focus,
.box input[type="password"]:focus .box input[type="email"]:focus {
width: 280px;
border-color: #2ecc71;
}
.box input[type="submit"] {
border: 0;
background: none;
display: block;
margin: 20px auto;
text-align: center;
border: 2px solid #2ecc71;
padding: 14px 40px;
outline: none;
color: white;
border-radius: 24px;
transition: 0.25s;
cursor: pointer;
}
.box input[type="submit"]:hover {
background: #2ecc71;
}
<html>
<form class="box" action="login.php" method="post">
<h1>Login</h1>
<input type="text" name="u_email" placeholder="Email">
<input type="password" name="u_pass" placeholder="Password">
<input type="submit" name="u_btn" value="Login">
</form>
<div id="right-bar">
<form class="box" action="register.php" method="POST">
<input type="submit" name="" value="Not got an Account?">
</form>
</div>
</html>
This is because the 2nd form uses the same class box which centers the element with the first one.
.box {
...
top: 50%; <--- this is the problem
left: 50%;
...
}
* {
box-sizing: border-box;
}
html {
background: #191919;
}
body {
background: #191919, #f5f5f5;
margin: 0;
padding: 0;
font-family: 'Lato', sans-serif;
text-align: center;
font-weight: 100;
width 100vw;
height 100vh;
}
.box {
width: 400px;
padding: 40px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: #191919;
text-align: center;
}
.box h1 {
color: white;
text-transform: uppercase;
font-weight: 500;
}
.box input[type="text"],
.box input[type="password"] .box input[type="email"] {
border: 0;
background: none;
display: block;
margin: 20px auto;
text-align: center;
border: 2px solid #3498db;
padding: 14px 10px;
width: 200px;
outline: none;
color: white;
border-radius: 24px;
transition: 0.25s;
}
.box input[type="text"]:focus,
.box input[type="password"]:focus .box input[type="email"]:focus {
width: 280px;
border-color: #2ecc71;
}
.box input[type="submit"] {
border: 0;
background: none;
display: block;
margin: 20px auto;
text-align: center;
border: 2px solid #2ecc71;
padding: 14px 40px;
outline: none;
color: white;
border-radius: 24px;
transition: 0.25s;
cursor: pointer;
}
.box input[type="submit"]:hover {
background: #2ecc71;
}
.box2 {
padding: 0px;
top: 90%;
}
<html>
<form class="box" action="login.php" method="post">
<h1>Login</h1>
<input type="text" name="u_email" placeholder="Email">
<input type="password" name="u_pass" placeholder="Password">
<input type="submit" name="u_btn" value="Login">
</form>
<div id="right-bar">
<form class="box box2" action="register.php" method="POST">
<input type="submit" name="" value="Not got an Account?">
</form>
</div>
</html>
Just don't position your boxes absolute. Makes it quite difficult to get the positioning right.
* {
box-sizing: border-box;
}
html {
background: #191919;
}
body {
background: #191919, #f5f5f5;
margin: 0;
padding: 0;
font-family: 'Lato', sans-serif;
text-align: center;
font-weight: 100;
width 100vw;
height 100vh;
}
.box {
width: 400px;
padding: 40px;
margin: 0 auto;
background: #191919;
text-align: center;
}
.box h1 {
color: white;
text-transform: uppercase;
font-weight: 500;
}
.box input[type="text"],
.box input[type="password"] .box input[type="email"] {
border: 0;
background: none;
display: block;
margin: 20px auto;
text-align: center;
border: 2px solid #3498db;
padding: 14px 10px;
width: 200px;
outline: none;
color: white;
border-radius: 24px;
transition: 0.25s;
}
.box input[type="text"]:focus,
.box input[type="password"]:focus .box input[type="email"]:focus {
width: 280px;
border-color: #2ecc71;
}
.box input[type="submit"] {
border: 0;
background: none;
display: block;
margin: 20px auto;
text-align: center;
border: 2px solid #2ecc71;
padding: 14px 40px;
outline: none;
color: white;
border-radius: 24px;
transition: 0.25s;
cursor: pointer;
}
.box input[type="submit"]:hover {
background: #2ecc71;
}
<html>
<form class="box" action="login.php" method="post">
<h1>Login</h1>
<input type="text" name="u_email" placeholder="Email">
<input type="password" name="u_pass" placeholder="Password">
<input type="submit" name="u_btn" value="Login">
</form>
<div id="right-bar">
<form class="box" action="register.php" method="POST">
<input type="submit" name="" value="Not got an Account?">
</form>
</div>
</html>
Not sure if this is what you are looking for, but position absolute in your form is not the best use in this case. You can read more about it here: https://developer.mozilla.org/en-US/docs/Web/CSS/position
Anyway, I made some adjustments in your code: I added a div container for the whole page and made some changes in your css as well. You can check it out in the demo below.
* {
box-sizing: border-box;
}
html {
background: #191919;
}
body {
background: #191919, #f5f5f5;
margin: 0;
padding: 0;
font-family: "Lato", sans-serif;
text-align: center;
font-weight: 100;
width: 100vw;
height: 100vh;
}
.main-container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.box {
margin-top: 10%;
width: 400px;
padding: 40px;
/* position: absolute; */
/* top: 50%;
left: 50%; */
/* transform: translate(-50%, -50%); */
background: #191919;
text-align: center;
}
.box h1 {
color: white;
text-transform: uppercase;
font-weight: 500;
}
.box input[type="text"],
.box input[type="password"] .box input[type="email"] {
border: 0;
background: none;
display: block;
margin: 20px auto;
text-align: center;
border: 2px solid #3498db;
padding: 14px 10px;
width: 200px;
outline: none;
color: white;
border-radius: 24px;
transition: 0.25s;
}
.box input[type="text"]:focus,
.box input[type="password"]:focus .box input[type="email"]:focus {
width: 280px;
border-color: #2ecc71;
}
.box input[type="submit"] {
border: 0;
background: none;
display: block;
margin: 20px auto;
text-align: center;
border: 2px solid #2ecc71;
padding: 14px 40px;
outline: none;
color: white;
border-radius: 24px;
transition: 0.25s;
cursor: pointer;
}
.box input[type="submit"]:hover {
background: #2ecc71;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="main-container">
<form class="box" action="login.php" method="post">
<h1>Login</h1>
<input type="text" name="u_email" placeholder="Email" />
<input type="password" name="u_pass" placeholder="Password" />
<input type="submit" name="u_btn" value="Login" />
</form>
<div id="right-bar">
<form class="box" action="register.php" method="POST">
<input type="submit" name="" value="Not got an Account?" />
</form>
</div>
</div>
</body>
</html>
When ever I re-size the window the header moves leaving a space on the right side. (Refer to image ). If I shrink the window horizontally even more the gap increases. I have only been able to fix this problem by making the position for header to fixed but then the text overlaps. I want the header to move with the vertical scroll. Any help on here where I am going wrong is highly appreciated.
*{
padding:0;
margin:0 auto;
font-family: 'Museo Slab 300';
}
html{
background: url("Images/backlines.png") no-repeat center center fixed;
}
.company-header {
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%,color-stop(0, rgb(226, 226, 226)),color-stop(0, rgb(254, 254, 254)),color-stop(0.1, rgb(254, 254, 254)),color-stop(1, rgb(219, 219, 219)),color-stop(1, rgb(209, 209, 209)));
height: 140px;
box-shadow: 0px 2px;
position: absolute;
width: 100%;
top: 0px;
}
.company-footer{
position: fixed;
right: 0;
bottom: 0;
left: 0;
padding: 1rem;
background-color: #efefef;
text-align: left;
z-index:-1;
box-shadow: 0px -4px rgba(0, 173, 239, 1);
}
img#logo-image {
position: absolute;
left: 270px;
}
div#setting-dropdown {
position: relative;
float: right;
right: 250px;
top: 58px;
}
div#setting-dropdown-content {
display: none;
background: rgba(0, 173, 239, 1);
width: 196px;
margin-left: -70px;
padding: 4px 5px 5px 7px;
}
div#setting-dropdown-content a {
color: white;
text-decoration: none;
font-size: 16px;
font-family: 'Museo Slab 300';
display: inline-block;
}
div#setting-dropdown i {
display: inline-block;
padding: 5px;
padding-right: 7px;
text-align: center;
border-radius: 10px 10px 0 0;
padding-bottom: 10px;
color: rgba(0, 173, 239, 1);
}
div#setting-dropdown:hover i {
background-color: rgba(0, 173, 239, 1);
color:white;
}
#setting-dropdown:hover #setting-dropdown-content {
display:block;
}
p#setting-dropdown {
font-size: 20px;
font-weight: bold;
}
button#company-logout {
background: rgba(255, 255, 255, 1);
border: none;
border-radius: 40px 40px 40px 40px;
width: 135px;
height: 40px;
font-size: 19px;
font-weight: 900;
font-family: 'Museo Slab 700';
float: right;
top: 54px;
right: -40px;
position: relative;
}
div#log-in {
position: relative;
top: 200px;
}
div#welcome-text {
margin-left: 276px;
font-family: 'Museo Slab 300';
font-size: 22px;
}
div#loginHeader {
margin-top: 60px;
margin-left: 276px;
}
div#dropdown-main-content {
position: relative;
top: 230px;
left: 276px;
display: inline-flex;
}
.dropdown {
position: relative;
width: 11em;
top: 60px;
right: 260px;
}
.dropbtn {
color: white;
width: 100%;
height: 3.2em;
font-size: 16px;
border: none;
text-align: start;
font-weight: 900;
background: rgba(0, 173, 239, 1);
border-radius: 50px 50px 50px 50px;
-moz-border-radius: 0px;
z-index: 2;
text-indent: 23px;
}
.dropdown-content {
display: none;
z-index: -1;
background-color: #f9f9f9;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
margin-top: -64px;
width: 176px;
}
.dropdown a {
background:url("Images/sidearrow.png") no-repeat 7px;
}
.dropdown-content a {
color: black;
padding: .75em;
text-decoration: none;
display: block;
border: 1px solid #000;
border-top: none;
text-indent: 12px;
width: 150px;
}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown:hover .dropbtn {
background-color: #3e8e41;
}
.dropdown-content a:hover {
background:url("Images/sidewhite.png") no-repeat 3px;
background-color: rgb(255,131,0);
color:white;
font-weight:900;
}
.dropdown-content a:first-child {
padding-top: 35px;
background: url("Images/sidearrow.png") no-repeat 7px 36px;
}
.dropdown-content a:first-child:hover {
background: url("Images/sidewhite.png") no-repeat 3px 36px;
color:white;
background-color: rgb(255,131,0);
font-weight:900;
}
img#sphere {
position: relative;
width: 35px;
height: 34px ;
left: 133px;
bottom: 42px;
}
img#sphere-arrow {
position: relative;
bottom: 44px;
left: 99px;
}
div#login-form {
margin-top: 100px;
margin-left: 276px;
}
.page-label {
font-size: 19px;
}
button#loginSubmit {
margin-top: 75px;
background: rgba(0, 173, 239, 1);
border-radius: 0px;
-moz-border-radius: 0px;
border-radius: 40px 40px 40px 40px;
width: 185px;
height: 60px;
font-size: 20px;
font-family: sans-serif;
color: white;
font-weight: 900;
border: none;
position: absolute;
margin-left: 278px;
}
div#login-landingpage{
margin-left: 276px;
margin-top: 90px;
}
select.security-questions {
width: 450px;
height: 40px;
font-weight: bold;
}
.security-question-labels {
font-size: 21px;
font-family: 'Museo Slab 300';
}
<!DOCTYPE html>
<html>
<head>
<title>Averios</title>
<link rel="stylesheet" type="text/css" href="test.css">
<link rel="stylesheet" href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" />
<meta charset="utf-8">
</head>
<body>
<div class="company-header">
<img id="averios-logo-image" src="Images/averioslogo.png" width="176" height="129">
<div id="setting-dropdown">
<!-- SETTING DROPDOWN WILL GO HERE -->
<p id="setting-dropdown"> SETTINGS <i class="ion-chevron-down"></i></p>
<div id="setting-dropdown-content">
Change Password
Change Security Settings
</div>
</div>
<button id="company-logout"> LOGOUT </button>
</div>
<div id="log-in">
<div id="loginHeader">
<h1>Portal</h1>
</div>
<br>
<br>
<div id="welcome-text">
<p> Welcome name </p>
<p> Your last login was time on date </p>
<br>
<p> Please select an application below to begin </p>
</div>
</div>
<div id="dropdown-main-content">
<img id="pulse-image" src="C:\Users\user\Desktop\Final-Designs\Images\pulse.png" width="320" height="50" alt=""/>
<div id="dropdown-one">
<div class="dropdown">
<button class="dropbtn">SELECT</button>
<img id="sphere" src="C:\Users\user\Desktop\Final-Designs\Images\sphere.png" alt=""/>
<img id="sphere-arrow" src="C:\Users\user\Desktop\Final-Designs\Images\arrow.png" alt=""/>
<div class="dropdown-content">
option0
option1
</div>
</div>
</div>
<!-- SENTINAL -->
<img id="sentinal-image" src="C:\Users\user\Desktop\Final-Designs\Images\sentinal.png" width="380" height="50" alt=""/>
<div id="dropdown-second">
<div class="dropdown">
<button class="dropbtn">SELECT</button>
<img id="sphere" src="C:\Users\user\Desktop\Final-Designs\Images\sphere.png" alt=""/>
<img id="sphere-arrow" src="C:\Users\user\Desktop\Final-Designs\Images\arrow.png" alt=""/>
<!--<div class="sphere-two">
<div id="arrow-two">
<img src="C:\Users\user\Desktop\Images\arrow.png" width="29" height="27" alt=""/>
</div>
</div>-->
<div class="dropdown-content">
option0
option1
</div>
</div>
</div>
</div>
<div class="company-footer">
<div id="footer-text">
© 2016 Company, All Rights Reserved.
</div>
</div>
</body>
</html>
Problem is
div#dropdown-main-content {
position: relative;
top: 230px;
left: 276px;
display: inline-flex; }
try to remove display to inline and left to 0 like this
div#dropdown-main-content {
position: relative;
top: 230px;
display: inline; }
also remove fixed widths from images and divs, try to use max-width.
update
*{
padding:0;
margin:0 auto;
font-family: 'Museo Slab 300';
}
html{
background: url("Images/backlines.png") no-repeat center center fixed;
}
.averios-header {
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%,color-stop(0, rgb(226, 226, 226)),color-stop(0, rgb(254, 254, 254)),color-stop(0.1, rgb(254, 254, 254)),color-stop(1, rgb(219, 219, 219)),color-stop(1, rgb(209, 209, 209)));
height: 140px;
box-shadow: 0px 2px;
position: absolute;
width: 100%;
top: 0px;
}
.averios-footer{
position: fixed;
right: 0;
bottom: 0;
left: 0;
padding: 1rem;
background-color: #efefef;
text-align: left;
z-index:-1;
box-shadow: 0px -4px rgba(0, 173, 239, 1);
}
img#averios-logo-image {
position: absolute;
left: 270px;
}
div#setting-dropdown {
position: relative;
float: right;
right: 250px;
top: 58px;
}
div#setting-dropdown-content {
display: none;
background: rgba(0, 173, 239, 1);
width: 196px;
margin-left: -70px;
padding: 4px 5px 5px 7px;
}
div#setting-dropdown-content a {
color: white;
text-decoration: none;
font-size: 16px;
font-family: 'Museo Slab 300';
display: inline-block;
}
div#setting-dropdown i {
display: inline-block;
padding: 5px;
padding-right: 7px;
text-align: center;
border-radius: 10px 10px 0 0;
padding-bottom: 10px;
color: rgba(0, 173, 239, 1);
}
div#setting-dropdown:hover i {
background-color: rgba(0, 173, 239, 1);
color:white;
}
#setting-dropdown:hover #setting-dropdown-content {
display:block;
}
p#setting-dropdown {
font-size: 20px;
font-weight: bold;
}
button#averios-logout {
background: rgba(255, 255, 255, 1);
border: none;
border-radius: 40px 40px 40px 40px;
width: 135px;
height: 40px;
font-size: 19px;
font-weight: 900;
font-family: 'Museo Slab 700';
float: right;
top: 54px;
right: -40px;
position: relative;
}
div#log-in {
position: relative;
top: 200px;
}
div#welcome-text {
margin-left: 276px;
font-family: 'Museo Slab 300';
font-size: 22px;
}
div#loginHeader {
margin-top: 60px;
margin-left: 276px;
}
div#dropdown-main-content {
position: relative;
top: 230px;
display: inline-block;
text-align: center;
width: 100%;
}
.dropdown {
position: relative;
width: 11em;
top: 60px;
}
.dropbtn {
color: white;
width: 100%;
height: 3.2em;
font-size: 16px;
border: none;
text-align: start;
font-weight: 900;
background: rgba(0, 173, 239, 1);
border-radius: 50px 50px 50px 50px;
-moz-border-radius: 0px;
z-index: 2;
text-indent: 23px;
}
.dropdown-content {
display: none;
z-index: -1;
background-color: #f9f9f9;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
margin-top: -64px;
width: 176px;
}
.dropdown a {
background:url("Images/sidearrow.png") no-repeat 7px;
}
.dropdown-content a {
color: black;
padding: .75em;
text-decoration: none;
display: block;
border: 1px solid #000;
border-top: none;
text-indent: 12px;
width: 150px;
}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown:hover .dropbtn {
background-color: #3e8e41;
}
.dropdown-content a:hover {
background:url("Images/sidewhite.png") no-repeat 3px;
background-color: rgb(255,131,0);
color:white;
font-weight:900;
}
.dropdown-content a:first-child {
padding-top: 35px;
background: url("Images/sidearrow.png") no-repeat 7px 36px;
}
.dropdown-content a:first-child:hover {
background: url("Images/sidewhite.png") no-repeat 3px 36px;
color:white;
background-color: rgb(255,131,0);
font-weight:900;
}
img#sphere {
position: relative;
width: 35px;
height: 34px ;
left: 133px;
bottom: 42px;
}
img#sphere-arrow {
position: relative;
bottom: 44px;
left: 99px;
}
div#login-form {
margin-top: 100px;
margin-left: 276px;
}
.page-label {
font-size: 19px;
}
input[type="text"] {
background: #EDEDEE;
background : rgba(237, 237, 238, 1);
border-style : Solid;
border-color : #4B4E53;
border-color : rgba(75, 78, 83, 1);
border-width : 1px;
width: 370px;
height: 35px;
font-size: 26px;
}
input[type="password"] {
background: #EDEDEE;
background : rgba(237, 237, 238, 1);
border-style : Solid;
border-color : #4B4E53;
border-color : rgba(75, 78, 83, 1);
border-width : 1px;
width: 370px;
height: 35px;
font-size: 26px;
}
button#loginSubmit {
margin-top: 75px;
background: rgba(0, 173, 239, 1);
border-radius: 0px;
-moz-border-radius: 0px;
border-radius: 40px 40px 40px 40px;
width: 185px;
height: 60px;
font-size: 20px;
font-family: sans-serif;
color: white;
font-weight: 900;
border: none;
position: absolute;
margin-left: 278px;
}
div#login-landingpage{
margin-left: 276px;
margin-top: 90px;
}
select.security-questions {
width: 450px;
height: 40px;
font-weight: bold;
}
.security-question-labels {
font-size: 21px;
font-family: 'Museo Slab 300';
}
button#saveSubmit {
margin-top: 55px;
background: rgba(0, 173, 239, 1);
border-radius: 0px;
-moz-border-radius: 0px;
border-radius: 40px 40px 40px 40px;
width: 170px;
height: 55px;
font-size: 20px;
font-family: sans-serif;
color: white;
font-weight: 900;
border: none;
position: absolute;
margin-left: 278px;
}
button#cancelSubmit {
margin-top: 55px;
background: rgb(75,79,84);
border-radius: 0px;
-moz-border-radius: 0px;
border-radius: 40px 40px 40px 40px;
width: 170px;
height: 55px;
font-size: 20px;
font-family: sans-serif;
color: white;
font-weight: 900;
border: none;
position: absolute;
margin-left: 478px;
}
div#security-form {
margin-top: 60px;
margin-left: 276px;
}
/* TEST */
div#dropdown-col-2 {
display:inline-block;
}
div#dropdown-second {
position: absolute;
left: 1040px;
top: -10px;
}
//HTML
<div class="averios-header">
<img id="averios-logo-image" src="http://lorempixel.com/176/129/"></img>
</a>
<div id="setting-dropdown">
<!-- SETTING DROPDOWN WILL GO HERE -->
<p id="setting-dropdown"> SETTINGS <i class="ion-chevron-down"></i></p>
<div id="setting-dropdown-content">
Change Password
Change Security Settings
</div>
</div>
<button id="averios-logout"> LOGOUT </button>
</div>
<div id="log-in">
<div id="loginHeader">
<h1> Portal</h1>
</div>
<br>
<br>
<div id="welcome-text">
<p> Welcome name </p>
<p> Your last login was time on date </p>
<br>
<p> Please select an application below to begin </p>
</div>
</div>
<div id="dropdown-main-content">
<div id="dropdown-col-2">
<img id="averios-pulse-image" src="http://lorempixel.com/362/46/" alt="" />
<div class="dropdown">
<button class="dropbtn">SELECT</button>
<div class="dropdown-content">
Option1
</div>
</div>
</div>
<!-- SENTINAL -->
<div id="dropdown-col-2">
<img id="averios-sentinal-image" src="http://lorempixel.com/362/46/" alt="" />
<div class="dropdown">
<button class="dropbtn">SELECT</button>
<div class="dropdown-content">
Option1
</div>
</div>
</div>
</div>
<div class="averios-footer">
<div id="footer-text">
© 2016, All Rights Reserved.
</div>
</div>
Please help to vertically align the tittle.
It seems not working properly.
<html>
<body>
<head>
<style type="text/css">
html *
{
margin: 0px;
padding: 0px;}
.Title
{
width: 50%;
display:inline-block;
vertical-align:middle;
text-align: center;
font-weight: bold;
font-size: larger;
border: solid;
border-width: thin;
}
.btn{
color:white;
background-color:#8CC152;
margin: 0px !important;
width: auto;
display: inline-block;
padding: 6px 12px;
margin-bottom: 0px;
font-size: 14px;
font-weight: 400;
line-height: 1.42857;
text-align: center;
white-space: nowrap;
vertical-align: middle;
cursor: pointer;
-moz-user-select: none;
background-image: none;
border: 1px solid transparent;
}
.btn:hover{
background-color:#A0D468;
}
.btn-next{
border-radius: 4px;
border-top-left-radius: 0px;
border-bottom-left-radius: 0px;
float:right;
}
.btn-prev{
border-radius: 4px;
border-top-right-radius: 0px;
border-bottom-right-radius: 0px;
float:left;
}
</style>
</head>
<div class='Title'>
<p>
This is a title
<a href='?m=1'><span class='btn btn-prev'>LEFT</span></a>
<a href='?m=2'><span class='btn btn-next'>RIGHT</span></a>
</p>
</div>
</body>
</html>
Set a line-height for the paragraph
p {
line-height: 32px;
vertical-align: middle;
}
p {
line-height: 32px;
vertical-align: middle;
}
<head>
<style type="text/css">
html * {
margin: 0px;
padding: 0px;
}
.Title {
width: 50%;
display: inline-block;
vertical-align: middle;
text-align: center;
font-weight: bold;
font-size: larger;
border: solid;
border-width: thin;
}
.btn {
color: white;
background-color: #8CC152;
margin: 0px !important;
width: auto;
display: inline-block;
padding: 6px 12px;
margin-bottom: 0px;
font-size: 14px;
font-weight: 400;
line-height: 1.42857;
text-align: center;
white-space: nowrap;
vertical-align: middle;
cursor: pointer;
-moz-user-select: none;
background-image: none;
border: 1px solid transparent;
}
.btn:hover {
background-color: #A0D468;
}
.btn-next {
border-radius: 4px;
border-top-left-radius: 0px;
border-bottom-left-radius: 0px;
float: right;
}
.btn-prev {
border-radius: 4px;
border-top-right-radius: 0px;
border-bottom-right-radius: 0px;
float: left;
}
</style>
</head>
<div class='Title'>
<p>
This is a title
<a href='?m=1'><span class='btn btn-prev'>LEFT</span></a>
<a href='?m=2'><span class='btn btn-next'>RIGHT</span></a>
</p>
</div>
</body>
</html>
Two things:
As of now the menu hides in the top with a top-margin:-100px;and should display below the banner once clicked but it wont know what I seem to try. The menu is in the code/css but can not be displayed, and I am no sure why. I am trying to hide it in the top-margin and have it only display when the user requests it. I hope this helps.
Multi color type in my css logo? There has got to be a cleaner way of pulling off that visual. Seems wonky to me.
Why wont my menu toggle work? The numbers seem fine? I have been through this code all day, I have no idea and my eyes hurt.
Trying to pull this header off, if I had it my way the nav would simply be in the header, and would display the mobile-icon only for mobile or when the browser window gets collapsed from the side.
I know my code is not very pretty, I am learning and appreciate any help that can be provided.
Thank you, - Phil
http://jsfiddle.net/t6oe93fu/1/
/------------------CSS Start--------------------/
#charset "UTF-8";
/* CSS Document */
/*--------PPGD CSS----------*/
<style type="text/css">
body{
background: #fff;
margin: 140px 0px 0px 0px;
font-family: 'Open Sans', sans-serif;
}
/*--------HEADER Start----------*/
div#topdiv {
position:fixed;
top:0px;
left:0px;
width:100%;
color:#0F0;
background:#FFF;
opacity:0.9;
padding:0px 0px 0px 0px;
z-index:99;
height:58px;
webkit-box-shadow: 0px 0px 5px 0px rgba(138,136,138,1);
moz-box-shadow: 0px 0px 5px 0px rgba(138,136,138,1);
box-shadow: 0px 0px 5px 0px rgba(138,136,138,1);
z-index:99;
}
div#menucontainer {
height:58px;
float:right;
margin-right: 10px;
padding: 0px;
display:block;
}
div#container {
max-width: 942px;
min-width:320px;
align:center;
margin: 0 auto;
padding: 0px;
position: relative;
height:0px;
display:block;
margin-left: auto;
margin-right: auto;
}
/*--------LOGO Start----------*/
div#brand {
float:left;
display:block;
margin-top:0px;
margin-left:10px;
font-size: 22px;
font-family: 'Open Sans', sans-serif;
font-weight:800;
line-height: 90%;
color:#F60;
z-index:99;
}
div#brand1 {
float:left;
display:block;
margin-left:10px;
font-size: 22px;
font-family: 'Open Sans', sans-serif;
font-weight:800;
line-height: 90%;
color:#F60;
}
div#brand2 {
float:left;
display:block;
margin-top:10px;
font-size: 22px;
font-family: 'Open Sans', sans-serif;
font-weight:800;
color:#666;
line-height: 90%;
}
div#brand3 {
float:left;
display:block;
margin-top:7px;
margin-left:-161px;
font-size: 22px;
font-family: 'Open Sans', sans-serif;
font-weight:800;
color:#666;
line-height: 90%;
}
/*--------LOGO End----------*/
/*--------MENU Start----------*/
* {padding: 0; margin: 0; }
body { font-family: Open Sans; }
a { text-decoration: none; color:#666; }
li { list-style-type: none; }
nav {
text-align: center;
float:right;
padding: 15px;
display:block;
border-bottom: 1px;
height:19px;
margin-top:20px;
margin-right:10px;
font-size: 13px;
font-family: 'Open Sans', sans-serif;
font-weight:400;
letter-spacing: 0.125em;
color:#666;
line-height: 100%;
}
nav:hover {
float:right;
display:block;
height:19px;
margin-top:20px;
margin-right:10px;
font-size: 13px;
font-family: 'Open Sans', sans-serif;
font-weight:400;
letter-spacing: 0.125em;
color:#f60;
cursor:pointer;
line-height: 100%;
border-bottom-style: solid;
border-bottom-color: #f60;
}
nope {
position:absolute;
width: 260px;
height: 100%;
background: none;
}
div#SAVE{
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 5px #F60;
-webkit-transition: background-color 500ms ease-out 1s;
-moz-transition: background-color 500ms ease-out 1s;
-o-transition: background-color 500ms ease-out 1s;
transition: background-color 500ms ease-out 1s;
}
}
/*--------MENU End----------*/
/*--------HEADER End----------*/
/*--------FOOTER Start----------*/
div#footer {
height: 30px;
bottom:0px;
width: 100%;
background: #666;
font-size: 12px;
font-family: 'Open Sans', sans-serif;
font-weight:300;
webkit-box-shadow: 0px -1px 5px 0px rgba(138,136,138,1);
moz-box-shadow: 0px -1px 5px 0px rgba(138,136,138,1);
box-shadow: 0px -1px 5px 0px rgba(138,136,138,1);
color: #FFF;
}
/*--------FOOTER End----------*/
* { padding: 0; margin: 0; }
body { font-family: 'Open Sans' sans-serif; }
a { text-decoration: none; color: #666; font-size: 14px; }
li { list-style-type: none; }
header {
width: 100%;
height: 50px;
margin: auto;
border-bottom: 1px solid #EEE;
background: #FFF;
z-index: 99;
}
.container {
max-width: 942px;
min-width:320px;
align:center;
margin: 0 auto;
padding: 0px;
position: relative;
height:0px;
display:block;
margin-left: auto;
margin-right: auto;
}
#brnad {
float: left;
line-height: 50px;
font-size: 30px;
font-family: 'Open Sans', sans-serif;
font-weight: 800;
color: #F60;
}
nav { width: 100%; text-align: center; }
nav ul { line-height: 50px; }
nav li { display: inline-block; }
nav a { padding: 10px; color: #FFF; }
nav a:hover { background: #F60; color: #FCFCFC; border-radius: 5px; }
/*--------------------------------------------------*/
.menu {
width: 100%;
height: 35px;
background: #666;
position: absolute;
top: -100px;
z-index: -1;
transition: all .3s ease-in-out;
-webkit-transition: all .3s ease-in-out;
-moz-transition: all .3s ease-in-out;
-ms-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
}
.menu-icon {
float: right;
padding: 12px 15px;
color: #666;
background: #FFF;
border-radius: 5px;
margin: 5px 5px 0 0;
cursor: pointer;
z-index: 99;
}
.menu-icon:hover { color: #F60; }
#menuToggle { display: none; }
#menuToggle:checked ~ .menu { position: absolute; top: 100px; }
.content {
width: 100%;
margin: auto;
position: absolute;
top: 60px;
transition: all .3s ease-in-out;
-webkit-transition: all .3s ease-in-out;
-moz-transition: all .3s ease-in-out;
-ms-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
}
/*--------------------------------------------------*/
#media screen and (max-width: 480px){
nav li { display: block; }
nav a { display: block; border-bottom: 1px solid #666; padding: 0; }
nav a:hover { border-radius: 0; }
.menu { height: auto; top: -350px; }
#menuToggle:checked ~ .content { position: absolute; top: 370px; }
}
</style>
/------------------CSS End--------------------/
/------------------HTML Start--------------------/
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link href="css/PPGD_styles" rel="stylesheet" type="text/css">
<link rel="stylesheet" type="text/css" href="css/PPGD_styles.css">
<title>Phil Padilla | Portfolio</title>
<link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon" />
<link rel="stylesheet" href="engine1/style.css">
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300' rel='stylesheet' type='text/css'><link href='http://fonts.googleapis.com/css?family=Open+Sans:800' rel='stylesheet' type='text/css'>
</head>
<body>
<td align="left" valign="top" bgcolor="#FF6600">
<div id="topdiv">
<div id="container">
<input type="checkbox" id="menuToggle">
<label for="menuToggle" class="menu-icon">☰</label>
<div id="brand2">GRAPHIC
<div id="brand">PHIL</div>
</div>
<p><br />
</p>
<div id="brand3">DESIGN
<div id="brand1">PADILLA</div>
</div>
<p> </p>
</div>
</div>
<nav class="menu">
<ul>
<li>PORTFOLIO</li>
<li>RESUME</li>
<li>CONTACT</li>
</ul>
</nav>
<p> </p>
<p> </p>
<table width="942%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td> </td>
</tr>
</table>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
</body>
</html>
/------------------HTML End--------------------/
Your new logo layout example. Just needs a few spans wrapped in a div:
.brand {
font-size: 22px;
font-family: 'Open Sans', sans-serif;
font-weight: 800;
color: #F60;
line-height: 0.8;
text-transform: uppercase;
}
.name {
display: block;
float: left;
}
.name span {
display: block;
margin-left: 10px;
}
.title {
margin-left: -54px;
color: #666;
}
.title span {
display: block;
margin-left: 118px;
}
<div class="brand">
<span class="name">Phil <span>Padilla</span></span>
<span class="title">Graphic <span>Design</span></span>
</div>
It is now capitalized in the CSS, not the HTML. This way when indexed by search engines, it wont look like SHOUTING :)
There are many things that could be improved, but the problem in your question is caused by the nav being outside the div the checkbox is in, as it is selected with the sibling selector (~).
Unite the siblings, simply place the nav underneath the menu label:
<div id="container">
<input type="checkbox" id="menuToggle">
<label for="menuToggle" class="menu-icon">☰</label>
<nav class="menu"> </nav>
Working Example
The top positioning needs to be changed. I have incorporated the new logo into this example.
body {
background: #fff;
margin: 140px 0px 0px 0px;
font-family: 'Open Sans', sans-serif;
}
/*--------HEADER Start----------*/
div#topdiv {
position: fixed;
top: 0px;
left: 0px;
width: 100%;
color: #0F0;
background: #FFF;
opacity: 0.9;
padding: 0px 0px 0px 0px;
z-index: 99;
height: 58px;
box-shadow: 0px 0px 5px 0px rgba(138, 136, 138, 1);
z-index: 99;
}
div#menucontainer {
height: 58px;
float: right;
margin-right: 10px;
padding: 0px;
display: block;
}
div#container {
max-width: 942px;
min-width: 320px;
margin: 0 auto;
padding: 0px;
position: relative;
height: 0px;
display: block;
margin-left: auto;
margin-right: auto;
}
/*--------LOGO Start----------*/
.brand {
font-size: 22px;
font-family: 'Open Sans', sans-serif;
font-weight: 800;
color: #F60;
line-height: 0.8;
text-transform: uppercase;
margin: 10px;
float: left;
}
.name {
display: block;
float: left;
}
.name span {
display: block;
margin-left: 10px;
}
.title {
margin-left: -54px;
color: #666;
}
.title span {
display: block;
margin-left: 118px;
}
/*--------LOGO End----------*/
/*--------MENU Start----------*/
* {
padding: 0;
margin: 0;
}
body {
font-family: Open Sans;
}
a {
text-decoration: none;
color: #666;
}
li {
list-style-type: none;
}
nav {
text-align: center;
float: right;
padding: 15px;
display: block;
border-bottom: 1px;
height: 19px;
margin-top: 20px;
margin-right: 10px;
font-size: 13px;
font-family: 'Open Sans', sans-serif;
font-weight: 400;
letter-spacing: 0.125em;
color: #666;
line-height: 100%;
}
nav:hover {
float: right;
display: block;
height: 19px;
margin-top: 20px;
margin-right: 10px;
font-size: 13px;
font-family: 'Open Sans', sans-serif;
font-weight: 400;
letter-spacing: 0.125em;
color: #f60;
cursor: pointer;
line-height: 100%;
border-bottom-style: solid;
border-bottom-color: #f60;
}
nope {
position: absolute;
width: 260px;
height: 100%;
background: none;
}
div#SAVE {
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 5px #F60;
transition: background-color 500ms ease-out 1s;
}
}
/*--------MENU End----------*/
/*--------HEADER End----------*/
/*--------FOOTER Start----------*/
div#footer {
height: 30px;
bottom: 0px;
width: 100%;
background: #666;
font-size: 12px;
font-family: 'Open Sans', sans-serif;
font-weight: 300;
box-shadow: 0px -1px 5px 0px rgba(138, 136, 138, 1);
color: #FFF;
}
/*--------FOOTER End----------*/
* {
padding: 0;
margin: 0;
}
body {
font-family: 'Open Sans' sans-serif;
}
a {
text-decoration: none;
color: #666;
font-size: 14px;
}
li {
list-style-type: none;
}
header {
width: 100%;
height: 50px;
margin: auto;
border-bottom: 1px solid #EEE;
background: #FFF;
z-index: 99;
}
.container {
max-width: 942px;
min-width: 320px;
margin: 0 auto;
padding: 0px;
position: relative;
height: 0px;
display: block;
margin-left: auto;
margin-right: auto;
}
nav {
width: 100%;
text-align: center;
}
nav ul {
line-height: 50px;
}
nav li {
display: inline-block;
}
nav a {
padding: 10px;
color: #FFF;
}
nav a:hover {
background: #F60;
color: #FCFCFC;
border-radius: 5px;
}
/*--------------------------------------------------*/
.menu {
width: 100%;
height: 35px;
background: #666;
position: absolute;
top: -100px;
z-index: -1;
transition: all .3s ease-in-out;
-webkit-transition: all .3s ease-in-out;
-moz-transition: all .3s ease-in-out;
-ms-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
}
.menu-icon {
float: right;
padding: 12px 15px;
color: #666;
background: #FFF;
border-radius: 5px;
margin: 5px 5px 0 0;
cursor: pointer;
z-index: 99;
}
.menu-icon:hover {
color: #F60;
}
#menuToggle {
display: none;
}
#menuToggle:checked ~ .menu {
position: absolute;
top: 100px;
}
.content {
width: 100%;
margin: auto;
position: absolute;
top: 60px;
transition: all .3s ease-in-out;
-webkit-transition: all .3s ease-in-out;
-moz-transition: all .3s ease-in-out;
-ms-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
}
/*--------------------------------------------------*/
#media screen and (max-width: 480px) {
nav li {
display: block;
}
nav a {
display: block;
border-bottom: 1px solid #666;
padding: 0;
}
nav a:hover {
border-radius: 0;
}
.menu {
height: auto;
top: -350px;
}
#menuToggle:checked ~ .content {
position: absolute;
top: 0;
}
}
<div id="topdiv">
<div id="container">
<input type="checkbox" id="menuToggle">
<label for="menuToggle" class="menu-icon">☰</label>
<nav class="menu">
<ul>
<li>PORTFOLIO
</li>
<li>RESUME
</li>
<li>CONTACT
</li>
</ul>
</nav>
<div class="brand">
<span class="name">Phil <span>Padilla</span></span>
<span class="title">Graphic <span>Design</span></span>
</div>
</div>
</div>