The screenshot of the error The nav-links in mobile view do not appear but are clickable. New to HTML and CSS. The Ham-burger menu has z-index 1 it appears correctly. But the content of the menu do not appear. This error is in mobile view only. Attached media query code in css. The name of the stylesheet is different from that in my pc so that isn't an issue.
HTML code
<!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>Executive Committee</title>
<link href="lib/font-awesome/css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link href="style2.css" rel="stylesheet">
<style>
.our-team{
padding: 30px 0 40px;
background: #fff;
overflow: hidden;
position: relative;
}
.our-team .pic{
width: 130px;
height: 130px;
margin-bottom: 50px;
position: relative;
z-index: 1;
margin: auto;
}
.our-team .pic:before{
content:"";
width: 100%;
background: #004165;
position: absolute;
bottom: 135%;
right: 0;
left: 0;
transform: scale(3);
transition: all 0.3s linear 0s;
}
.our-team:hover .pic:before{
height: 100%;
}
.our-team .pic:after{
content: "";
width: 100%;
height: 100%;
border-radius: 50%;
background: #004165;
position: absolute;
top: 0;
left: 0;
z-index: -1;
}
.our-team .pic img{
width: 100%;
height: auto;
border-radius: 50%;
transform: scale(1);
transition: all 0.9s ease 0s;
}
.our-team:hover .pic img{
box-shadow: 0 0 0 14px #f7f5ec;
transform: scale(0.7);
}
.our-team .team-content{
padding-top: 30px;
margin-bottom: 30px;
}
.our-team .title{
font-size: 22px;
font-weight: 700;
color: #4e5052;
letter-spacing: 1px;
text-transform: capitalize;
margin-bottom: 5px;
padding: 10px 10px 10px 10px;
}
.our-team .post{
display: block;
font-size: 15px;
color: #4e5052;
text-transform: capitalize;
padding: 10px 10px 10px 10px;
}
.our-team .social{
width: 100%;
padding: 0;
margin: 0;
background: #004165;
position: absolute;
bottom: -100px;
left: 0;
transition: all 0.5s ease;
}
.our-team:hover .social{
bottom: 0;
}
.our-team .social li{
display: inline-block;
}
.our-team .social li a{
display: block;
padding: 10px;
font-size: 17px;
color: #fff;
transition: all 0.3s ease 0s;
}
.our-team .social li a:hover{
color: #eb1768;
background: #f7f5ec;
text-decoration: none;
}
</style>
</head>
<body>
<nav>
<div class="logo">
<img src="images/TMxAU.png" alt="">
</div>
<div class="hamburger">
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
</div>
<ul class="nav-links">
<li>Home</li>
<li>Club Etiquette</li>
<li>Achievements</li>
<li>Executive Committee</li>
<li>Pathways</li>
<li>Resources</li>
</ul>
</nav>
<section class="landing">
<div>Alone we can do so little, together we can do so much.</div>
</section>
<script src="app.js"></script>
<section class="pathwayarea">
<div class="container">
<!-- Page Heading -->
<h1 class="my-4">Team</h1>
<br><br>
<section class="">
<div class="container">
<div class="row">
<div class="col-lg-3 col-md-4 col-sm-6 mb-4">
<div class="our-team">
<div class="pic">
<img src ="images\Team\1.png">
</div>
<div class="team-content">
<h3 class ="title">ABCD/h3>
<span class="post">Role1</span>
</div>
<ul class="social">
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-6 mb-4">
<div class="our-team">
<div class="pic">
<img src ="images\Team\2.png">
</div>
<div class="team-content">
<h3 class ="title">ABCD</h3>
<span class="post">Role2</span>
</div>
<ul class="social">
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-6 mb-4">
<div class="our-team">
<div class="pic">
<img src ="images\Team\3.png">
</div>
<div class="team-content">
<h3 class ="title">ABCD</h3>
<span class="post">Role3</span>
</div>
<ul class="social">
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-6 mb-4">
<div class="our-team">
<div class="pic">
<img src ="images\Team\4.png">
</div>
<div class="team-content">
<h3 class ="title">ABCD</h3>
<span class="post">Role5</span>
</div>
<ul class="social">
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-6 mb-4">
<div class="our-team">
<div class="pic">
<img src ="images\Team\6.png">
</div>
<div class="team-content">
<h3 class ="title">ABCD</h3>
<span class="post">Role6</span>
</div>
<ul class="social">
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-6 mb-4">
<div class="our-team">
<div class="pic">
<img src ="images\Team\7.png">
</div>
<div class="team-content">
<h3 class ="title">ABCD</h3>
<span class="post">Role7</span>
</div>
<ul class="social">
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-6 mb-4">
<div class="our-team">
<div class="pic">
<img src ="images\Team\8.png">
</div>
<div class="team-content">
<h3 class ="title">ABCD</h3>
<span class="post">Role8</span>
</div>
<ul class="social">
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-6 mb-4">
<div class="our-team">
<div class="pic">
<img src ="images\Team\9.png">
</div>
<div class="team-content">
<h3 class ="title">ABCD</h3>
<span class="post">Role9</span>
</div>
<ul class="social">
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
</div>
</div>
</section>
</div>
</section>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>
<footer id="footer">
<div class="footer-top">
<div class="container">
<div class="row">
<div class="col-lg-3 col-md-6 footer-info">
<h3>Club Name Here</h3>
<p>ABCD</p>
</div>
<div class="col-lg-3 col-md-6 footer-links">
<h4>Useful Links</h4>
<ul>
<li><i class="ion-ios-arrow-right"></i> Home</li>
<li><i class="ion-ios-arrow-right"></i> Club Etiquette</li>
<li><i class="ion-ios-arrow-right"></i> Achievements</li>
<li><i class="ion-ios-arrow-right"></i> Executive Committee</li>
<li><i class="ion-ios-arrow-right"></i> Pathways</li>
<li><i class="ion-ios-arrow-right"></i> Resources</li>
</ul>
</div>
<div class="col-lg-3 col-md-6 footer-contact">
<h4>Contact Us</h4>
<p>Contact Text here/p>
<div class="social-links">
<i class="fa fa-twitter"></i>
<i class="fa fa-facebook"></i>
<i class="fa fa-instagram"></i>
<i class="fa fa-linkedin"></i>
</div>
</div>
<div class="col-lg-3 col-md-6 footer-newsletter">
<h4>Interested in learning more?</h4>
<p>Drop us your E-Mail ID and we'll get in touch with you.</p>
<form action="" method="post">
<input type="email" name="email"><input type="submit" value="Submit">
</form>
</div>
</div>
</div>
</div>
</footer>
</html>
CSS code
* {
margin: 0;
padding: 0;
box-sizing: border-box;[enter image description here][1]
}
body {
font-family: sans-serif;
}
nav {
height: 10vh;
}
.nav-links {
display: flex;
list-style: none;
width: 50%;
height: 100%;
justify-content: space-around;
align-items: center;
margin-left: auto;
}
.pathwayarea{
background: #a9b2b1;
padding-top: 10px;
}
.nav-links li a {
color: #000;
text-decoration: none;
font-size: 16px;
font-weight: bold;
padding: 5px 20px;
}
.nav-links li a:hover{
background: #772432;
color: #fff;
}
.landing {
height: 90vh;
display: flex;
justify-content: center;
width: inherit;
align-items: center;
background: linear-gradient(0deg, rgba(242,223,116,1) 55%, rgba(255,255,255,1) 100%);
}
.container h1{
text-align: center;
font-weight: bold;
color: #000;
}
.logo img{
width: 300px;
float: left;
height: auto;
margin-top: 10px;
margin-left: 30px;
}
.landing div{
top: 50%;
transform: translateY(-50%);
text-align: center;
font-weight: bold;
font-size: 3rem;
}
#footer {
background: #000;
padding: 0 0 30px 0;
color: #eee;
font-size: 14px;
}
#footer .footer-top {
background: #111;
padding: 60px 0 30px 0;
}
#footer .footer-top .footer-info {
margin-bottom: 30px;
}
#footer .footer-top .footer-info h3 {
font-size: 34px;
margin: 0 0 20px 0;
padding: 2px 0 2px 10px;
line-height: 1;
font-family: "Myriad Pro";
font-weight: 700;
letter-spacing: 3px;
border-left: 4px solid #cd202c;
}
#footer .footer-top .footer-info p {
font-size: 14px;
line-height: 24px;
margin-bottom: 0;
font-family: "Montserrat", sans-serif;
color: #fff;
}
#footer .footer-top .social-links a {
font-size: 18px;
display: inline-block;
background: #333;
color: #eee;
line-height: 1;
padding: 8px 0;
margin-right: 4px;
border-radius: 50%;
text-align: center;
width: 36px;
height: 36px;
transition: 0.3s;
}
#footer .footer-top .social-links a:hover {
background: #fff;
color: #fff;
}
#footer .footer-top h4 {
font-size: 14px;
font-weight: bold;
color: #fff;
text-transform: uppercase;
position: relative;
padding-bottom: 12px;
}
#footer .footer-top h4::before,
#footer .footer-top h4::after {
content: '';
position: absolute;
left: 0;
bottom: 0;
height: 2px;
}
#footer .footer-top h4::before {
right: 0;
background: #555;
}
#footer .footer-top h4::after {
background: #cd202c;
width: 60px;
}
#footer .footer-top .footer-links {
margin-bottom: 30px;
}
#footer .footer-top .footer-links ul {
list-style: none;
padding: 0;
margin: 0;
}
#footer .footer-top .footer-links ul i {
padding-right: 8px;
color: #ddd;
}
#footer .footer-top .footer-links ul li {
border-bottom: 1px solid #333;
padding: 10px 0;
font-family: "Myriad Pro";
}
#footer .footer-top .footer-links ul li:first-child {
padding-top: 0;
}
#footer .footer-top .footer-links ul a {
color: #eee;
}
#footer .footer-top .footer-links ul a:hover {
color: #fff;
}
#footer .footer-top .footer-contact {
margin-bottom: 30px;
font-family: "Myriad Pro";
}
#footer .footer-top .footer-contact p {
line-height: 26px;
font-family: "Myriad Pro";
}
#footer .footer-top .footer-newsletter {
margin-bottom: 30px;
font-family: "Myriad Pro";
}
#footer .footer-top .footer-newsletter input[type="email"] {
border: 0;
padding: 6px 8px;
width: 65%;
font-family: "Myriad Pro";
}
#footer .footer-top .footer-newsletter input[type="submit"] {
background: #cd202c;
border: 0;
width: 35%;
padding: 6px 0;
text-align: center;
color: #fff;
transition: 0.3s;
cursor: pointer;
font-family: "Myriad Pro";
}
#media screen and (max-width: 768px) {
.landing div{
width: auto;
height: auto;
max-width: 100%;
max-height: 100%;
}
.landing {
position: relative;
width: 100%;
}
.landing img{
width: auto;
height: auto;
max-width: 100%;
max-height: 100%;
}
.line {
width: 30px;
height: 3px;
background: #000;
margin: 5px;
padding-left: 5px;
}
nav {
position: relative;
}
.hamburger {
position: absolute;
cursor: pointer;
right: 5%;
top: 50%;
transform: translate(-5%, -50%);
z-index: 3;
}
.nav-links {
position: fixed;
background: #f2df74;
height: 100vh;
width: 100%;
flex-direction: column;
clip-path: circle(100px at 90% -10%);
-webkit-clip-path: circle(100px at 90% -19%);
transition: all 1s ease-out;
pointer-events: none;
}
.nav-links.open {
clip-path: circle(1000px at 90% -10%);
-webkit-clip-path: circle(1000px at 90% -10%);
pointer-events: all;
z-index: 2;
}
.landing {
}
.nav-links li {
opacity: 0;
}
.nav-links li a {
font-size: 25px;
}
.nav-links li:nth-child(1) {
transition: all 0.5s ease 0.2s;
}
.nav-links li:nth-child(2) {
transition: all 0.5s ease 0.4s;
}
.nav-links li:nth-child(3) {
transition: all 0.5s ease 0.6s;
}
.nav-links li:nth-child(4) {
transition: all 0.5s ease 0.6s;
}
.nav-links li:nth-child(5) {
transition: all 0.5s ease 0.6s;
}
.nav-links li:nth-child(6) {
transition: all 0.5s ease 0.6s;
}
li.fade {
opacity: 1;
}
}
First, a few observations:
You are using different versions of Bootstrap: in CSS: 4.3.1 and JS: 3.3.7.
The footer is in the wrong place, you need to place it before closing the </body> tag.
As you are using Bootstrap why not use the navbar?
To fix your problem just remove the opacity from .nav-links li or set to 1:
.nav-links li {
opacity: 1;
}
EDIT:
Add this to the respective classes:
.nav-links {
visibility: hidden;
opacity: 0;
z-index: 1;
}
.nav-links.open {
opacity: 1;
visibility: visible;
}
And remove this:
.nav-links li {
opacity: 0;
}
li.fade {
opacity: 1;
}
Now it should work as expected.
Working example: Codepen.
Related
My website responsive works on my iPhone 100% but for some reason it messes up on android devices...
I've already got bootstrap integrated with it's suggested responsive string.
How it should look: http://prntscr.com/p4szot <-- iPhone
The main problem: http://prntscr.com/p4szg4 <-- Android
I've installed bootstrap and it's responsive strings.
I've added the style property word-break: break-all;
<html lang="en">
<head>
<title>Semix | Cheap Website Development</title>
<!--Font awsome---------------------------------------------------------------------------------->
<script src="https://kit.fontawesome.com/3c0298f6a8.js"></script>
<!--Google Fonts--------------------------------------------------------------------------------->
<link href="https://fonts.googleapis.com/css?family=Open+Sans&display=swap" rel="stylesheet">
<!--Stylesheet----------------------------------------------------------------------------------->
<link rel=stylesheet href="style.css" type="text/css" media="screen">
<!--Bootstrap------------------------------------------------------------------------------------>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
</head>
<body>
<div class="container">
<nav>
<input type="checkbox" id="nav" class="hidden">
<label for="nav" class="nav-btn">
<i></i>
<i></i>
<i></i>
</label>
<div class="logo">
<img class="logo" src="images/logow.png">
</div>
<div class="nav-wrapper">
<ul>
<li><a class="active"href="index.html">Home</a></li>
<li>Pricing</li>
<li>faq</li>
<li>Contact</li>
</ul>
</div>
</nav>
</div>
<!--TODO Header Content-->
<div class="header">
<h1>Website development<br> made easy</h1>
<h3>Not just a business but a reliable business partner</h3>
<button type="button" class="button button-1">get started</button>
<button type="button" class="button button-2">get a quote</button>
</div>
<!-- TODO Sub Content-->
<div class="sub-content">
<h2>Professional website development</h2>
<p>Semix is a professional website & graphics development company based in South Africa, we can offer modern creative and responsive designs to best suit your needs.</p>
</div>
<!--TODO Services-->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
<div class="services-section">
<div class="inner-width">
<h1 class="section-title">Our Services</h1>
<div class="border"></div>
<div class="services-container">
<div class="service-box">
<div class="service-icon">
<i class="fas fa-wrench"></i>
</div>
<div class="service-title">Technical Support</div>
<div class="service-desc">
Problem with your site? Hosting? We will help you setup your site with the correct hosting plans and domain registration
</div>
</div>
<div class="service-box">
<div class="service-icon">
<i class="fas fa-code"></i>
</div>
<div class="service-title">Web Development</div>
<div class="service-desc">
We create beautiful and functional websites with responsive designs to ensure our work looks great on any device
</div>
</div>
<div class="service-box">
<div class="service-icon">
<i class="fas fa-brush"></i>
</div>
<div class="service-title">Live chat / email</div>
<div class="service-desc">
Make sure your business never sleeps by integrating a contact form and live chat with automatic replies to your amazing site
</div>
</div>
<div class="service-box">
<div class="service-icon">
<i class="fas fa-headset"></i>
</div>
<div class="service-title">Support</div>
<div class="service-desc">
We have amazing support to make sure we can help you in any way possible
</div>
</div>
<div class="service-box">
<div class="service-icon">
<i class="fab fa-searchengin"></i>
</div>
<div class="service-title">SEO</div>
<div class="service-desc">
Search Engine Optimization, make sure your website is being discovered and displayed on Google search results
</div>
</div>
<div class="service-box">
<div class="service-icon">
<i class="fas fa-file-code"></i>
</div>
<div class="service-title">Custom Work</div>
<div class="service-desc">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et eaque ratione rem porro, nihil.
</div>
</div>
</div>
</div>
</div>
<!--TODO button section-->
<div class="button-section">
<button type="button" class="button button-3">Start Your Project</button>
</div>
<div class="footer">
<p>© Copyright Semix 2019</p>
<div class="footer-nav">
Legal|
Terms|
FAQ|
Contact
</div>
<h2>Semix</h2> <img src="images/south-africa.png" alt="sa-logo">
</div>
</html>
body {
font-family: 'Open sans', sans-serif;
height: 100%;
margin: 0;
background: url(images/main-background-header.png);
background-position: center;
background-color: black;
background-repeat: no-repeat;
}
html{
height: 100%;
margin: 0;
padding: 0;
width: 100%,
}
*{
margin:0;
padding:0;
box-sizing: border-box;
word-break: break-all;
}
/*Header*/
.image{
background-position: center;
height: calc(100% + 700px);
width:100%;
background-repeat: no-repeat;
position: absolute;
z-index:-1;
top: -80px;
text-align: center;
}
.header > h1{
font-family: 'Open sansextra-bold', sans-serif;
text-align: center;
font-size: 60px;
text-transform: uppercase;
color: white;
}
.header > h3{
font-family: 'Open sans', sans-serif;
text-align: center;
color: #828282;
}
.header{
position:relative;
text-align:center;
color:white;
padding:10px 0px;
margin-top: 200px;
}
.button {
border: none;
padding: 16px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 20px;
text-transform: uppercase;
-webkit-transition-duration: 0.4s;
transition-duration: 0.4s;
cursor: pointer;
display: inline-block;
flex-direction: column;
justify-content: center;
margin-top: 50px;
}
.button-1 {
background-color: transparent;
color: white;
border: 3px solid white;
text-align: center;
}
.button-2{
background-color: #FF4E00;
color: white;
border: 3px solid #FF4E00;
}
.button-1:hover{
background-color:white;
color: black;
border: 3px solid white;
}
/*Our Services Section*/
.services-section{
background: url(images/services.jpg);
background-size: cover;
padding: 60px 0;
}
.inner-width{
width: 100%;
max-width: 1200px;
margin: auto;
padding: 0 20px;
overflow: hidden;
}
.section-title{
text-align: center;
color: #ddd;
text-transform: uppercase;
font-size: 30px;
}
.border{
width: 160px;
height: 2px;
background: #FF4E00;
margin: 40px auto;
}
.services-container{
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.service-box{
max-width: 33.33%;
padding: 10px;
text-align: center;
color: #ddd;
cursor: pointer;
}
.service-icon{
display: inline-block;
width: 70px;
height: 70px;
border: 3px solid #FF4E00;
color: #fff;
transform: rotate(45deg);
margin-bottom: 30px;
margin-top: 16px;
transition: 0.3s linear;
}
.service-icon i{
line-height: 70px;
transform: rotate(-45deg);
font-size: 26px;
}
.service-box:hover .service-icon{
background: #FF4E00;
color: #ddd;
}
.service-title{
font-size: 18px;
text-transform: uppercase;
margin-bottom: 10px;
}
.service-desc{
font-size: 14px;
}
#media screen and (max-width:960px) {
.service-box{
max-width: 45%;
}
}
#media screen and (max-width:768px) {
.service-box{
max-width: 50%;
}
}
#media screen and (max-width:480px) {
.service-box{
max-width: 100%;
}
}
/*NEW NAV*/
nav {
padding: 8px;
display: inline;
}
.logo {
float: left;
padding: 8px;
margin-left: 16px;
margin-top: 8px;
width: 250px;
height: 70px;
}
nav ul{
float: right;
}
nav ul li {
display: inline-block;
}
nav ul li:not(:first-child) {
margin-left: 48px;
}
nav a.active{
font-weight: bold;
color: #FF4E00;
}
nav ul li:last-child {
margin-right: 24px;
}
nav ul li a {
display: inline-block;
outline: none;
color: white;
text-transform: uppercase;
text-decoration: none;
font-size: 15px;
}
#media screen and (max-width: 864px) {
.logo {
padding: 0;
width: 100px;
height: auto !important;
}
.header{
margin-top: 100px;
}
.header h1{
font-size: 20px;
}
.header h3{
font-size: 17px;
}
.nav-wrapper {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
background: #fff;
opacity: 0;
transition: all 0.2s ease;
}
.nav-wrapper ul {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 100%;
}
.nav-wrapper ul li {
display: block;
float: none;
width: 100%;
text-align: right;
margin-bottom: 10px;
}
.nav-wrapper ul li:nth-child(1) a {
transition-delay: 0.2s;
}
.nav-wrapper ul li:nth-child(2) a {
transition-delay: 0.3s;
}
.nav-wrapper ul li:nth-child(3) a {
transition-delay: 0.4s;
}
.nav-wrapper ul li:nth-child(4) a {
transition-delay: 0.5s;
}
.nav-wrapper ul li:nth-child(5) a {
transition-delay: 0.6s;
}
.nav-wrapper ul li:not(:first-child) {
margin-left: 0;
}
.nav-wrapper ul li a {
padding: 10px 24px;
opacity: 0;
color: #000;
font-size: 14px;
font-weight: 600;
letter-spacing: 1.2px;
transform: translateX(-20px);
transition: all 0.2s ease;
}
.nav-btn {
position: fixed;
right: 10px;
top: 10px;
display: block;
width: 48px;
height: 48px;
cursor: pointer;
z-index: 9999;
border-radius: 50%;
}
.nav-btn i {
display: block;
width: 20px;
height: 2px;
background:white;
border-radius: 2px;
margin-left: 14px;
}
.nav-btn i:nth-child(1) {
margin-top: 16px;
}
.nav-btn i:nth-child(2) {
margin-top: 4px;
opacity: 1;
}
.nav-btn i:nth-child(3) {
margin-top: 4px;
}
}
#nav:checked + .nav-btn {
transform: rotate(45deg);
}
#nav:checked + .nav-btn i {
background: #000;
transition: transform 0.2s ease;
}
#nav:checked + .nav-btn i:nth-child(1) {
transform: translateY(6px) rotate(180deg);
}
#nav:checked + .nav-btn i:nth-child(2) {
opacity: 0;
}
#nav:checked + .nav-btn i:nth-child(3) {
transform: translateY(-6px) rotate(90deg);
}
#nav:checked ~ .nav-wrapper {
z-index: 9990;
opacity: 1;
}
#nav:checked ~ .nav-wrapper ul li a {
opacity: 1;
transform: translateX(0);
}
.hidden {
display: none;
}
.sub-content {
background: #FF4E00;
min-height: 200px;
margin-top: 90px;
text-align: center;
position: relative;
font-family: 'Open sans', sans-serif;
}
.sub-content h2{
color: white;
font-size: 30px;
padding-top: 30px;
text-transform: uppercase;
}
.sub-content p{
color: white;
padding-top: 30px;
}
.button-3 {
background-color: white;
color: black;
border: 3px solid white;
text-align: center;
justify-content: center;
}
.button-3:hover {
background-color: white;
color: black;
border: 3px solid rgb(209, 63, 0);
text-align: center;
justify-content: center;
}
.button-section{
background-color: #FF4E00;
justify-content: center;
position:relative;
text-align:center;
padding-bottom: 50px;
}
.footer{
background-color: #000;
color: white;
text-align: center;
padding-top: 50px;
padding-bottom: 50px;
}
.footer h2{
padding-top: 30px;
}
.footer-nav {
justify-content: center;
text-align: center;
padding-top: 20px;
}
.footer-nav a {
text-decoration: none;
color: white;
padding: 20px;
text-transform: uppercase;
}
#media screen and (max-width: 864px) {
.sub-content h2{
font-size: 20px;
}
}
The issue is that the <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> is in the wrong spot in your HTML.
This tag needs* to be one of the first tags inside the <head> and before the <title> tag and any CSS.
I believe this is because the meta tag is telling the browser how to interpret style properties that would come from #media queries (among other things).
Here is the spec:
https://drafts.csswg.org/css-device-adapt/#viewport-meta
This offers some good info on what the browser should do with the tag, which may lead to some inference to why it behaves the way it does.
*Need documentation to support this vs. this is how it works without breaking.
The size of image that fits into the div is 800 X 600 pixels. But some of the old images (portrait paintings) I have are 300 X 400 pixels. If I change the image size they will lose resolution. Instead, I would like to change div size. Is that possible? If not, is there a workaround?
I am providing code to be able to run the example as suggested
body {
background: #fff;
color: #666666;
font-family: "Open Sans", sans-serif;
}
a {
color: #18d26e;
transition: 0.5s;
}
a:hover, a:active, a:focus {
color: #18d36e;
outline: none;
text-decoration: none;
}
p {
padding: 0;
margin: 0 0 30px 0;
}
h1, h2, h3, h4, h5, h6 {
font-family: "Montserrat", sans-serif;
font-weight: 400;
margin: 0 0 20px 0;
padding: 0;
}
/* Back to top button */
.back-to-top {
position: fixed;
display: none;
background: #18d26e;
color: #fff;
display: inline-block;
width: 44px;
height: 44px;
text-align: center;
line-height: 1;
font-size: 16px;
border-radius: 50%;
right: 15px;
bottom: 15px;
transition: background 0.5s;
z-index: 11;
}
.back-to-top i {
padding-top: 12px;
color: #fff;
}
#media (max-width: 768px) {
.back-to-top {
bottom: 15px;
}
}
/*--------------------------------------------------------------
# Header
--------------------------------------------------------------*/
#header {
padding: 30px 0;
height: 92px;
position: fixed;
left: 0;
top: 0;
right: 0;
transition: all 0.5s;
z-index: 997;
}
#header.header-scrolled {
background: rgba(0, 0, 0, 0.9);
padding: 20px 0;
height: 72px;
transition: all 0.5s;
}
#header #logo {
float: left;
}
#media (min-width: 1024px) {
#header #logo {
padding-left: 60px;
}
}
#header #logo h1 {
font-size: 34px;
margin: 0;
padding: 0;
line-height: 1;
font-family: "Montserrat", sans-serif;
font-weight: 700;
letter-spacing: 3px;
}
#header #logo h1 a, #header #logo h1 a:hover {
color: #fff;
padding-left: 10px;
border-left: 4px solid #18d26e;
}
#header #logo img {
padding: 0;
margin: 0;
}
#media (max-width: 768px) {
#header #logo h1 {
font-size: 28px;
}
#header #logo img {
max-height: 40px;
}
}
img.scaled {
width: 100%;
}
/*--------------------------------------------------------------
# Navigation Menu
--------------------------------------------------------------*/
/* Nav Menu Essentials */
.nav-menu, .nav-menu * {
margin: 0;
padding: 0;
list-style: none;
}
.nav-menu ul {
position: absolute;
display: none;
top: 100%;
left: 0;
z-index: 99;
}
.nav-menu li {
position: relative;
white-space: nowrap;
}
.nav-menu > li {
float: left;
}
.nav-menu li:hover > ul,
.nav-menu li.sfHover > ul {
display: block;
}
.nav-menu ul ul {
top: 0;
left: 100%;
}
.nav-menu ul li {
min-width: 180px;
}
/* Nav Menu Arrows */
.sf-arrows .sf-with-ul {
padding-right: 30px;
}
.sf-arrows .sf-with-ul:after {
content: "\f107";
position: absolute;
right: 15px;
font-family: FontAwesome;
font-style: normal;
font-weight: normal;
}
.sf-arrows ul .sf-with-ul:after {
content: "\f105";
}
/* Nav Meu Container */
#nav-menu-container {
float: right;
margin: 0;
}
#media (min-width: 1024px) {
#nav-menu-container {
padding-right: 60px;
}
}
#media (max-width: 768px) {
#nav-menu-container {
display: none;
}
}
/* Nav Meu Styling */
.nav-menu a {
padding: 0 8px 10px 8px;
text-decoration: none;
display: inline-block;
color: #fff;
font-family: "Montserrat", sans-serif;
font-weight: 700;
font-size: 13px;
text-transform: uppercase;
outline: none;
}
.nav-menu li:hover > a, .nav-menu > .menu-active > a {
color: #18d26e;
}
.nav-menu > li {
margin-left: 10px;
}
.nav-menu ul {
margin: 4px 0 0 0;
padding: 10px;
box-shadow: 0px 0px 30px rgba(127, 137, 161, 0.25);
background: #fff;
}
.nav-menu ul li {
transition: 0.3s;
}
.nav-menu ul li a {
padding: 10px;
color: #333;
transition: 0.3s;
display: block;
font-size: 13px;
text-transform: none;
}
.nav-menu ul li:hover > a {
color: #18d26e;
}
.nav-menu ul ul {
margin: 0;
}
/* Mobile Nav Toggle */
#mobile-nav-toggle {
position: fixed;
right: 0;
top: 0;
z-index: 999;
margin: 20px 20px 0 0;
border: 0;
background: none;
font-size: 24px;
display: none;
transition: all 0.4s;
outline: none;
cursor: pointer;
}
#mobile-nav-toggle i {
color: #fff;
}
#media (max-width: 768px) {
#mobile-nav-toggle {
display: inline;
}
}
/* Mobile Nav Styling */
#mobile-nav {
position: fixed;
top: 0;
padding-top: 18px;
bottom: 0;
z-index: 998;
background: rgba(0, 0, 0, 0.8);
left: -260px;
width: 260px;
overflow-y: auto;
transition: 0.4s;
}
#mobile-nav ul {
padding: 0;
margin: 0;
list-style: none;
}
#mobile-nav ul li {
position: relative;
}
#mobile-nav ul li a {
color: #fff;
font-size: 13px;
text-transform: uppercase;
overflow: hidden;
padding: 10px 22px 10px 15px;
position: relative;
text-decoration: none;
width: 100%;
display: block;
outline: none;
font-weight: 700;
font-family: "Montserrat", sans-serif;
}
#mobile-nav ul li a:hover {
color: #fff;
}
#mobile-nav ul li li {
padding-left: 30px;
}
#mobile-nav ul .menu-has-children i {
position: absolute;
right: 0;
z-index: 99;
padding: 15px;
cursor: pointer;
color: #fff;
}
#mobile-nav ul .menu-has-children i.fa-chevron-up {
color: #18d26e;
}
#mobile-nav ul .menu-has-children li a {
text-transform: none;
}
#mobile-nav ul .menu-item-active {
color: #18d26e;
}
#mobile-body-overly {
width: 100%;
height: 100%;
z-index: 997;
top: 0;
left: 0;
position: fixed;
background: rgba(0, 0, 0, 0.7);
display: none;
}
/* Mobile Nav body classes */
body.mobile-nav-active {
overflow: hidden;
}
body.mobile-nav-active #mobile-nav {
left: 0;
}
body.mobile-nav-active #mobile-nav-toggle {
color: #fff;
}
/*--------------------------------------------------------------
# Sections
--------------------------------------------------------------*/
/* Sections Header
--------------------------------*/
.section-header h3 {
font-size: 32px;
color: #111;
text-transform: uppercase;
text-align: center;
font-weight: 700;
position: relative;
padding-bottom: 15px;
}
.section-header h3::before {
content: '';
position: absolute;
display: block;
width: 120px;
height: 1px;
background: #ddd;
bottom: 1px;
left: calc(50% - 60px);
}
.section-header h3::after {
content: '';
position: absolute;
display: block;
width: 40px;
height: 3px;
background: #18d26e;
bottom: 0;
left: calc(50% - 20px);
}
.section-header p {
text-align: center;
padding-bottom: 30px;
color: #333;
}
/* Section with background
--------------------------------*/
.section-bg {
background: #f7f7f7;
}
/
/* Portfolio Section
--------------------------------*/
#portfolio {
padding: 60px 0;
}
#portfolio #portfolio-flters {
padding: 0;
margin: 5px 0 35px 0;
list-style: none;
text-align: center;
}
#portfolio #portfolio-flters li {
cursor: pointer;
margin: 15px 15px 15px 0;
display: inline-block;
padding: 10px 20px;
font-size: 12px;
line-height: 20px;
color: #666666;
border-radius: 4px;
text-transform: uppercase;
background: #fff;
margin-bottom: 5px;
transition: all 0.3s ease-in-out;
}
#portfolio #portfolio-flters li:hover, #portfolio #portfolio-flters li.filter-active {
background: #18d26e;
color: #fff;
}
#portfolio #portfolio-flters li:last-child {
margin-right: 0;
}
#portfolio .portfolio-wrap {
box-shadow: 0px 2px 12px rgba(0, 0, 0, 0.08);
transition: 0.3s;
}
#portfolio .portfolio-wrap:hover {
box-shadow: 0px 4px 14px rgba(0, 0, 0, 0.16);
}
#portfolio .portfolio-item {
position: relative;
height: 360px;
overflow: hidden;
}
#portfolio .portfolio-item figure {
background: #000;
overflow: hidden;
height: 240px;
position: relative;
border-radius: 4px 4px 0 0;
margin: 0;
}
#portfolio .portfolio-item figure:hover img {
opacity: 0.4;
transition: 0.3s;
}
#portfolio .portfolio-item figure .link-preview, #portfolio .portfolio-item figure .link-details {
position: absolute;
display: inline-block;
visibility: hidden;
line-height: 1;
text-align: center;
width: 36px;
height: 36px;
background: #fff;
border-radius: 50%;
transition: 0.2s;
}
#portfolio .portfolio-item figure .link-preview i, #portfolio .portfolio-item figure .link-details i {
padding-top: 6px;
font-size: 22px;
color: #333;
}
#portfolio .portfolio-item figure .link-preview:hover, #portfolio .portfolio-item figure .link-details:hover {
background: #18d26e;
}
#portfolio .portfolio-item figure .link-preview:hover i, #portfolio .portfolio-item figure .link-details:hover i {
color: #fff;
}
#portfolio .portfolio-item figure .link-preview {
left: calc(50% - 38px);
top: calc(50% - 18px);
}
#portfolio .portfolio-item figure .link-details {
right: calc(50% - 38px);
top: calc(50% - 18px);
}
#portfolio .portfolio-item figure:hover .link-preview {
visibility: visible;
left: calc(50% - 44px);
}
#portfolio .portfolio-item figure:hover .link-details {
visibility: visible;
right: calc(50% - 44px);
}
#portfolio .portfolio-item .portfolio-info {
background: #fff;
text-align: center;
padding: 30px;
height: 90px;
border-radius: 0 0 3px 3px;
}
#portfolio .portfolio-item .portfolio-info h4 {
font-size: 18px;
line-height: 1px;
font-weight: 700;
margin-bottom: 18px;
padding-bottom: 0;
}
#portfolio .portfolio-item .portfolio-info h4 a {
color: #333;
}
#portfolio .portfolio-item .portfolio-info h4 a:hover {
color: #18d26e;
}
#portfolio .portfolio-item .portfolio-info p {
padding: 0;
margin: 0;
color: #b8b8b8;
font-weight: 500;
font-size: 14px;
text-transform: uppercase;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>TITLE</title>
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<meta content="" name="keywords">
<meta content="" name="description">
<!-- Favicons -->
<link href="img/favicon.png" rel="icon">
<link href="img/apple-touch-icon.png" rel="apple-touch-icon">
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,700,700i|Montserrat:300,400,500,700" rel="stylesheet">
<!-- Bootstrap CSS File -->
<link href="lib/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- Libraries CSS Files -->
<link href="lib/font-awesome/css/font-awesome.min.css" rel="stylesheet">
<link href="lib/animate/animate.min.css" rel="stylesheet">
<link href="lib/ionicons/css/ionicons.min.css" rel="stylesheet">
<link href="lib/owlcarousel/assets/owl.carousel.min.css" rel="stylesheet">
<link href="lib/lightbox/css/lightbox.min.css" rel="stylesheet">
<!-- Main Stylesheet File -->
<link href="css/StyleSheet.css" rel="stylesheet">
</head>
<body>
<main id="main">
<section id="portfolio" class="section-bg">
<div class="container">
<header class="section-header">
<h3 class="section-title">Our Portfolio</h3>
</header>
<div class="row">
<div class="col-lg-12">
<ul id="portfolio-flters">
<li data-filter="*" class="filter-active">All</li>
<li data-filter=".filter-app">App</li>
<li data-filter=".filter-card">Card</li>
<li data-filter=".filter-web">Web</li>
</ul>
</div>
</div>
<div class="row portfolio-container">
<div class="col-lg-4 col-md-6 portfolio-item filter-app wow fadeInUp">
<div class="position-relative">
<figure>
<img src="img/portfolio/app1.jpg" class="img-fluid" alt="">
<i class="ion ion-eye scaled"></i>
<i class="ion ion-android-open align-self-lg-center scaled"></i>
<figcaption> figure caption...</figcaption>
</figure>
<div class="portfolio-info">
<h4>App 1</h4>
<p>App</p>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 portfolio-item filter-app wow fadeInUp" data-wow-delay="0.2s">
<div class="portfolio-wrap">
<figure>
<img src="img/portfolio/image2.jpg" class="img-fluid" alt="">
<i class="ion ion-eye"></i>
<i class="ion ion-android-open"></i>
</figure>
</div>
</div>
<div class="col-lg-4 col-md-6 portfolio-item filter-web wow fadeInUp" data-wow-delay="0.1s">
<div class="portfolio-wrap">
<figure>
<img src="img/portfolio/web3.jpg" class="img-fluid" alt="">
<i class="ion ion-eye"></i>
<i class="ion ion-android-open"></i>
</figure>
<div class="portfolio-info">
<h4>Web 3</h4>
<p>Web</p>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 portfolio-item filter-app wow fadeInUp" data-wow-delay="0.2s">
<div class="portfolio-wrap">
<figure>
<img src="img/portfolio/app2.jpg" class="img-fluid" alt="">
<i class="ion ion-eye"></i>
<i class="ion ion-android-open"></i>
</figure>
<div class="portfolio-info">
<h4>App 2</h4>
<p>App</p>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 portfolio-item filter-card wow fadeInUp">
<div class="portfolio-wrap">
<figure>
<img src="img/portfolio/card2.jpg" class="img-fluid" alt="">
<i class="ion ion-eye"></i>
<i class="ion ion-android-open"></i>
</figure>
<div class="portfolio-info">
<h4>Card 2</h4>
<p>Card</p>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 portfolio-item filter-web wow fadeInUp" data-wow-delay="0.1s">
<div class="portfolio-wrap">
<figure>
<img src="img/portfolio/web2.jpg" class="img-fluid" alt="">
<i class="ion ion-eye"></i>
<i class="ion ion-android-open"></i>
</figure>
<div class="portfolio-info">
<h4>Web 2</h4>
<p>Web</p>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 portfolio-item filter-app wow fadeInUp" data-wow-delay="0.2s">
<div class="portfolio-wrap">
<figure>
<img src="img/portfolio/app3.jpg" class="img-fluid" alt="">
<i class="ion ion-eye"></i>
<i class="ion ion-android-open"></i>
</figure>
<div class="portfolio-info">
<h4>App 3</h4>
<p>App</p>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 portfolio-item filter-card wow fadeInUp">
<div class="portfolio-wrap">
<figure>
<img src="img/portfolio/card1.jpg" class="img-fluid" alt="">
<i class="ion ion-eye"></i>
<i class="ion ion-android-open"></i>
</figure>
<div class="portfolio-info">
<h4>Card 1</h4>
<p>Card</p>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 portfolio-item filter-card wow fadeInUp" data-wow-delay="0.1s">
<div class="portfolio-wrap">
<figure>
<img src="img/portfolio/card3.jpg" class="img-fluid" alt="">
<i class="ion ion-eye"></i>
<i class="ion ion-android-open"></i>
</figure>
<div class="portfolio-info">
<h4>Card 3</h4>
<p>Card</p>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 portfolio-item filter-web wow fadeInUp" data-wow-delay="0.2s">
<div class="portfolio-wrap">
<figure>
<img src="img/portfolio/web1.jpg" class="img-fluid" alt="">
<i class="ion ion-eye"></i>
<i class="ion ion-android-open"></i>
</figure>
<div class="portfolio-info">
<h4>Web 1</h4>
<p>Web</p>
</div>
</div>
</div>
</div>
</div>
</section>
</main>
<i class="fa fa-chevron-up"></i>
<!-- JavaScript Libraries -->
<script src="lib/jquery/jquery.min.js"></script>
<script src="lib/jquery/jquery-migrate.min.js"></script>
<script src="lib/bootstrap/js/bootstrap.bundle.min.js"></script>
<script src="lib/easing/easing.min.js"></script>
<script src="lib/superfish/hoverIntent.js"></script>
<script src="lib/superfish/superfish.min.js"></script>
<script src="lib/wow/wow.min.js"></script>
<script src="lib/waypoints/waypoints.min.js"></script>
<script src="lib/counterup/counterup.min.js"></script>
<script src="lib/owlcarousel/owl.carousel.min.js"></script>
<script src="lib/isotope/isotope.pkgd.min.js"></script>
<script src="lib/lightbox/js/lightbox.min.js"></script>
<script src="lib/touchSwipe/jquery.touchSwipe.min.js"></script>
<!-- Contact Form JavaScript File -->
<script src="contactform/contactform.js"></script>
<!-- Template Main Javascript File -->
<script src="js/main.js"></script>
</body>
</html>
How can I make my website responsive to ANY device/any resolution?
This is my first ever website, so I don't really have much knowledge and experience.
Can modernizer help me do it easily? Which is the easiest and most effective way to do it?
I've tried loading my website on a 720p display and on a mobile phone and it looks horrible.
html {
box-sizing: border-box;
height: 100%;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
body {
font-family: Roboto, Arial;
height: 4000px;
width: 100%;
padding-bottom: 6rem;
margin: 0;
font-size: 1.1em;
min-height: 100%;
position: relative;
}
header {
color: #ffffff;
padding: 0;
margin: 0;
border-bottom: 1px solid #ADADAD;
}
#container {
margin: 0 auto;
padding: 0;
color: #ffffff;
}
#top-mic {
background-color: #F28A00;
margin: 0;
padding: 0;
margin-bottom: 14px;
}
#top-mic ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
#top-mic li {
float: right;
padding: 8px 30px;
}
#top-mic li a {
display: block;
text-decoration: none;
color: #ffffff;
text-align: center;
font-size: 0.6em;
font-weight: bold;
transition: color 0.25s ease;
margin-right: 55px;
}
#top-mic li a:hover {
color: #ADADAD;
}
#logo {
float: left;
margin-left: 240px;
margin-right: 130px;
}
#top-mare-wrap {
margin: 0 auto;
}
#top-mare {
padding: 0;
margin: 0;
margin-bottom: 60px;
}
#top-mare ul {
list-style-type: none;
margin: 0;
padding: 0;
}
#top-mare li {
display: inline;
}
#top-mare li a {
margin-top: 42px;
margin-left: 40px;
padding-right: 20px;
display: inline-block;
text-decoration: none;
color: #ADADAD;
text-align: center;
font-size: 2.1em;
font-weight: bold;
transition: color 0.25s ease;
}
#top-mare li a:hover {
color: #F28A00;
}
#test {
color: black;
}
#container {
min-height: 100%;
/* equal to footer height */
margin-bottom: -142px;
}
#container:after {
content: "";
display: block;
}
.site-footer,
.page-wrap:after {
height: 142px;
}
.site-footer {
background: orange;
}
.footer {
clear: both;
margin-top: 4000px;
right: 0;
bottom: 0;
left: 0;
padding: 1rem;
background-color: #F28A00;
text-align: center;
}
<!DOCTYPE html>
<html lang="en-us" class="no-js">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>x</title>
<link href="css/css.css" rel="stylesheet" />
<link href="css/sshow.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
</head>
<body>
<div id="container">
<div class="shadow">
<header id="top">
<nav id="top-mic">
<ul>
<li>Contact</li>
<li>Despre noi</li>
<li>Locatie</li>
</ul>
</nav>
<a href="#"><img src="img/logo.jpg" alt="davnic" id="logo" width="288" height="115"></img>
</a>
<div id="top-mare-wrap">
<nav id="top-mare">
<ul>
<li>Acasa</li>
<li>Buton1</li>
<li>Buton2</li>
<li>Buton3</li>
<li>Buton4</li>
</ul>
</nav>
</div>
</header>
</div>
<div class="slideshow-container">
<div class="mySlides fade">
<div class="numbertext">1 / 3</div>
<img src="img/img1.jpg" style="width:100%">
</div>
<div class="mySlides fade">
<div class="numbertext">2 / 3</div>
<img src="img/img2.jpg" style="width:100%">
</div>
<div class="mySlides fade">
<div class="numbertext">3 / 3</div>
<img src="img/img3.jpg" style="width:100%">
</div>
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
<script src="js/sshow.js"></script>
<footer class="site-footer">
x
<img src="img/location_1.png" />
</footer>
</div>
</body>
</html>
My nav bar is behind my images when i try and scroll but i don't want to use z index because i have a lightbox that when you click the image it opens to a bigger image and when the bigger image opens if i have a zindex of 2 then it overlaps the big image in my lightbox. Any help would be great!
Edit: I tried putting the lightbox to an index of 9000 when my nav bar is zindex 1 but this happens:
Nav bar above lightbox:
I would like my nav bar to be behind my lightbox but when i scroll the images don't go over my nav bar.
/** LIGHTBOX MARKUP **/
.lightbox {
/** Default lightbox to hidden */
display: none;
/** Position and style */
position: fixed;
z-index: 2;
width: 100%;
height: 100%;
text-align: center;
top: 0;
left: 0;
background: rgba(0,0,0,0.8);
}
.lightbox img {
/** Pad the lightbox image */
max-width: 100%;
max-height: 95%;
margin-top: 2%;
}
.lightbox:target {
/** Remove default browser outline */
outline: none;
/** Unhide lightbox **/
display: block;
}
#wrapper {
width: 90%;
height: 950px;
background-color: rgba(155,155,155,0.05);
margin: auto;
}
#nav-bar {
width: 90%;
height: 60px;
background-color: white;
opacity: 0.8;
position: fixed;
box-shadow: 0 4px 10px -2px rgba(0,0,0,0.1);
z-index: 0;
}
#nav-bar-portfolio {
width: 90%;
height: 60px;
background-color: white;
opacity: 0.8;
position: fixed;
box-shadow: 0 4px 10px -2px rgba(0,0,0,0.1);
}
#main-content-index {
height: 900px;
padding-top: 80px;
padding-left: 20px;
padding-right: 20px;
}
#main-content-portfolio {
height: 100%;
padding-top: 80px;
padding-left: 20px;
padding-right: 20px;
}
.nav-text {
float:left;
padding-top: 10px;
padding-left: 20px;
}
h3 {
font-size: 25px;
font-family: helvetica, sans-serif;
display: inline;
text-align: left;
}
h4 {
display: inline-block;
font-family: helvetica, sans-serif;
font-size: 13px;
}
nav {
padding-right: 20px;
float: right;
box-shadow: solid black 100px;
}
nav li {
display: inline-block;
padding: 15px;
}
nav a {
font-family: helvetica, sans-serif;
font-size: 14px;
color: black;
transition: opacity .5s ease-in-out;
}
nav a:hover {
text-decoration: none;
opacity: 0.2;
}
/* __________________________________________
Main Area
__________________________________________ */
.welcome-banner {
display: block;
margin-left: auto;
margin-right: auto;
}
#portfolio-button {
width: 150px;
height: 50px;
padding-top: 15px;
padding-left: 30px;
background-color: rgba(0, 0, 0, 1);
color: white;
border-radius: 10px;
display: block;
text-decoration: none;
font-family: helvetica, sans-serif;
margin: 40px auto;
transition: opacity .5s ease-in-out;
}
#portfolio-button:hover {
opacity: 0.3;
}
/* __________________________________________
Footer
__________________________________________ */
#footer {
width: 100%;
height: 50px;
text-align: center;
background-color: black;
clear: both;
padding-top: 15px;
}
.div-left {
float: left;
}
.div-left p {
color: white;
font-family: helvetica, sans-serif;
font-size: 13px;
padding-left: 20px;
}
.div-center {
margin: 0 auto;
width: 100%;
}
.div-center p {
color: white;
font-family: helvetica, sans-serif;
font-size: 13px;
}
.div-center a {
color: white;
font-family: helvetica, sans-serif;
font-size: 13px;
padding-left: 10px;
text-decoration: none;
transition: opacity 0.5s ease-in-out;
}
.div-center a:hover {
opacity: 0.3;
}
.div-right {
float: right;
}
.div-right ul li {
display: inline-block;
}
.div-right ul li a {
color: white;
font-family: helvetica, sans-serif;
font-size: 13px;
text-decoration: none;
padding-right: 20px;
transition: opacity 0.5s ease-in-out;
}
.div-right ul li a:hover {
opacity: 0.3
}
/* Portfolio */
.main-box {
background-color: rgba(0, 0,0, 0.05);
width: 300px;
height: 400px;
text-align: center;
float: left;
margin-left: 50px;
margin-top: 10px;
margin-bottom: 20px;
}
.project-icons {
padding: 10px;
filter: grayscale(100%);
-webkit-filter: grayscale(100%);
transition: filter 0.6s ease;
-webkit-transition: -webkit-filter 0.6s ease;
}
.project-icons:hover {
filter: grayscale(0);
-webkit-filter: grayscale(0);
}
.project-text {
padding: 10px;
font-family: helvetica, sans-serif;
font-size: 16px;
}
.project-text-caption{
font-size: 10px;
font-family: helvetica, sans-serif;
}
<!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>
<link rel="stylesheet" type="text/css" href="css/animate.css">
<link rel="stylesheet" type="text/css" href="css/base.css">
<link rel="stylesheet" type="text/css" href="css/styles.css">
</head>
<body>
<div id="wrapper">
<div id="nav-bar">
<div class="nav-text animated">
<h3>Kyle Du Preez</h3>
<h4>| PORTFOLIO</h4>
</div>
<nav>
<ul>
<li> Home </li>
<li> About</li>
<li> Portfolio</li>
<li> Contact</li>
</ul>
</nav>
</div>
<main>
<div id="main-content-portfolio" class="animated fadeIn">
<!-- thumbnail image wrapped in a link
<a href="#img1">
<img src="http://insomnia.rest/images/screens/main.png" class="thumbnail">
</a>
<!-- lightbox container hidden with CSS
<a href="#_" class="lightbox" id="img1">
<img src="http://insomnia.rest/images/screens/main.png">
</a>
-->
<!-- Portfolio 1 -->
<div class="main-box">
<a class="thumbnail" href="#img1"><img class="project-icons" src="images/projects/greek-icon.jpg"></a>
<p class="project-text">Greek Alphabet Poster</p>
<p class="project-text-caption">Typography</p>
</div>
<a href="#_" class="lightbox" id="img1">
<img src="images/projects/greek.jpg">
</a>
<!-- Portfolio 2 -->
<div class="main-box">
<img class="project-icons" src="images/projects/premedia-icon.jpg">
<p class="project-text">Pre Media Poster</p>
<p class="project-text-caption">Large Format</p>
</div>
<!-- Portfolio 3 -->
<div class="main-box">
<img class="project-icons" src="images/projects/mohawkposter-icon.jpg">
<p class="project-text">Hamilton Marathon Poster</p>
<p class="project-text-caption">Typography</p>
</div>
<!-- Portfolio 4 -->
<div class="main-box">
<img class="project-icons" src="images/projects/movieposter-icon.jpg">
<p class="project-text">Movie Poster</p>
<p class="project-text-caption">Large Format</p>
</div>
<!-- Portfolio 5 -->
<div class="main-box">
<img class="project-icons" src="images/projects/crayola-icon.jpg">
<p class="project-text">Crayola Packaging</p>
<p class="project-text-caption">Packaging Design</p>
</div>
<!-- Portfolio 6 -->
<div class="main-box">
<img class="project-icons" src="images/projects/housebooklet-icon.jpg">
<p class="project-text">Laing Homes</p>
<p class="project-text-caption">Brochure Design</p>
</div>
</div>
</main>
<footer>
<div id="footer">
<div class="footer-elements">
<div class="div-left"> <p> 2016 - Kyle Du Preez </p> </div>
<div class="div-right">
<ul>
<li><a class="footer-links" href="#">Home</a></li>
<li><a class="footer-links" href="#">About</a></li>
<li><a class="footer-links" href="#">Portfolio</a></li>
<li><a class="footer-links" href="#">Contact</a></li>
</ul>
</div>
<div class="div-center"> <p> LinkedIn: https://ca.linkedin.com/in/kyledupreez </p> </div>
</div>
</div>
</footer>
</div>
</body>
</html>
If you don't want to use z-index,
I think you need to re-order the sequence of DOM. Thus, move your navigation to the bottom, and add top: 0
http://plnkr.co/edit/53wQYQmvPR3fcdKfoZjI?p=preview
#nav-bar {
width: 90%;
height: 60px;
background-color: white;
opacity: 0.8;
position: fixed;
top: 0;
box-shadow: 0 4px 10px -2px rgba(0,0,0,0.1);
z-index: 0;
}
I have added my html code and also my CSS, I am very confused as to how I would go about making this webpage responsive, so when a user is on a different device the webpage auto scales to their device. (Sorry if this is a repeat question, I was not able to find the answer).
footer {
margin: 50px 0;
}
.fade {
opacity: 1;
transition: opacity .25s ease-in-out;
-moz-transition: opacity .25s ease-in-out;
-webkit-transition: opacity .25s ease-in-out;
}
.fade:hover {
opacity: 0.5;
}
h1 {
margin: .67em 0;
font-size: 2em;
font-family: 'Dosis', sans-serif;
}
body {
font-family: 'Dosis', sans-serif;
font-size: 14px;
line-height: 1.42857143;
color: #333;
background-color: #fff;
padding-right: 5px;
}
body {
max-width: 1000px;
margin: 10px auto;
}
body {
font-family: 'Dosis', sans-serif;
}
body {
background: white;
}
.container {
max-width: 100%;
text-align: center;
}
.centre {
position: relative;
display: inline-block;
float: left;
max-width: 100%;
padding: 50px;
}
ul {
max-width: 100%;
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
max-width: 100%;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
a:hover:not(.active) {
background-color: #111;
}
.active {
background-color: #4CAF50;
}
.accordion {
width: 895px;
height: 485px;
max-width: 100%;
overflow: hidden;
box-shadow: 0 10px 6px -6px #111;
margin: 20px auto
}
.accordion ul {
width: 200%;
max-width: 100%;
}
.accordion li {
position: relative;
display: block;
width: 160px;
max-width: 100%;
float: left;
box-shadow: 0 0 30px 8px #222;
transition: all 0.4s ease .300ms;
}
.accordion ul:hover li {
width: 40px
}
.accordion ul li:hover {
width: 640px
}
.caption {
background: rgba(0, 0, 0, 0.5);
position: absolute;
bottom: 0;
width: 640px
}
.caption a {
display: block;
color: #fff;
text-decoration: none;
font: normal 16px'Lato', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
padding: 10px;
}
.center {
align-content: center;
}
.thumbnail {
display: block;
padding: 4px;
padding-left: 5px;
margin-bottom: 20px;
line-height: 1.42857143;
background-color: #fff;
border: 1px solid #ddd;
border-radius: 4px;
-webkit-transition: border .2s ease-in-out;
-o-transition: border .2s ease-in-out;
transition: border .2s ease-in-out;
}
.thumbnail > img,
.thumbnail a > img {
margin-right: auto;
margin-left: auto;
}
a.thumbnail:hover,
a.thumbnail:focus,
a.thumbnail.active {
border-color: #337ab7;
}
.thumbnail .caption {
padding: 9px;
color: #333;
}
<body>
<nav class="contain">
<div>
<div>
<ul>
<li><a class="active" href="index.html">Home</a>
</li>
<li>Mens Shoes
</li>
<li>Womens Shoes
</li>
<li>Boys Shoes
</li>
<li>Girls Shoes
</li>
</ul>
</div>
</div>
</nav>
<div class="container">
<div>
<div>
<div class="accordion">
<ul>
<li>
<div class="caption">Slide 1
</div>
<a href="#">
<img src='Slider_Image1.jpg' />
</a>
</li>
<li>
<div class="caption">Slide 2
</div>
<a href="#">
<img src='Slider_Image2.jpg' />
</a>
</li>
<li>
<div class="caption">Slide 3
</div>
<a href="#">
<img src='Slider_Image3.jpg' />
</a>
</li>
</ul>
</div>
</div>
<div>
<div class="centre , fade ,">
<div>
<a href="Nike_Shoes1.html">
<img src="Image1.jpg" alt="">
</div>
</div>
<div class="centre , fade">
<div>
<a href="Nike_Trainers.html">
<img src="Image2.jpg" alt="">
</div>
</div>
<div class="centre , fade">
<div>
<img src="Image3.jpg" alt="">
</div>
</div>
<div class="centre , fade">
<div>
<a href="boys_clothing.html">
<img src="Boys_Clothing.jpg" alt="Boys Clothing">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div>
<!-- Footer -->
<footer>
</footer>
</div>
You make a page responsive by adding media queries to the css file, for example:
#media(max-width: 800px){
/* Add mobile styles here */
}
You can see more about media queries here, as there are many configs available: https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries
You can make a responsive webpage by using media queries , Flexible grid-based layout for relative sizing and Flexible images.
this book may help you Responsive Web Design by Ethan Marcotte