I am trying to figure out how to center the logo image on my footer. I want it to be able to scale as the browser changes but stay inside the center. If anyone knows how I can fix this that would really help! Thank you! I really appreciate all of the help with this. I have figured it out now and I am good to go.
.msum {
position: absolute;
bottom: 5%;
width: 100%;
display: block;
width: 200px;
height: 50px;
}
/*Rest of Code*/
figure.stayssame {
width: 100%;
}
figure video {
width: 100%;
height: 80%;
}
p {
padding: 2%;
}
.video-txt {
position: absolute;
top: 30%;
z-index: 9;
color: #FFF;
width: 100%;
text-align: center;
font-size: 40px;
}
object {
position: absolute;
left: 0%;
top: -5%;
z-index: 10;
width: 15%;
}
/*ALL CODE FROM DESKTOP*/
figure.adjustable {
width: 29%;
}
html {
position: relative;
min-height: 100%;
}
body {
margin: 0 0 100px;
/* bottom = footer height */
font-family: 'Inconsolata', monospace;
/*font-family: 'Courier New', sans-serif;*/
font-weight: 300;
font-size: 20px;
line-height: 1.4em;
}
.squish {
margin-right: 125px;
}
.text {
padding: 5px;
}
.button {
margin-bottom: 50px;
margin-left: 20%
}
header {
position: fixed;
z-index: 1000;
width: 100%;
top: 0px;
background-color: #670809;
height: 70px;
letter-spacing: 1px;
line-height: 55px;
padding: 9px;
word-spacing: 5px;
}
header,
h1,
h2 {
font-family: 'Orbitron', sans-serif;
}
.space {
padding: 5px;
color: white;
}
nav {
float: left;
width: 100%;
}
nav ul li.active a {
background-color: none;
color: white;
text-decoration: none;
}
nav ul li a:hover {
color: #00E3FF;
}
nav ul li a:visited {
text-decoration: none;
}
/*nav ul li a {
display:inline-block;
padding: 1 px;
color: #fff;
letter-spacing: 1 px;
text-decoration:none;
text-transform: uppercase;
margin: .55em;
font-size: 5 px;
float: right;
}
nav ul li.active a {
/*background-color: none;
color: white;
text-decoration:none;
}
a:hover {
/*background-color:none;
color:black;
background-color:#00E3FF;
}
nav ul li a:visited {
color:black;
text-decoration:none;
}
*/
form {
padding-left: 20%;
}
/* header tags */
h1 {
text-align: center;
color: #013397;
font-size: 40px;
padding-top: 50px;
}
h2 {
text-align: center;
color: #00E3FF;
font-size: 30px;
margin: 5px;
padding: 20px;
}
p {
text-align: left;
}
.clearfix:after {
content: " ";
display: block;
clear: both;
}
#box {
background-color: #94DBEC;
}
hr.style2 {
border-top: 3px double #00E3FF;
width: 300px
}
section {
width: 85%;
margin-left: auto;
margin-right: auto;
margin-top: 35px;
}
img.adjustable {
width: 100%;
max-width: 100%;
height: auto;
/* max-width: 400px;
max-height: 400px;*/
margin: 1em;
/*width: 90%;
margin:5%;*/
}
#inner {
height: 100px;
padding: 15px 0;
}
#container {
height: 100%;
}
.imgbox5 {
padding-right: 30px;
padding-left: 0px;
}
.imgbox4 {
padding-right: 30px;
padding-left: 0px;
}
.imgbox3 {
padding-right: 30px;
padding-left: 0px;
}
.imgbox2 {
padding-right: 30px;
}
.imgbox {
padding-right: 30px;
padding-left: 0px;
}
#firstpara {
background-color: #5E5757;
color: white;
}
#secpara {
background-color: #5E5757;
color: white;
}
#thirdpara {
background-color: #5E5757;
color: white;
}
#fourthpara {
background-color: #5E5757;
color: white;
}
#primary {
background-color: #5E5757;
color: white;
}
#enroll {
margin: 0;
padding: 0;
}
/*section{
text-align: center;
width: 100%;
}*/
footer {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 100px;
padding-bottom: 2%;
background-color: #670809;
font-family: 'Inconsolata', monospace;
/* text */
padding-left: 10px;
padding-top: 15px;
color: #ffffff;
font-size: 15px;
text-align: center;
}
a {
color: white;
}
a,
a:active {
color: white;
text-decoration: none;
}
.side {
left-margin: 10px;
right-margin: 10px;
}
object {
position: absolute;
top: 350px;
left: 100px;
height: 100px;
width: 200px;
z-index: 2000;
}
#headline {
text-align: center;
position: absolute;
top: 10%;
left: 35%;
color: #00E3FF;
line-height: 20px;
font-family: 'Orbitron', sans-serif;
word-spacing: 1px;
font-size: 12px;
}
#value {
background-color: #5E5757;
color: white;
width: 90%;
margin-left: auto;
margin-right: auto;
margin-top: 2%;
}
#title {
color: white;
text-align: center;
padding-top: 10px;
}
img {
width: 100%;
display: block;
}
/*.img{
border-width:thick;
border-style:solid;
border-color:white;
}
.column-right{
float: right;
width: 30%;
padding: 1%;
}
.column-center{
display: inline-block;
width: 30%;
padding: 1%;
bottom: 18px;
}
.column-left{
float: left;file:///Volumes/MMG/webfix/video/techpic1.jpg
width: 30%;
padding: 1%;
}
#left-box{
background-color:#5E5757;
color: white;
padding: 15px;
border-radius:10px;
}
#middle-box{
background-color:#5E5757;
color: white;
padding: 15px;
border-radius:10px;
}
#right-box{
background-color:#5E5757;
color: white;
padding: 15px;
border-radius:10px;
padding-bottom:135px;
}
.more {
position: relative;
display:inline-block;
color:black;
font-weight: bold;
top: 20px;
right: 31px;
background-color:white;
border-bottom-left-radius: 10px;
padding: 6px;
margin: 9px;
width: 30%;
}
#button3, #button2{
color: black;
position:relative;
top: 36px;
right:36px;
}
#button1{
color:black;
position:relative;
top: 155px;
right:36px;
}
*/
/*NAV BAR*/
#import url("http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css");
#import url("http://fonts.googleapis.com/css?family=Open+Sans:400,300");
html {
font-size: 62.5%;
font-family: 'Open Sans', sans-serif;
}
body {
font-size: 1.6rem;
min-height: 100vh;
}
h1 {
font-size: 3rem;
margin-bottom: 1rem;
}
h2 {
font-size: 1.6rem;
}
header {
position: relative;
}
main {
padding: 2rem;
}
/***************** NAVIGATION ********************/
nav ul {
display: flex;
flex-wrap: wrap;
margin: 0 auto;
background: #670809;
}
nav ul,
nav li {
flex: 1;
}
nav li:last-child {
border-bottom: none;
}
nav a {
text-decoration: none;
color: inherit;
display: block;
font-size: 1.8rem;
}
nav a:hover {
background:
/*#adacac*/
#555;
color: #fff;
}
nav li {
position: relative;
line-height: 50px;
color: #fff;
text-align: center;
}
nav input,
nav label {
display: none;
width: 36px;
height: 36px;
background: #555;
color: #fff;
text-align: center;
line-height: 36px;
font-size: 1.6rem;
border-radius: 4px;
}
nav label {
position: absolute;
top: 8px;
right: 8px;
transition: .4s;
}
nav label:hover {
cursor: pointer;
}
nav label:before {
font-family: FontAwesome;
font-size: 24px;
content: "\f0c9";
text-align: center;
}
/*************** MEDIA QUERIES *******************/
nav ul {
transform: translateY(0);
box-shadow: 0 0 5px rgba(0, 0, 0, .7);
transition: all .5s;
}
nav li {
flex: none;
width: 100%;
border-bottom: solid 1px #777;
}
nav input[type="checkbox"]:checked + ul {
transform: translateY(-100%);
width: 100%;
background: #999;
transition: all .5s;
}
nav label {
display: block;
}
nav input[type="checkbox"]:checked + ul li:nth-child(1) {
background: #777;
color: #fff;
}
#css-toggle-menu {
float: right;
margin: 10px;
}
<footer>
<a id="enroll" href="https://www.mnstate.edu/eservices/"> Enroll Now</a>
<div class="text">
© 2016</div>
<br>
<img class="msum" src="https://www.mnstate.edu/uploadedImages/Content/Marketing/logos/MSUM_Signature_Horiz_Color.jpg?n=808" alt="msum logo" />
</footer>
.msum {
position: absolute;
bottom: 5%;
width: 100%;
display: block;
width: 200px;
height: 50px;
//add this
left: 0;
right: 0;
margin: 0 auto;
}
There's no need for position: absolute here. Do these to the img.msum:
Remove position: absolute;
Add margin: auto;
Snippet
.msum {
display: block;
width: 200px;
height: 50px;
margin: auto;
}
/*Rest of Code*/
figure.stayssame {
width: 100%;
}
figure video {
width: 100%;
height: 80%;
}
p {
padding: 2%;
}
.video-txt {
position: absolute;
top: 30%;
z-index: 9;
color: #FFF;
width: 100%;
text-align: center;
font-size: 40px;
}
object {
position: absolute;
left: 0%;
top: -5%;
z-index: 10;
width: 15%;
}
/*ALL CODE FROM DESKTOP*/
figure.adjustable {
width: 29%;
}
html {
position: relative;
min-height: 100%;
}
body {
margin: 0 0 100px;
/* bottom = footer height */
font-family: 'Inconsolata', monospace;
/*font-family: 'Courier New', sans-serif;*/
font-weight: 300;
font-size: 20px;
line-height: 1.4em;
}
.squish {
margin-right: 125px;
}
.text {
padding: 5px;
}
.button {
margin-bottom: 50px;
margin-left: 20%
}
header {
position: fixed;
z-index: 1000;
width: 100%;
top: 0px;
background-color: #670809;
height: 70px;
letter-spacing: 1px;
line-height: 55px;
padding: 9px;
word-spacing: 5px;
}
header,
h1,
h2 {
font-family: 'Orbitron', sans-serif;
}
.space {
padding: 5px;
color: white;
}
nav {
float: left;
width: 100%;
}
nav ul li.active a {
background-color: none;
color: white;
text-decoration: none;
}
nav ul li a:hover {
color: #00E3FF;
}
nav ul li a:visited {
text-decoration: none;
}
/*nav ul li a {
display:inline-block;
padding: 1 px;
color: #fff;
letter-spacing: 1 px;
text-decoration:none;
text-transform: uppercase;
margin: .55em;
font-size: 5 px;
float: right;
}
nav ul li.active a {
/*background-color: none;
color: white;
text-decoration:none;
}
a:hover {
/*background-color:none;
color:black;
background-color:#00E3FF;
}
nav ul li a:visited {
color:black;
text-decoration:none;
}
*/
form {
padding-left: 20%;
}
/* header tags */
h1 {
text-align: center;
color: #013397;
font-size: 40px;
padding-top: 50px;
}
h2 {
text-align: center;
color: #00E3FF;
font-size: 30px;
margin: 5px;
padding: 20px;
}
p {
text-align: left;
}
.clearfix:after {
content: " ";
display: block;
clear: both;
}
#box {
background-color: #94DBEC;
}
hr.style2 {
border-top: 3px double #00E3FF;
width: 300px
}
section {
width: 85%;
margin-left: auto;
margin-right: auto;
margin-top: 35px;
}
img.adjustable {
width: 100%;
max-width: 100%;
height: auto;
/* max-width: 400px;
max-height: 400px;*/
margin: 1em;
/*width: 90%;
margin:5%;*/
}
#inner {
height: 100px;
padding: 15px 0;
}
#container {
height: 100%;
}
.imgbox5 {
padding-right: 30px;
padding-left: 0px;
}
.imgbox4 {
padding-right: 30px;
padding-left: 0px;
}
.imgbox3 {
padding-right: 30px;
padding-left: 0px;
}
.imgbox2 {
padding-right: 30px;
}
.imgbox {
padding-right: 30px;
padding-left: 0px;
}
#firstpara {
background-color: #5E5757;
color: white;
}
#secpara {
background-color: #5E5757;
color: white;
}
#thirdpara {
background-color: #5E5757;
color: white;
}
#fourthpara {
background-color: #5E5757;
color: white;
}
#primary {
background-color: #5E5757;
color: white;
}
#enroll {
margin: 0;
padding: 0;
}
/*section{
text-align: center;
width: 100%;
}*/
footer {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 100px;
padding-bottom: 2%;
background-color: #670809;
font-family: 'Inconsolata', monospace;
/* text */
padding-left: 10px;
padding-top: 15px;
color: #ffffff;
font-size: 15px;
text-align: center;
}
a {
color: white;
}
a,
a:active {
color: white;
text-decoration: none;
}
.side {
left-margin: 10px;
right-margin: 10px;
}
object {
position: absolute;
top: 350px;
left: 100px;
height: 100px;
width: 200px;
z-index: 2000;
}
#headline {
text-align: center;
position: absolute;
top: 10%;
left: 35%;
color: #00E3FF;
line-height: 20px;
font-family: 'Orbitron', sans-serif;
word-spacing: 1px;
font-size: 12px;
}
#value {
background-color: #5E5757;
color: white;
width: 90%;
margin-left: auto;
margin-right: auto;
margin-top: 2%;
}
#title {
color: white;
text-align: center;
padding-top: 10px;
}
img {
width: 100%;
display: block;
}
/*.img{
border-width:thick;
border-style:solid;
border-color:white;
}
.column-right{
float: right;
width: 30%;
padding: 1%;
}
.column-center{
display: inline-block;
width: 30%;
padding: 1%;
bottom: 18px;
}
.column-left{
float: left;file:///Volumes/MMG/webfix/video/techpic1.jpg
width: 30%;
padding: 1%;
}
#left-box{
background-color:#5E5757;
color: white;
padding: 15px;
border-radius:10px;
}
#middle-box{
background-color:#5E5757;
color: white;
padding: 15px;
border-radius:10px;
}
#right-box{
background-color:#5E5757;
color: white;
padding: 15px;
border-radius:10px;
padding-bottom:135px;
}
.more {
position: relative;
display:inline-block;
color:black;
font-weight: bold;
top: 20px;
right: 31px;
background-color:white;
border-bottom-left-radius: 10px;
padding: 6px;
margin: 9px;
width: 30%;
}
#button3, #button2{
color: black;
position:relative;
top: 36px;
right:36px;
}
#button1{
color:black;
position:relative;
top: 155px;
right:36px;
}
*/
/*NAV BAR*/
#import url("http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css");
#import url("http://fonts.googleapis.com/css?family=Open+Sans:400,300");
html {
font-size: 62.5%;
font-family: 'Open Sans', sans-serif;
}
body {
font-size: 1.6rem;
min-height: 100vh;
}
h1 {
font-size: 3rem;
margin-bottom: 1rem;
}
h2 {
font-size: 1.6rem;
}
header {
position: relative;
}
main {
padding: 2rem;
}
/***************** NAVIGATION ********************/
nav ul {
display: flex;
flex-wrap: wrap;
margin: 0 auto;
background: #670809;
}
nav ul,
nav li {
flex: 1;
}
nav li:last-child {
border-bottom: none;
}
nav a {
text-decoration: none;
color: inherit;
display: block;
font-size: 1.8rem;
}
nav a:hover {
background:
/*#adacac*/
#555;
color: #fff;
}
nav li {
position: relative;
line-height: 50px;
color: #fff;
text-align: center;
}
nav input,
nav label {
display: none;
width: 36px;
height: 36px;
background: #555;
color: #fff;
text-align: center;
line-height: 36px;
font-size: 1.6rem;
border-radius: 4px;
}
nav label {
position: absolute;
top: 8px;
right: 8px;
transition: .4s;
}
nav label:hover {
cursor: pointer;
}
nav label:before {
font-family: FontAwesome;
font-size: 24px;
content: "\f0c9";
text-align: center;
}
/*************** MEDIA QUERIES *******************/
nav ul {
transform: translateY(0);
box-shadow: 0 0 5px rgba(0, 0, 0, .7);
transition: all .5s;
}
nav li {
flex: none;
width: 100%;
border-bottom: solid 1px #777;
}
nav input[type="checkbox"]:checked + ul {
transform: translateY(-100%);
width: 100%;
background: #999;
transition: all .5s;
}
nav label {
display: block;
}
nav input[type="checkbox"]:checked + ul li:nth-child(1) {
background: #777;
color: #fff;
}
#css-toggle-menu {
float: right;
margin: 10px;
}
<footer>
<a id="enroll" href="https://www.mnstate.edu/eservices/"> Enroll Now</a>
<div class="text">
MaKayla McLain-Graning © 2016</div>
<br>
<img class="msum" src="https://www.mnstate.edu/uploadedImages/Content/Marketing/logos/MSUM_Signature_Horiz_Color.jpg?n=808" alt="msum logo" />
</footer>
Preview
Check out the snippet below. The big thing you were missing is using the CSS left and transform properties. (You'll notice I also included the vendor-prefixed variants of the transform property to ensure it works on all major browsers). Additionally, you'll notice I replaced the absolute positioning that you had set for the .msum CSS selector with relative positioning. This is more optimal in this case and will ensure your image does not overlap with the text also present in the footer.
.msum {
position: relative;
bottom: 5%;
width: 100%;
left: 50%; /* Distribute from left-edge */
display: block;
width: 200px;
height: 50px;
/* Center horizontally */
-webkit-transform: translateX(-50%);
-moz-transform: translateX(-50%);
-ms-transform: translateX(-50%);
-o-transform: translateX(-50%);
transform: translateX(-50%);
}
/*Rest of Code*/
figure.stayssame {
width: 100%;
}
figure video {
width: 100%;
height: 80%;
}
p {
padding: 2%;
}
.video-txt {
position: absolute;
top: 30%;
z-index: 9;
color: #FFF;
width: 100%;
text-align: center;
font-size: 40px;
}
object {
position: absolute;
left: 0%;
top: -5%;
z-index: 10;
width: 15%;
}
/*ALL CODE FROM DESKTOP*/
figure.adjustable {
width: 29%;
}
html {
position: relative;
min-height: 100%;
}
body {
margin: 0 0 100px;
/* bottom = footer height */
font-family: 'Inconsolata', monospace;
/*font-family: 'Courier New', sans-serif;*/
font-weight: 300;
font-size: 20px;
line-height: 1.4em;
}
.squish {
margin-right: 125px;
}
.text {
padding: 5px;
}
.button {
margin-bottom: 50px;
margin-left: 20%
}
header {
position: fixed;
z-index: 1000;
width: 100%;
top: 0px;
background-color: #670809;
height: 70px;
letter-spacing: 1px;
line-height: 55px;
padding: 9px;
word-spacing: 5px;
}
header,
h1,
h2 {
font-family: 'Orbitron', sans-serif;
}
.space {
padding: 5px;
color: white;
}
nav {
float: left;
width: 100%;
}
nav ul li.active a {
background-color: none;
color: white;
text-decoration: none;
}
nav ul li a:hover {
color: #00E3FF;
}
nav ul li a:visited {
text-decoration: none;
}
/*nav ul li a {
display:inline-block;
padding: 1 px;
color: #fff;
letter-spacing: 1 px;
text-decoration:none;
text-transform: uppercase;
margin: .55em;
font-size: 5 px;
float: right;
}
nav ul li.active a {
/*background-color: none;
color: white;
text-decoration:none;
}
a:hover {
/*background-color:none;
color:black;
background-color:#00E3FF;
}
nav ul li a:visited {
color:black;
text-decoration:none;
}
*/
form {
padding-left: 20%;
}
/* header tags */
h1 {
text-align: center;
color: #013397;
font-size: 40px;
padding-top: 50px;
}
h2 {
text-align: center;
color: #00E3FF;
font-size: 30px;
margin: 5px;
padding: 20px;
}
p {
text-align: left;
}
.clearfix:after {
content: " ";
display: block;
clear: both;
}
#box {
background-color: #94DBEC;
}
hr.style2 {
border-top: 3px double #00E3FF;
width: 300px
}
section {
width: 85%;
margin-left: auto;
margin-right: auto;
margin-top: 35px;
}
img.adjustable {
width: 100%;
max-width: 100%;
height: auto;
/* max-width: 400px;
max-height: 400px;*/
margin: 1em;
/*width: 90%;
margin:5%;*/
}
#inner {
height: 100px;
padding: 15px 0;
}
#container {
height: 100%;
}
.imgbox5 {
padding-right: 30px;
padding-left: 0px;
}
.imgbox4 {
padding-right: 30px;
padding-left: 0px;
}
.imgbox3 {
padding-right: 30px;
padding-left: 0px;
}
.imgbox2 {
padding-right: 30px;
}
.imgbox {
padding-right: 30px;
padding-left: 0px;
}
#firstpara {
background-color: #5E5757;
color: white;
}
#secpara {
background-color: #5E5757;
color: white;
}
#thirdpara {
background-color: #5E5757;
color: white;
}
#fourthpara {
background-color: #5E5757;
color: white;
}
#primary {
background-color: #5E5757;
color: white;
}
#enroll {
margin: 0;
padding: 0;
}
/*section{
text-align: center;
width: 100%;
}*/
footer {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 100px;
padding-bottom: 2%;
background-color: #670809;
font-family: 'Inconsolata', monospace;
/* text */
padding-left: 10px;
padding-top: 15px;
color: #ffffff;
font-size: 15px;
text-align: center;
}
a {
color: white;
}
a,
a:active {
color: white;
text-decoration: none;
}
.side {
left-margin: 10px;
right-margin: 10px;
}
object {
position: absolute;
top: 350px;
left: 100px;
height: 100px;
width: 200px;
z-index: 2000;
}
#headline {
text-align: center;
position: absolute;
top: 10%;
left: 35%;
color: #00E3FF;
line-height: 20px;
font-family: 'Orbitron', sans-serif;
word-spacing: 1px;
font-size: 12px;
}
#value {
background-color: #5E5757;
color: white;
width: 90%;
margin-left: auto;
margin-right: auto;
margin-top: 2%;
}
#title {
color: white;
text-align: center;
padding-top: 10px;
}
img {
width: 100%;
display: block;
}
/*.img{
border-width:thick;
border-style:solid;
border-color:white;
}
.column-right{
float: right;
width: 30%;
padding: 1%;
}
.column-center{
display: inline-block;
width: 30%;
padding: 1%;
bottom: 18px;
}
.column-left{
float: left;file:///Volumes/MMG/webfix/video/techpic1.jpg
width: 30%;
padding: 1%;
}
#left-box{
background-color:#5E5757;
color: white;
padding: 15px;
border-radius:10px;
}
#middle-box{
background-color:#5E5757;
color: white;
padding: 15px;
border-radius:10px;
}
#right-box{
background-color:#5E5757;
color: white;
padding: 15px;
border-radius:10px;
padding-bottom:135px;
}
.more {
position: relative;
display:inline-block;
color:black;
font-weight: bold;
top: 20px;
right: 31px;
background-color:white;
border-bottom-left-radius: 10px;
padding: 6px;
margin: 9px;
width: 30%;
}
#button3, #button2{
color: black;
position:relative;
top: 36px;
right:36px;
}
#button1{
color:black;
position:relative;
top: 155px;
right:36px;
}
*/
/*NAV BAR*/
#import url("http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css");
#import url("http://fonts.googleapis.com/css?family=Open+Sans:400,300");
html {
font-size: 62.5%;
font-family: 'Open Sans', sans-serif;
}
body {
font-size: 1.6rem;
min-height: 100vh;
}
h1 {
font-size: 3rem;
margin-bottom: 1rem;
}
h2 {
font-size: 1.6rem;
}
header {
position: relative;
}
main {
padding: 2rem;
}
/***************** NAVIGATION ********************/
nav ul {
display: flex;
flex-wrap: wrap;
margin: 0 auto;
background: #670809;
}
nav ul,
nav li {
flex: 1;
}
nav li:last-child {
border-bottom: none;
}
nav a {
text-decoration: none;
color: inherit;
display: block;
font-size: 1.8rem;
}
nav a:hover {
background:
/*#adacac*/
#555;
color: #fff;
}
nav li {
position: relative;
line-height: 50px;
color: #fff;
text-align: center;
}
nav input,
nav label {
display: none;
width: 36px;
height: 36px;
background: #555;
color: #fff;
text-align: center;
line-height: 36px;
font-size: 1.6rem;
border-radius: 4px;
}
nav label {
position: absolute;
top: 8px;
right: 8px;
transition: .4s;
}
nav label:hover {
cursor: pointer;
}
nav label:before {
font-family: FontAwesome;
font-size: 24px;
content: "\f0c9";
text-align: center;
}
/*************** MEDIA QUERIES *******************/
nav ul {
transform: translateY(0);
box-shadow: 0 0 5px rgba(0, 0, 0, .7);
transition: all .5s;
}
nav li {
flex: none;
width: 100%;
border-bottom: solid 1px #777;
}
nav input[type="checkbox"]:checked + ul {
transform: translateY(-100%);
width: 100%;
background: #999;
transition: all .5s;
}
nav label {
display: block;
}
nav input[type="checkbox"]:checked + ul li:nth-child(1) {
background: #777;
color: #fff;
}
#css-toggle-menu {
float: right;
margin: 10px;
}
<footer>
<a id="enroll" href="https://www.mnstate.edu/eservices/"> Enroll Now</a>
<div class="text">
MaKayla McLain-Graning © 2016</div>
<br>
<img class="msum" src="https://www.mnstate.edu/uploadedImages/Content/Marketing/logos/MSUM_Signature_Horiz_Color.jpg?n=808" alt="msum logo" />
</footer>
.msum {
position: absolute;
bottom: 5%;
width: 100%;
display: block;
width: 200px;
height: 50px;
left:50%;
margin-left:-100px;
}
/*Rest of Code*/
figure.stayssame {
width: 100%;
}
figure video {
width: 100%;
height: 80%;
}
p {
padding: 2%;
}
.video-txt {
position: absolute;
top: 30%;
z-index: 9;
color: #FFF;
width: 100%;
text-align: center;
font-size: 40px;
}
object {
position: absolute;
left: 0%;
top: -5%;
z-index: 10;
width: 15%;
}
/*ALL CODE FROM DESKTOP*/
figure.adjustable {
width: 29%;
}
html {
position: relative;
min-height: 100%;
}
body {
margin: 0 0 100px;
/* bottom = footer height */
font-family: 'Inconsolata', monospace;
/*font-family: 'Courier New', sans-serif;*/
font-weight: 300;
font-size: 20px;
line-height: 1.4em;
}
.squish {
margin-right: 125px;
}
.text {
padding: 5px;
}
.button {
margin-bottom: 50px;
margin-left: 20%
}
header {
position: fixed;
z-index: 1000;
width: 100%;
top: 0px;
background-color: #670809;
height: 70px;
letter-spacing: 1px;
line-height: 55px;
padding: 9px;
word-spacing: 5px;
}
header,
h1,
h2 {
font-family: 'Orbitron', sans-serif;
}
.space {
padding: 5px;
color: white;
}
nav {
float: left;
width: 100%;
}
nav ul li.active a {
background-color: none;
color: white;
text-decoration: none;
}
nav ul li a:hover {
color: #00E3FF;
}
nav ul li a:visited {
text-decoration: none;
}
/*nav ul li a {
display:inline-block;
padding: 1 px;
color: #fff;
letter-spacing: 1 px;
text-decoration:none;
text-transform: uppercase;
margin: .55em;
font-size: 5 px;
float: right;
}
nav ul li.active a {
/*background-color: none;
color: white;
text-decoration:none;
}
a:hover {
/*background-color:none;
color:black;
background-color:#00E3FF;
}
nav ul li a:visited {
color:black;
text-decoration:none;
}
*/
form {
padding-left: 20%;
}
/* header tags */
h1 {
text-align: center;
color: #013397;
font-size: 40px;
padding-top: 50px;
}
h2 {
text-align: center;
color: #00E3FF;
font-size: 30px;
margin: 5px;
padding: 20px;
}
p {
text-align: left;
}
.clearfix:after {
content: " ";
display: block;
clear: both;
}
#box {
background-color: #94DBEC;
}
hr.style2 {
border-top: 3px double #00E3FF;
width: 300px
}
section {
width: 85%;
margin-left: auto;
margin-right: auto;
margin-top: 35px;
}
img.adjustable {
width: 100%;
max-width: 100%;
height: auto;
/* max-width: 400px;
max-height: 400px;*/
margin: 1em;
/*width: 90%;
margin:5%;*/
}
#inner {
height: 100px;
padding: 15px 0;
}
#container {
height: 100%;
}
.imgbox5 {
padding-right: 30px;
padding-left: 0px;
}
.imgbox4 {
padding-right: 30px;
padding-left: 0px;
}
.imgbox3 {
padding-right: 30px;
padding-left: 0px;
}
.imgbox2 {
padding-right: 30px;
}
.imgbox {
padding-right: 30px;
padding-left: 0px;
}
#firstpara {
background-color: #5E5757;
color: white;
}
#secpara {
background-color: #5E5757;
color: white;
}
#thirdpara {
background-color: #5E5757;
color: white;
}
#fourthpara {
background-color: #5E5757;
color: white;
}
#primary {
background-color: #5E5757;
color: white;
}
#enroll {
margin: 0;
padding: 0;
}
/*section{
text-align: center;
width: 100%;
}*/
footer {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 100px;
padding-bottom: 2%;
background-color: #670809;
font-family: 'Inconsolata', monospace;
/* text */
padding-left: 10px;
padding-top: 15px;
color: #ffffff;
font-size: 15px;
text-align: center;
}
a {
color: white;
}
a,
a:active {
color: white;
text-decoration: none;
}
.side {
left-margin: 10px;
right-margin: 10px;
}
object {
position: absolute;
top: 350px;
left: 100px;
height: 100px;
width: 200px;
z-index: 2000;
}
#headline {
text-align: center;
position: absolute;
top: 10%;
left: 35%;
color: #00E3FF;
line-height: 20px;
font-family: 'Orbitron', sans-serif;
word-spacing: 1px;
font-size: 12px;
}
#value {
background-color: #5E5757;
color: white;
width: 90%;
margin-left: auto;
margin-right: auto;
margin-top: 2%;
}
#title {
color: white;
text-align: center;
padding-top: 10px;
}
img {
width: 100%;
display: block;
}
/*.img{
border-width:thick;
border-style:solid;
border-color:white;
}
.column-right{
float: right;
width: 30%;
padding: 1%;
}
.column-center{
display: inline-block;
width: 30%;
padding: 1%;
bottom: 18px;
}
.column-left{
float: left;file:///Volumes/MMG/webfix/video/techpic1.jpg
width: 30%;
padding: 1%;
}
#left-box{
background-color:#5E5757;
color: white;
padding: 15px;
border-radius:10px;
}
#middle-box{
background-color:#5E5757;
color: white;
padding: 15px;
border-radius:10px;
}
#right-box{
background-color:#5E5757;
color: white;
padding: 15px;
border-radius:10px;
padding-bottom:135px;
}
.more {
position: relative;
display:inline-block;
color:black;
font-weight: bold;
top: 20px;
right: 31px;
background-color:white;
border-bottom-left-radius: 10px;
padding: 6px;
margin: 9px;
width: 30%;
}
#button3, #button2{
color: black;
position:relative;
top: 36px;
right:36px;
}
#button1{
color:black;
position:relative;
top: 155px;
right:36px;
}
*/
/*NAV BAR*/
#import url("http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css");
#import url("http://fonts.googleapis.com/css?family=Open+Sans:400,300");
html {
font-size: 62.5%;
font-family: 'Open Sans', sans-serif;
}
body {
font-size: 1.6rem;
min-height: 100vh;
}
h1 {
font-size: 3rem;
margin-bottom: 1rem;
}
h2 {
font-size: 1.6rem;
}
header {
position: relative;
}
main {
padding: 2rem;
}
/***************** NAVIGATION ********************/
nav ul {
display: flex;
flex-wrap: wrap;
margin: 0 auto;
background: #670809;
}
nav ul,
nav li {
flex: 1;
}
nav li:last-child {
border-bottom: none;
}
nav a {
text-decoration: none;
color: inherit;
display: block;
font-size: 1.8rem;
}
nav a:hover {
background:
/*#adacac*/
#555;
color: #fff;
}
nav li {
position: relative;
line-height: 50px;
color: #fff;
text-align: center;
}
nav input,
nav label {
display: none;
width: 36px;
height: 36px;
background: #555;
color: #fff;
text-align: center;
line-height: 36px;
font-size: 1.6rem;
border-radius: 4px;
}
nav label {
position: absolute;
top: 8px;
right: 8px;
transition: .4s;
}
nav label:hover {
cursor: pointer;
}
nav label:before {
font-family: FontAwesome;
font-size: 24px;
content: "\f0c9";
text-align: center;
}
/*************** MEDIA QUERIES *******************/
nav ul {
transform: translateY(0);
box-shadow: 0 0 5px rgba(0, 0, 0, .7);
transition: all .5s;
}
nav li {
flex: none;
width: 100%;
border-bottom: solid 1px #777;
}
nav input[type="checkbox"]:checked + ul {
transform: translateY(-100%);
width: 100%;
background: #999;
transition: all .5s;
}
nav label {
display: block;
}
nav input[type="checkbox"]:checked + ul li:nth-child(1) {
background: #777;
color: #fff;
}
#css-toggle-menu {
float: right;
margin: 10px;
}
<footer>
<a id="enroll" href="https://www.mnstate.edu/eservices/"> Enroll Now</a>
<div class="text">
MaKayla McLain-Graning © 2016</div>
<br>
<img class="msum" src="https://www.mnstate.edu/uploadedImages/Content/Marketing/logos/MSUM_Signature_Horiz_Color.jpg?n=808" alt="msum logo" />
</footer>
Related
Hey Friends I noticed that the background image doesn't stretch the whole width of the screen when I set the screen width to 2560px, which is a standard desktop screen size I assume. I'm not sure though this is the first time I've done media queries. I also don't know how to upload images on here or Imgur so you can see it in action. So here's a pic
https://jsfiddle.net/khcwnm90/
Also so the code posted on SO is just so I can post the fiddle link. I think its pretty stupid that I have to do this because the only reason I'm posting the fiddle link is because I have too much code to post here.
body, html {
margin: 0;
padding: 0;
}
/*---HEADER---*/
li a {
text-decoration-line: none;
color: rgba(102,102,102,0.75);
}
header {
background-image: url(../img/wall2.jpeg);
height: 100vh;
background-attachment: fixed;
background-repeat: no-repeat;
display: flex;
justify-content: center;
align-items: center;
}
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;
}
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;
}
.phrase {
text-align: center;
}
.phrase p {
color: white;
font-size: 3.5rem;
font-family: 'Arvo';
margin-bottom: 30px;
}
.phrase a {
background-color: red;
border-radius: 25px;
color: white;
font-family: 'Bitter';
font-size: 1.8rem;
padding-left: 15px;
padding-right: 15px;
padding-bottom: 10px;
padding-top: 10px;
transition: all 0.2s ease;
}
.phrase a:hover {
transition: all 0.5s ease;
background-color: #cc0000;
cursor: pointer;
}
.phrase .fas {
display: block;
color: white;
font-size: 3.5rem;
margin-top: 15px;
}
/*---PROMISE---*/
.stats {
width: 100%;
display: flex;
box-shadow: 0px 0px 150px grey;
position: relative;
z-index: 1;
background-color: white;
}
.stats div {
display: inline-block;
flex-basis: 35%;
text-align: center;
padding-bottom: 30px;
}
.stat-info {
font-size: 2rem;
color: rgba(102,102,102, 1);
font-family: 'Rajdhani';
margin-bottom: 0;
margin-top: 10px;
}
.stat-num {
color: red;
font-family: 'Rajdhani';
font-size: 3rem;
margin: 0;
font-weight: bolder;
}
.stats div:before {
display: inline-block;
content: '';
width: 2px;
height: 35px;
background-color: rgba(102,102,102, 0.60);
}
.promise {
width: 100%;
background-image: url('../img/concrete.jpg');
background-position: center;
background-attachment: fixed;
background-size: cover;
}
.promise .wrapper {
width: 100%;
background-color: rgba(0, 0, 0, 0.3);
}
.promise h1 {
position: relative;
top: 40px;
color: white;
font-family: 'Arvo';
font-size: 3.5rem;
text-align: center;
margin-top: 0;
word-spacing: 7px;
text-shadow: 0px 0px 100px grey;
}
.promise p {
color: white;
font-size: 1.8rem;
font-family: 'Rajdhani';
margin-bottom: 0;
padding-bottom: 60px;
text-align: center;
margin-top: 40px;
padding-left: 50px;
padding-right: 50px;
}
/*---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 (min-width: 1440px) {
/*---FOOTER---*/
.footer button {
margin-left: 16.5%;
}
}
/*---LAPTOP---*/
#media screen and (max-width: 1024px) {
/*---NAV---*/
.logo {
font-size: 3rem;
}
nav li {
font-size: 2rem;
}
/*---MAIN---*/
header {
height: 100vh;
}
.phrase p {
font-size: 3rem;
}
.phrase a {
font-size: 1.5rem;
}
.stats p {
font-size: 2rem;
}
/*---FOOTER---*/
.footer .inner {
margin-left: 30px;
}
.footer-textarea {
width: 88%;
}
.footer button {
margin-right: 10.25%;
}
.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;
}
}
#media screen and (max-width: 1024px) and (min-height: 1366px) {
/*---MAIN---*/
header {
height: 80vh;
}
}
#media screen and (max-width: 823px) {
/*---MAIN---*/
.phrase p {
font-size: 3rem;
}
}
/*------LANDSCAPE-MODE------*/
#media screen and (max-width: 812px) {
/*---NAV---*/
nav li {
font-size: 1.7rem;
}
.logo {
font-size: 2.7rem;
}
/*---MAIN---*/
header {
height: 100vh;
}
.stats p {
font-size: 2rem;
}
.promise p {
font-size: 1.3rem;
}
/*---FOOTER---*/
.footer button {
margin-left: 8.5%;
}
.contact .inner {
margin-right: 20px;
}
}
/*---TABLET---*/
#media screen and (max-width: 768px) {
/*---NAV---*/
nav li {
font-size: 1.6rem;
}
.logo {
font-size: 3rem;
}
/*---MAIN---*/
.phrase {
top: 300px;
}
/*---FOOTER---*/
.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;
}
.footer button {
margin-left: 7.4%;
}
}
#media screen and (max-width: 731px) {
/*---FOOTER---*/
.footer button {
margin-left: 6%;
}
.contact .inner p {
margin: 5px;
}
}
/*------LANDSCAPE-MODE-MOBILE------*/
#media screen and (max-width: 715px) {
/*---NAV---*/
.phrase {
margin-top: 30px;
}
.phrase p {
font-size: 2.5rem;
}
.phrase a {
font-size: 1.5rem;
}
nav ul {
padding-left: 0;
margin: 0;
}
nav li {
font-size: 1.4rem;
}
nav .logo {
font-size: 2.5rem;
}
/*---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: 586px) {
/*---MAIN---*/
.phrase p {
font-size: 2.7rem;
}
.stats p {
font-size: 1.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;
}
}
#media screen and (max-width: 568px) {
/*---MAIN---*/
.phrase p {
font-size: 2rem;
}
.phrase a {
font-size: 1.3rem;
}
.stats p {
font-size: 1.5rem;
}
.promise p {
font-size: 1.3rem;
}
/*---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: 100%;
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;
}
.social .inner:before {
width: 100vw;
}
.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: 30px;
margin-left: 5px;
}
.contact p {
margin: 5px;
font-size: 1.2rem;
}
.copyright {
background-color: red;
}
.copyright span {
color: white;
background-color: red;
}
}
#media screen and (max-width: 517px) {
/*---NAV---*/
nav li {
font-size: 1.1rem;
}
/*---MAIN---*/
header h1 {
font-size: 3rem;
}
/*---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;
}
.social .inner {
position: relative;
top: -10px;
}
.footer h1 span:after {
content: '';
height: 2px;
width: 100%;
background-color: red;
position: absolute;
bottom: 1px;
left: 0;
}
.links a {
margin-left: 5px;
}
.social h1 {
margin-bottom: 10px;
}
#msg {
font-size: 1.3rem;
margin-bottom: 0;
float: right;
margin-right: 25.5%;
position: relative;
top: 15px;
}
.footer button {
right: 9.25%;
margin-top: 0.2px;
}
.social i {
font-size: 1.8rem;
margin-right: 7px;
position: relative;
top: -5px;
left: 5px;
color: rgba(102,102,102, 0.7);
transition: all 0.4s ease;
}
.footer-textarea {
width: 88.5%;
margin-left: 5px;
margin-top: 0px;
position: relative;
top: 10px;
}
.contact p {
margin: 5px;
font-size: 1.2rem;
}
.copyright {
background-color: red;
}
.copyright span {
color: white;
background-color: red;
}
}
/*---MOBILE---*/
#media screen and (max-width: 425px) {
/*---NAV---*/
.logo {
font-size: 2.5rem;
margin-left: 10px;
}
ul {
margin: 0;
padding: 0;
}
nav li {
display: none;
}
.ham-menu {
width: 55px;
height: 55px;
position: fixed;
right: 0;
top: 4px;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.m1, .m2, .m3 {
border-radius: 4px;
margin: 4px;
width: 35px;
height: 3px;
background-color: red;
float: left;
animation-duration: 0.3s;
animation-fill-mode: forwards;
}
/*---MAIN---*/
.phrase {
top: 179px;
}
.phrase p {
font-size: 2.5rem;
margin-bottom: 10px;
}
.phrase a {
font-size: 1.3rem;
padding: 7px;
}
.phrase .fas {
margin-top: 10px;
font-size: 2.5rem;
}
.stats p {
font-size: 1.3rem;
}
.stats div {
padding-bottom: 10px;
}
.stats div:before {
height: 20px;
}
.promise h1 {
font-size: 2.7rem;
}
.promise p {
position: relative;
top: 10px;
font-size: 1.3rem;
}
/*---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;
}
.social .inner {
position: relative;
top: -9.5px;
}
.footer h1 span {
display: inline;
position: relative;
}
.footer h1 span:after {
content: '';
height: 2px;
width: 100%;
background-color: red;
position: absolute;
bottom: 1px;
left: 0;
}
.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: 0px;
margin-left: 5px;
}
.contact p {
margin: 5px;
font-size: 1.2rem;
}
.copyright {
background-color: red;
}
.copyright span {
color: white;
background-color: red;
}
}
#media screen and (max-width: 360px) {
.footer button {
margin-right: 8.5%;
}
}
/*---HAM-MENU-ANIMATIONS---*/
#keyframes m1 {
from {
border-radius: 4px;
margin: 4px;
width: 35px;
height: 3px;
background-color: red;
float: left;
}
to {
border-radius: 4px;
margin: 4px;
width: 35px;
height: 3px;
background-color: red;
float: left;
transform: rotate(45deg);
position: relative;
top: 12px;
}
}
#keyframes m2 {
from {
border-radius: 4px;
margin: 4px;
width: 35px;
height: 3px;
background-color: red;
float: left;
}
to {
border-radius: 4px;
margin: 4px;
width: 35px;
height: 3px;
background-color: red;
float: left;
opacity: 0;
}
}
#keyframes m3 {
from {
border-radius: 4px;
margin: 4px;
width: 35px;
height: 3px;
background-color: red;
float: left;
}
to {
border-radius: 4px;
margin: 4px;
width: 35px;
height: 3px;
background-color: red;
float: left;
transform: rotate(-45deg);
position: relative;
top: -10.5px;
}
}
New rule for .header, remove background-attachment: fixed; and add background-size: cover;:
header {
background-image: url(../img/wall2.jpeg);
height: 100vh;
background-size: cover;
background-repeat: no-repeat;
display: flex;
justify-content: center;
align-items: center;
}
You have the picture in the header and it seems like you only edited the height and not the width. Im not sure about the specs of the picture which might come out stretched but try putting this...
width: 100%;
in the style section you put the picture in . . . (header {})
if you are going to have that image as just the header then you should probably limit it to only a portion of the height but the full width. Its a lot easier to use percentages as much as you can because of the transition from mobile to desktop. When a user looks at a web page from their phone and its in pixels then it would be a lot large than they would probably like.
Use background-size: cover, it will stretch an image to fill the full size of your element.
<body style="background-image:url(bgimage.jpg)"> use this code
and then check.
I am learning css myself right now. I made this webpage:
https://codepen.io/manu506/project/editor/DQyMvM
/*************************************************************/
/* BASIC SETUP */
/************************************************************/
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
background-color: #ffffff;
color: #000000;
font-family: 'Lato', 'Arial', sans-serif;
font-weight: 300;
font-size: 18px;
text-rendering: optimizeLegibility;
}
/*************************************************************/
/* REUSABLE COMPONENTS */
/************************************************************/
.row {
width: 1140px;
margin: 0 auto;
}
h1 {
font-family: 'Merrriweather', serif;
font-weight: 900;
font-size: 500%;
}
h2 {
font-family: 'Merrriweather', serif;
font-weight: 400;
font-size: 200%;
}
h3 {
font-family: 'lato', 'arial', sans-serif;
font-weight: 900;
font-style: italic;
}
p {
font-family: 'lato', 'arial', sans-serif;
font-weight: 400;
font-size: 130%;
}
.btn {
display:inline-block;
padding: 10px 30px;
font-weight: 300;
text-decoration: none;
border: 1px solid #0f0f0f;
color: #0f0f0f;
transition: background-color 0.3s, color 0.3s;
}
.btn:hover, .btn:active {
background-color: #0f0f0f;
color: #ffffff;
}
.btn:visited {
background-color: #0f0f0f;
}
/*************************************************************/
/* Navigation */
/************************************************************/
/* Header Background */
header {
background-image:linear-gradient(#000000dc, #000000dc), url(https://image.ibb.co/irJBJz/header.jpg);
background-size: cover;
background-position: center;
height: 100vh;
background-attachment: fixed;
}
/* Logo */
.logo {
font-family: 'Merrriweather', serif;
font-weight: 400;
font-size: 250%;
color: #fff;
display: inline-block;
position: absolute;
left: 2%;
}
/* Navigation Menu */
.nav-menu {
float: right;
list-style: none;
position: absolute;
right: 2%;
top: 0%;
}
.nav-menu li {
display: inline-block;
margin: 30px;
}
.nav-menu li a:link,
.nav-menu li a:visited {
color: #fff;
text-decoration: none;
padding: 4px;
border-bottom: 2px solid transparent;
transition: border-bottom 0.5s;
}
.nav-menu li a:hover,
.nav-menu li a:active {
border-bottom: 2px solid #fff;
}
/* Header Mid Text Box */
.text-box {
position: absolute;
width: 100%;
color:#fff;
text-align: center;
top: 25%;
}
/******** Section 1 *************/
.section1 {
margin-top: 8%;
}
.section1-text {
margin-top: 25%;
}
.section1-text h2 {
font-size: 350%;
}
.section1-text h3 {
font-size: 145%;
margin-top: 10px;
}
.section1-text h3::before {
display: block;
height: 2px;
background-color: #e67e22;
content: "";
width: 90px;
margin-top: 5px;
margin-bottom: 5px;
}
.section1-text p {
color: #555;
padding-top: 15px;
padding-bottom: 35px;
}
/* *********** Section 2 ************ */
.section2 {
margin-top: 10%;
width: 100%;
}
.section2-text {
width: 33.33%;
margin-top: 10%;
}
.section2-text h2 {
font-size: 350%;
}
.section2-text h3 {
font-size: 145%;
margin-top: 10px;
}
.section2-text h3::before {
display: block;
height: 2px;
background-color: #e67e22;
content: "";
width: 90px;
margin-top: 5px;
margin-bottom: 5px;
}
.section2-text p {
color: #555;
padding-top: 15px;
padding-bottom: 35px;
}
/******** Section 3 *************/
.section3-text {
display: block;
margin-top: 18%;
}
.section3-text h2 {
font-size: 350%;
}
.section3-text h3 {
font-size: 145%;
margin-top: 10px;
}
.section3-text h3::before {
display: block;
height: 2px;
background-color: #e67e22;
content: "";
width: 105px;
margin-top: 5px;
margin-bottom: 5px;
}
.section3-text p {
color: #555;
padding-top: 15px;
padding-bottom: 35px;
}
/******** Section 4 *************/
.section4 {
margin-top: 8%;
}
.section4-text {
margin-top: 18%;
}
.section4-text h2 {
font-size: 350%;
}
.section4-text h3 {
font-size: 145%;
margin-top: 10px;
}
.section4-text h3::before {
display: block;
height: 2px;
background-color: #e67e22;
content: "";
width: 100px;
margin-top: 5px;
margin-bottom: 5px;
}
.section4-text p {
color: #555;
padding-top: 15px;
padding-bottom: 35px;
}
/******** Section 5 *************/
.section5 {
width: 100%;
margin-top: 8%;
}
.section5-img {
padding-left: 10%;
}
.section5-text {
width: 33.33%;
margin-top: 14%;
}
.section5-text h2 {
font-size: 350%;
}
.section5-text h3 {
font-size: 145%;
margin-top: 10px;
}
.section5-text h3::before {
display: block;
height: 2px;
background-color: #e67e22;
content: "";
width: 187px;
margin-top: 5px;
margin-bottom: 5px;
}
.section5-text p {
color: #555;
padding-top: 15px;
padding-bottom: 35px;
}
/******** Section 6 *************/
.section6 {
margin-top: 11%;
text-align: center;
}
.section6 span {
display: block;
font-size: 70%;
}
.section6 h3 {
margin: 2%;
font-size: 200%;
}
.section6 p {
display: block;
padding-top: 25px;
padding-bottom: 25px;
}
/******** Section 7 *************/
.section7 {
margin-top: 8%;
margin-bottom: 8%;
width: 100%;
background-color: #161616;
text-align: center;
}
.section7-services {
margin: 0;
}
.blur-image1 {
width: 100%;
height: 700px;
background-image: url("https://image.ibb.co/m9q2Qe/services.jpg");
background-repeat: no-repeat;
background-size: cover;
opacity: 0;
transition: opacity 0.5s;
}
.blur-image1:hover {
opacity: 1;
}
.service-text-box {
display: inline-block;
width:35%;
padding-top: 35px;
padding-bottom: 35px;
text-align: center;
border: 2px solid white;
background-color: #fff;
transform: translate(0, -450px);
}
.section7-work {
margin: 0;
}
.blur-image2 {
width: 100%;
height: 700px;
background-image: url("https://image.ibb.co/muF2Qe/work.jpg");
background-repeat: no-repeat;
background-size: cover;
opacity: 0;
transition: opacity 0.5s;
}
.blur-image2:hover {
opacity: 1;
}
.work-text-box {
display: inline-block;
width:35%;
padding-top: 35px;
padding-bottom: 35px;
text-align: center;
border: 2px solid white;
background-color: #fff;
transform: translate(0, -450px);
}
I used https://www.dtelepathy.com/ as an inspiration for the design. But I am not able to achieve the same result. If you look at css and html, from section 1 to section 7, all images are going out of browser boundary. If I use overflow:hidden property, then my images are being cropped out, which I don't want. Can you please help me out?
I am using this grid system: http://www.responsivegridsystem.com/
Add these properties to img tag
img {
width: 100%;
height: auto;
font-size: 0;
}
If the width property is set to 100%, the image will be responsive and scale up and down:
Use this code:
This CSS Style is used to be make width of the scroll bar "0"
So we can hide the scrollbar without overflow hidden.
::-webkit-scrollbar { width: 0px;}
Update:
I'm sure this will be easy fix for advanced members. I have created drop down menu with the 'nav' element. For some reason as hard as I try, I cannot get the menu to overlap the slider images below it when you expand it on mobile. I've tried lowering the Z-index on the slider and raising it on the menu. What am I doing wrong? Thanks in advance:
UPDATE: Here is a fiddle link as requested by a comment which includes the HTML. https://jsfiddle.net/wknow6cv/#&togetherjs=ADxkd31O6q
#import 'https://fonts.googleapis.com/css?family=Alegreya+Sans';
* {
margin: 0;
padding: 0;
border: 0;
overflow-x: hidden;
}
html,body
{
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
}
body {
background: #F5F5F5;
color: #67727A;
font-family: 'Alegreya', Sans-serrif;
margin: 0;
}
h3 {
font-size: 150%;
line-height: 155%;
padding: 5% 0;
font-weight: 400;
}
p{
font-size: 120%;
line-height: 150%;
padding: 3%;
text-indent: 2%;
text-align: center;
}
img{
max-width: 100%;
height: auto;
width: auto;
margin-bottom: -4px;
}
header{
background-color: #6991AC;
width: 100%;
height: 120px;
}
h1{
position:absolute;
right: 600px;
top:30px;
}
#top-left-menu {
right: 0px;
}
#logo{
margin: 20px;
float: left;
width: 380px;
height: 60px;
background: url(img/RD.png) no-repeat center;
left: 0px;
top: 0px;
}
p {
font-size: 1.4vw;
}
h3{
font-size: 1.5vw;
}
/*--- Start Navigation --*/
nav{
float: right;
padding: 25px 20px 0 0; /*--top right bottom left--*/
}
#menu-icon{
display: hidden;
width: 40px;
height: 40px;
background: url(img/nav.png) center;
}
a:hover#menu-icon {
border-radius: 4px 4px 0 0;
}
ul{
list-style-type: none;
}
nav ul li {
font-family: 'Alegreya Sans', Sans-serrif;
font-size: 150%;
display: inline-block;
/*makes the links go left from right instead of up and down*/
float: left;
padding: 10px;
}
nav ul li a {
text-decoration: none;
color: #F5F5F5;
}
nav ul li a:hover {
color: #C3D7DF;
}
/*.current{
color: #C3D7DF;
}
/*--End Navigation--*/
.one-fourth {
width: 25%;
float: left;
text-align: center;
font-family: Arial;
color: #F0F0F0;
}
#cloud {
background-color: #C3D7DF;
}
#lock {
background-color: #6991AC;
}
#headset {
background-color: #C3D7DF;
}
#truck {
background-color: #6991AC;
}
.one-fourth i { /*--Icons at one fourth blocks--*/
color: #F0F0F0;
font-size: 410%;
padding: 13% 0 4% 0;
}
article {
float: left;
margin: 0 auto;
width: 50%;
height: auto;
}
#sec-1 {
background-color: #FFFFFF;
}
aside {
float: right;
margin: 0 auto;
width: 50%;
height: auto;
}
.one-third {
width: 33.3333333%;
float: left;
text-align: center;
color: #FFFFFF
}
#google{
background-color: #A2B1C1;
}
#marketing {
background-color: #BEB9AD;
}
#customers {
background-color: #AADCD2;
}
/*--Start Footer--*/
footer {
background-color: #4682B4;
width: 100%;
}
.social {
list-style-type: none;
text-align: center;
}
.social li {
display: inline;
}
.social i { /*--icons--*/
font-size: 220%;
padding: 3% 3% 3% 2%;
color: #C3D7DF;
}
.social i:hover {
color: F5F5F5;
}
footer.second { /*--Socket--*/
border-top: 1px solid #AADCD2;
background-color: #544B59;
max-height: 55px;
text-align: center;
margin: 0;
}
footer.second p {
padding: 5px 0 9px 0;
text-align: center;
}
.carouselbox {
font-family: helvetica,sans-serif;
font-size: 14px;
width: 100px;
position: relative;
margin: 1em;
border: 1px solid #ccc;
box-shadow: 2px 2px 10px #ccc;
overflow: hidden;
}
.content {
margin: 0;
padding: 0;
}
.content li {
font-size: 100px;
margin: 0;
padding: 0;
width: 100%;
list-style: none;
text-align: center;
}
.new-inner {
height: 800px;
width: 100%;
float: left;
background-color: #FFFAFA;
font-family: Arial;
}
.nip1 {
width: 40%;
}
/*---------Insert Slideshow stuff below------*/
.cycle-slideshow{
width: 100%;
display: block;
position: relative;
margin: 0 auto;
overflow: hidden;
}
.cycle-prev, .cycle-next {
font-size: 200%;
color: #FFF;
top: 50%;
display: block;
position: absolute;
z-index: 9999;
cursor: pointer;
}
.cycle-prev {left: 10%;}
.cycle-next {right: 10%}
.cycle-pager{
width: 100%;
text-align: center;
display: block;
position: absolute;
bottom: 20px;
z-index: 9999;
cursor: pointer;
}
.cycle-pager span {
text-indent: 100%;
white-space: normal;
width: 12px;
height: 12px;
display: inline-block;
border: 1px solid #FFF;
border-radius: 50%;
margin: 0 10px;
}
.cycle-pager .cycle-pager-active {background: #FFF;}
/*------------MEDIA QUERIES ARE NOW STARTING-------------*/
#media screen and (max-width: 768px){
p {
font-size: 250%;
}
h3{
font-size: 260%;
}
header{
width: 100%;
}
#logo {
margin: 15px 0 20 -25px;
background: url(img/RD_mobile.png) no-repeat center;
float: left;
width: 170px;
height: 60px;
}
#menu-icon {
display: inline-block;
}
nav ul, nav:active ul {
display: none;
z-index: 1000;
position: absolute;
padding: 20px;
background: #6991AC;
right: 20px;
top: 60px;
border: 1px solid #FFF;
border-radius: 2px 0 2px 2px;
width: 50%;
}
nav:hover ul {
display: block;
}
nav li {
text-align: center;
width: 100%;
padding: 10px 0;
}
.one-fourth {
float: left;
width: 100%;
font-size: 30%;
}
.one-fourth i {
font-size: 500%;
padding: 4% 0 1% 0;
}
article {
width: 100%;
}
aside {
width: 100%;
}
.hand-mobile {
display: none;
}
.social i {
font-size: 100%;
}
}
Maybe try to change the media queries nav to position: relative;
EDIT:
Try this instead, change the display: none to inline:
nav ul, nav:active ul {
display: inline;
z-index: 1000;
position: relative;
padding: 20px;
background: #6991AC;
right: 20px;
top: 60px;
border: 1px solid #FFF;
border-radius: 2px 0 2px 2px;
width: 50%;
}
I'm fairly new to html, and when I tried to create a webpage, I encountered a problem. I managed to make a navigation bar with a drop down menu directly under the "Games" section, but if I scroll down and open the drop down menu, it no longer opens directly under the navigation bar. This is my HTML code.
<div class="wrapper">
<div id="main-title">
<header>
<h1>Max Reviews</h1>
</header>
</div> <!-- Title box-->
<div id="nav"> <!-- Navigation Bar -->
<nav>
<ul>
<li><a class="active" href="#">Home</a></li>
<li>About Me</li> <!-- Link to about page -->
<li class="drop">
<p>Games</p>
<div class="drop-content">
<p>Red Faction: Guerrilla</p> <!-- Contains links to the respective pages -->
<p>Way of the Samurai 3</p>
<p>Singularity</p>
</div>
</li>
<li>Reviews</li>
<li>External Store</li> <!-- Link to external site -->
<li>Videos</li> <!-- Contains links to Youtube -->
</ul>
</nav>
</div>
<div class="image"> <!-- Banner-->
<a href="singularity.html">
<img src="modified singularity aging 1.jpg" alt="singularity">
<h2><span>Recommended Game of the Month</span></h2>
</a>
</div>
<div id="home-content"><p>Learn more about the site ☛here☚</p></div>
<div id="footer">
<p>© Copyright 2016-2017. All images here were taken and edited by me. All rights reserved. Games featured here might not be suitable for all audience.</p>
</div>
</div>
And this is the stylesheet.
article, body, div, footer, header, h1, h2, p {
border: 0;
padding: 0;
margin: 0;
}
html, body {
height: 100%;
margin: 0;
width: 100%;
background-color: #FFFFFF;
padding: 0px;
overflow-x: hidden;
}
body {
transition: background 600s ease-in-out;
}
body:hover {
background-color: #4B0101;
}
/*main title*/
#main-title {
background-color: #33B2E7;
color: #FFFFFF;
position: relative;
top: 25px;
left: 20px;
padding: 10px;
margin-left: 10px;
display: inline-block;
transition: color 1s, transform 1s;
transition-delay: 2s;
}
#main-title:hover {
color: black;
transform: rotate(360deg);
}
/* Nav */
#nav nav{
padding-top: 100px;
margin-bottom: 0;
}
#nav ul {
list-style-type: none;
margin: 0;
overflow: hidden;
background-color: #1C86EE;
padding: 0;
position: relative;
width: 100%;
bottom: 40px;
display: inline-block;
}
#nav li {
float: left;
width: 16%;
}
li a, .dropbtn {
display: inline-block;
color: #FFFFFF;
text-align: center;
padding-left: 50px;
padding-right: 50px;
text-decoration: none;
}
.active {
background-color: #6CCC0A;
padding-right: 50px;
}
li a:hover, .drop:hover .dropbtn {
background-color: #BFA811;
}
a {
padding-top: 10px;
padding-bottom: 10px;
}
li.drop {
display: inline-block;
}
.drop-content {
display: none;
position: absolute;
background-color: #970707;
min-width: 50px;
box-shadow: 0px 8px 16px 0px #000000;
z-index: 100;
}
.drop-content a {
color: #FFFFFF;
padding: 15px 20px;
display: block;
text-align: left;
}
.drop-content a:hover {
background-color: #02BBC4
}
.drop:hover .drop-content {
display: block;
position: fixed;
top: 155px;
border: 1px solid black;;
}
/*banner*/
.image {
position: relative;
width: 100%;
}
.image h2 {
position: absolute;
top: 600px;
text-align: center;
width: 100%;
right: 350px;
}
.image h2 span {
color: #FFFFFF;
font: Arial, Calibri, Sans-serif;
background: #000000;
padding: 10px;
}
.image h2:hover span {
background-color: #003316;
}
.button {
position: absolute;
top: 1013px;
left: 700px;
padding: 16px 32px;
text-align: center;
margin: 4px 2px;
display: inline-block;
cursor: pointer;
background-color: rgb(41,120,104);
color: rgb(240,144,22);
font-family: Cambria, Times New Roman, serif;
font-size: 20px;
}
/*content*/
#home-content {
position: relative;
padding: 20px;
text-align: center;
margin-left: 90px;
display: block;
color: #8A0707
}
#home-content a {
color: #09922A
}home-content a:visited {
color: #000000
}
/*Footer*/
#footer {
background: #000000;
width: 100%;
height: 40px;
position: relative;
bottom: 0;
left: 0;
padding-top: 10px;
overflow: hidden;
}
#footer p {
font-family: arial, calibri, sans-serif;
color: #FFFFFF;
text-align: center;
}
#aboutme h2 {
margin-bottom: 20px;
text-align: center;
text-decoration: underline;
font-family: Cambria, Calibri, sans-serif;
font-size: 20px;
color: #000000;
}
#aboutme article {
padding-top: 20px;
position: relative;
margin-left: 25%;
margin-right: 25%;
display: inline-block;
font-family: arial, cambria, serif;
line-height: 200%;
color: #777000;
text-align: center;
border: 2px solid #000000;
padding: 10px;
}
#gallery-title {
text-align: center;
font-family: Cambria, calibri, sans-serif;
padding-top: 20px;
}
#image-1 {
text-align: center;
margin: 0 25%;
padding: 20px;
}
.img-desc-1 {
padding: 20px;
color: #047615;
}
#image-2 {
text-align: center;
margin: 0 25%;
border: 2px solid #262020;
padding: 20px;
}
#prompt-text {
text-align: center;
padding-top: 30px;
font-family: cambria, calibri, sans-serif;
}
.image-container img{
height: 300px;
width: 300px;
padding-left: 60px;
padding-top: 60px;
}
.image-container p{
padding-left: 80px;
font-family: Arial, cambria, sans-serif;
color: #560404;
text-decoration: none;
}
.image-container {
display: block;
text-align: center;
padding-left: 20px;
}
#image1 {
padding-right: 60px;
padding-bottom: 10%
}
#image2 {
padding-right: 60px;
padding-bottom: 10%;
}
#image3 {
padding-bottom: 0;
margin: 0;
}
.gameimages {
padding-bottom: 15%;
text-align: center;
}
.gameimages p {
padding-top: 20px;
}
.gameimages h3 {
text-align: center;
font-family: cambria, times new roman, sans-serif
}
#side-nav {
height: 200px;
float: right;
bottom: 1500px;
right: 3%;
padding: 10px;
background-color: #8C3406;
display: block;
position: relative;
text-align: center;
}
Please help me as I've been trying to solve this problem for 2 days. Also, this is my first time posting a question here, so forgive me if I indented my code wrongly, or if I inadvertently violated some of the rules of Stack Overflow.
The reason for this behaviour is that your drop-content has position:fixed on hover.
From MDN:
…an element that is absolutely positioned is taken out of the flow; thus, other elements are positioned as if it did not exist. The absolutely positioned element is positioned relative to its nearest positioned ancestor… Fixed positioning is similar to absolute positioning, with the exception that the element's containing block is the viewport.
Working example on JSFiddle and here is what I've changed:
#nav ul {
/*overflow: hidden;*/
}
.drop:hover .drop-content {
/*position: fixed;
top: 155px;*/
position: absolute;
}
Update CSS to
article, body, div, footer, header, h1, h2, p {
border: 0;
padding: 0;
margin: 0;
}
html, body {
height: 100%;
margin: 0;
width: 100%;
background-color: #FFFFFF;
padding: 0px;
overflow-x: hidden;
}
body {
transition: background 600s ease-in-out;
}
body:hover {
background-color: #4B0101;
}
/*main title*/
#main-title {
background-color: #33B2E7;
color: #FFFFFF;
position: relative;
top: 25px;
left: 20px;
padding: 10px;
margin-left: 10px;
display: inline-block;
transition: color 1s, transform 1s;
transition-delay: 2s;
}
#main-title:hover {
color: black;
transform: rotate(360deg);
}
/* Nav */
#nav nav{
padding-top: 100px;
margin-bottom: 0;
}
#nav ul {
list-style-type: none;
margin: 0;
background-color: #1C86EE;
padding: 0;
position: relative;
width: 100%;
bottom: 40px;
display: inline-block;
}
#nav li {
float: left;
width: 16%;
}
li a, .dropbtn {
display: inline-block;
color: #FFFFFF;
text-align: center;
padding-left: 50px;
padding-right: 50px;
text-decoration: none;
}
.active {
background-color: #6CCC0A;
padding-right: 50px;
}
li a:hover, .drop:hover .dropbtn {
background-color: #BFA811;
}
a {
padding-top: 10px;
padding-bottom: 10px;
}
li.drop {
display: inline-block;
}
.drop-content {
display: none;
position: absolute;
background-color: #970707;
min-width: 50px;
box-shadow: 0px 8px 16px 0px #000000;
z-index: 100;
}
.drop-content a {
color: #FFFFFF;
padding: 15px 20px;
display: block;
text-align: left;
}
.drop-content a:hover {
background-color: #02BBC4
}
.drop:hover .drop-content {
display: block;
}
/*banner*/
.image {
position: relative;
width: 100%;
}
.image h2 {
position: absolute;
top: 600px;
text-align: center;
width: 100%;
right: 350px;
}
.image h2 span {
color: #FFFFFF;
font: Arial, Calibri, Sans-serif;
background: #000000;
padding: 10px;
}
.image h2:hover span {
background-color: #003316;
}
.button {
position: absolute;
top: 1013px;
left: 700px;
padding: 16px 32px;
text-align: center;
margin: 4px 2px;
display: inline-block;
cursor: pointer;
background-color: rgb(41,120,104);
color: rgb(240,144,22);
font-family: Cambria, Times New Roman, serif;
font-size: 20px;
}
/*content*/
#home-content {
position: relative;
padding: 20px;
text-align: center;
margin-left: 90px;
display: block;
color: #8A0707
}
#home-content a {
color: #09922A
}home-content a:visited {
color: #000000
}
/*Footer*/
#footer {
background: #000000;
width: 100%;
height: 40px;
position: relative;
bottom: 0;
left: 0;
padding-top: 10px;
overflow: hidden;
}
#footer p {
font-family: arial, calibri, sans-serif;
color: #FFFFFF;
text-align: center;
}
#aboutme h2 {
margin-bottom: 20px;
text-align: center;
text-decoration: underline;
font-family: Cambria, Calibri, sans-serif;
font-size: 20px;
color: #000000;
}
#aboutme article {
padding-top: 20px;
position: relative;
margin-left: 25%;
margin-right: 25%;
display: inline-block;
font-family: arial, cambria, serif;
line-height: 200%;
color: #777000;
text-align: center;
border: 2px solid #000000;
padding: 10px;
}
#gallery-title {
text-align: center;
font-family: Cambria, calibri, sans-serif;
padding-top: 20px;
}
#image-1 {
text-align: center;
margin: 0 25%;
padding: 20px;
}
.img-desc-1 {
padding: 20px;
color: #047615;
}
#image-2 {
text-align: center;
margin: 0 25%;
border: 2px solid #262020;
padding: 20px;
}
#prompt-text {
text-align: center;
padding-top: 30px;
font-family: cambria, calibri, sans-serif;
}
.image-container img{
height: 300px;
width: 300px;
padding-left: 60px;
padding-top: 60px;
}
.image-container p{
padding-left: 80px;
font-family: Arial, cambria, sans-serif;
color: #560404;
text-decoration: none;
}
.image-container {
display: block;
text-align: center;
padding-left: 20px;
}
#image1 {
padding-right: 60px;
padding-bottom: 10%
}
#image2 {
padding-right: 60px;
padding-bottom: 10%;
}
#image3 {
padding-bottom: 0;
margin: 0;
}
.gameimages {
padding-bottom: 15%;
text-align: center;
}
.gameimages p {
padding-top: 20px;
}
.gameimages h3 {
text-align: center;
font-family: cambria, times new roman, sans-serif
}
#side-nav {
height: 200px;
float: right;
bottom: 1500px;
right: 3%;
padding: 10px;
background-color: #8C3406;
display: block;
position: relative;
text-align: center;
}
2 changes done.
Removed overflow:hidden in #nav ul
Keot display:block only in .drop:hover .drop-content
I'm having a strange CSS problem where the main div container on my website shifts to the right when I visit certain pages. This happens even though there is no specific CSS rule to move it
I've uploaded a temp version of my site here:
http://myawesometestsite.ddns.net/
When you go to the Publications and Contact page the entire container shifts to the right by a few pixels. The position appears to be correct and unshifted on all other pages
This is the full CSS I'm using:
body {
background-color: #dcd8cf;
font-family: Raleway, Arial, sans-serif;
font-size: 1em;
}
h1 {
font-size: 1.5em;
color: #832C00;
margin-bottom: 30px;
}
h2 {
font-size: 1.2em;
color: #832C00;
margin-top: 30px;
}
h3 {
font-size: 1em;
margin-bottom: 5px;
margin-top: 20px;
}
h4 {
font-size: 1em;
font-style: italic;
margin-top: 0px;
margin-left: 10px;
margin-bottom: 5px;
}
.container {
position: relative;
left: 50%;
margin-left: -470px;
width: 940px;
border: 1px solid black;
}
/*
Header
*/
header {
position: relative;
display: inline-block;
width: 100%;
height: 180px;
background-color: #a63700;
}
header h1 {
position: absolute;
font-size: 2.5em;
color: #e6e6dc;
top: 50px;
left: 100px;
margin: 0px;
}
header h2 {
position: absolute;
font-size: 0.77em;
color: #e6e6dc;
top: 100px;
left: 100px;
margin: 0px;
opacity: 0.7;
}
header img {
border: 2px solid #e6e6dc;
border-radius: 50%;
max-width: 100%;
max-height: 100%;
}
.profileImage {
display: block;
margin-left: auto;
margin-right: auto;
margin-top: 10px;
max-width: 150px;
max-height: 150px;
}
.skillIcons {
position: absolute;
right: 25px;
top: 15px;
}
.skillIcons img {
display: inline;
width: 75px;
height: 75px;
padding: 5px;
margin: 15px;
opacity: 0.7;
}
/*
Navigation menu
*/
nav {
position: relative;
z-index: 1;
text-align: center;
letter-spacing: 2px;
background-color: #a63700;
height: 50px;
width: 100%;
}
nav a {
position: relative;
top: 20px;
color: #D1D1C9;
text-decoration: none;
padding: 0 30px;
}
nav a:hover {
border-bottom: solid 1px #e6e6dc;
padding-bottom: 3px;
}
.navSelected {
text-shadow:0px 0px 1px white;
color: white;
}
/*
Main content
*/
main {
position: relative;
background-color: white;
padding: 10px;
}
/*
Footer
*/
footer {
position: relative;
color: #e6e6dc;
background-color: #a63700;
font-size: 10pt;
padding: 10px;
}
.leftFooter ul {
padding-left: 0px;
}
.leftFooter li {
display: inline;
list-style-type: none;
}
.leftFooter li a {
color: #e6e6dc;
text-decoration: none;
}
.leftFooter li + li:before {
color: #e6e6dc;
content: "|";
padding: 10px;
}
.rightFooter {
position: absolute;
right: 10px;
top: 4px;
}
.rightFooter img {
display: inline;
max-width: 30px;
max-height: 30px;
vertical-align: middle;
margin-top: -3px;
}
.copyright {
font-size: 1em;
}
/*
Home page
*/
/*
Publications page
*/
.hangingIndent {
padding-left: 1.5em;
text-indent:-1.5em;
}
.publications h2 {
margin-top: 50px;
}
/*
Code page
*/
.codeProjects a {
color: #a63700;
text-decoration: none;
}
.codeProjects a:hover {
text-decoration: underline;
}
.codeProjects p {
margin-left: 10px;
}
/*
CV page
*/
.cvContainer {
width: 90%;
margin: 0 auto;
}
.cvEntry {
margin-bottom: 30px;
margin-left: 20px;
margin-right: 20px;
}
.sectionHeading {
width: 100%;
border-bottom: 1px solid #000;
}
.alignLeft {
display: block;
float: left;
text-align: left;
width: 80%;
margin-top: 10px;
}
.alignLeft p {
font-size: 1em;
}
.alignLeftSub {
margin-top: -10px;
margin-left: 20px;
}
.alignRight {
display: block;
float: right;
text-align: right;
width: 20%;
margin-top: 10px;
}
.clear {
clear: both;
}
/*
Contact page
*/
.contactInfo {
margin-left: 20px;
}
.contactInfo img {
display: inline;
max-width: 30px;
max-height: 30px;
vertical-align: middle;
}
.emailHidden {
display: none;
}
.contactInfo a {
margin-left: 5px;
color: #a63700;
text-decoration: none;
}
.contactInfo #emailAddress {
margin-left: 2px;
}
.contactInfo #emailAddress a {
margin-left: 8px;
}
/*
Media queries
*/
#media screen and (max-width : 940px) {
.container {
position: relative;
left: 0px;
margin: 0px;
width: 100%;
}
header h1 {
left: 5%;
margin: 0px;
}
header h2 {
left: 5%;
margin: 0px;
}
.skillIcons img {
max-width: 70px;
max-height: 70px;
margin-left: 5px;
margin-right: 0px;
}
}
#media screen and (max-width : 800px) {
header h1 {
display: none;
}
header h2 {
display: none;
}
.skillIcons img {
display: none;
}
nav {
height: 150px;
}
nav a {
display: block;
}
nav a:hover {
border-bottom: none;
padding-bottom: 0px;
}
}
#media screen and (max-width : 600px) {
.rightFooter {
position: relative;
display: block;
margin-left: 10px;
}
}
I don't believe there's anything in here that's causing the container to shift for just those 2 pages but maybe I'm missing something. Anyone have any idea whats causing this?
Add "overflow-y: scroll;" to your "body" selector. It should look like this in your CSS:
body {
background-color: #dcd8cf;
font-family: Raleway, Arial, sans-serif;
font-size: 1em;
overflow-y: scroll;
}
The lenght of the pages create a vertical scroll bar. Publication and contact are small then the other are more big then the screen. for fix this you need an overflow-y set to scroll;
body {
overflow-y: scroll;
}