CSS Help Please
Posted: Wed Jul 05, 2017 2:30 pm
Hello,
I have attached a screenshot of my website mobile version everything looks ok on the desktop version but when i change to mobile it all goes wrong with the information div is ment to be at the bottom of the menu but it dosent seem to move down and the menu just goes through it.
This is the code.
* {
padding: 0;
margin: 0;
font-family: sans-serif, Arial;
}
html, body{
height: 100%;
background-color: #d4d4d4;
}
#wrapper{
min-height: 100%;
position: relative;
}
#header{
height: 150px;
background-color: black;
font-size: 25px;
color: #fff;
border-bottom: 1px solid #fff;
}
.nav {
height: 40px;
background-color: #79627e;
width: 100%;
color: #fff;
list-style: none;
text-align: center;
border-bottom: 1px solid #000;
}
.nav > li {
display: inline-block;
padding-top: 10px;
padding-left: 15px;
padding-right: 15px;
padding-bottom: 10px;
}
.nav > li:hover {
background-color: #86718a;
}
.nav > li > a {
text-decoration: none;
color: #fff;
}
#information {
background-color: #000;
color: #fff;
width: 100%;
height: 40px;
padding-top: 10px;
padding-left: 15px;
}
#footer{
height: 100px;
background-color: black;
font-size: 25px;
line-height: 3.5;
position: absolute;
width: 100%;
bottom: 0;
left: 0;
color: #fff;
}
.clear{
clear: both;
}
@media screen and (max-width: 1024px) {
.nav {
display: none;
}
.nav > li {
display: block;
background: #e4dfe5 ;
text-align: center;
border-bottom: 1px solid #000;
cursor: pointer;
}
.nav > li:hover{
background-color: #e4dfe5;
}
.nav > li > a{
display: block;
color: #000;
}
.nav-btn {
display: block;
background: #79627e;
padding-top: 10px;
color: #ffffff;
font-size: 25px;
text-align: center;
height: 40px;
cursor: pointer;
}
.nav-btn:before {
content: "Menu";
}
}
I have attached a screenshot of my website mobile version everything looks ok on the desktop version but when i change to mobile it all goes wrong with the information div is ment to be at the bottom of the menu but it dosent seem to move down and the menu just goes through it.
This is the code.
Code: Select all
CSS<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Cleaning Company Template</title>
<link rel="stylesheet" type="text/css" href="css/styles.css">
</head>
<body>
<div id="wrapper">
<div id="header"></div>
<nav>
<span class="nav-btn"></span>
<ul class="nav">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Special Offers</a></li>
<li><a href="#">Home Cleaning</a></li>
<li><a href="#">Office Cleaning</a></li>
<li><a href="#">Handyman Services</a></li>
<li><a href="#">Testimonials</a></li>
<li><a href="#">Payments</a></li>
<li><a href="#">FAQ</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</nav>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$('span.nav-btn').click(function(){
$('ul.nav').toggle();
})
$(window).resize(function (){
if ( $(window).width() > 1024 ) {
$('ul.nav').removeAttr('style');
}
})
</script>
<div id="information">
</div>
<div id="footer"></div>
</div>
</body>
</html>
* {
padding: 0;
margin: 0;
font-family: sans-serif, Arial;
}
html, body{
height: 100%;
background-color: #d4d4d4;
}
#wrapper{
min-height: 100%;
position: relative;
}
#header{
height: 150px;
background-color: black;
font-size: 25px;
color: #fff;
border-bottom: 1px solid #fff;
}
.nav {
height: 40px;
background-color: #79627e;
width: 100%;
color: #fff;
list-style: none;
text-align: center;
border-bottom: 1px solid #000;
}
.nav > li {
display: inline-block;
padding-top: 10px;
padding-left: 15px;
padding-right: 15px;
padding-bottom: 10px;
}
.nav > li:hover {
background-color: #86718a;
}
.nav > li > a {
text-decoration: none;
color: #fff;
}
#information {
background-color: #000;
color: #fff;
width: 100%;
height: 40px;
padding-top: 10px;
padding-left: 15px;
}
#footer{
height: 100px;
background-color: black;
font-size: 25px;
line-height: 3.5;
position: absolute;
width: 100%;
bottom: 0;
left: 0;
color: #fff;
}
.clear{
clear: both;
}
@media screen and (max-width: 1024px) {
.nav {
display: none;
}
.nav > li {
display: block;
background: #e4dfe5 ;
text-align: center;
border-bottom: 1px solid #000;
cursor: pointer;
}
.nav > li:hover{
background-color: #e4dfe5;
}
.nav > li > a{
display: block;
color: #000;
}
.nav-btn {
display: block;
background: #79627e;
padding-top: 10px;
color: #ffffff;
font-size: 25px;
text-align: center;
height: 40px;
cursor: pointer;
}
.nav-btn:before {
content: "Menu";
}
}