My background width don't cover 100% on mobile devices - html
When I use my web-site on mobile devices width of container doesn't cover 100% of body. I set width to 100%, I tried to put min-width on body, but I have white line on right side of the screen. I also tried to change viewport width, but that doesn't work.
*{
margin: 0;
padding: 0;
}
body{
font-family: 'Bai Jamjuree', sans-serif;
overflow-x: hidden;
min-width: 1050px;
}
h1{
color: #535a62;
}
p{
font-weight: 600;
color: #a6a7a9;
}
.header{
background: url("https://via.placeholder.com/1200");
background-size: cover;
height: 300px;
padding: 130px 0 0 0;
}
.logo{
margin: auto;
width: 125px;
height: 125px;
}
.title{
width: 690px;
height: 225px;
margin: auto;
margin-bottom: 100px;
}
.title-text h1{
text-align: center;
margin-bottom: 35px;
font-size: 2.75rem;
}
.title-text p{
text-align: center;
font-size: 1.25rem;
margin-bottom: 50px;
}
.title-buttons{
margin: auto;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 170px;
}
.download-ios button,
.download-mac button{
display: inline;
margin-right: 20px;
height: 50px;
width: 225px;
border-radius: 30px;
outline: none;
border: none;
font-size: 18px;
color: #fff;
padding: 10px 20px;
transition: 0.2s;
}
.download-ios button{
background-color: #26bba5;
border-bottom: 3px solid #18a08c;
}
.download-mac button{
background-color: #6174ff;
border-bottom: 3px solid #5362d7;
}
.computer-div{
margin-top: 500px;
position: relative;
}
.computer-image img{
display: inline;
margin-left: -30px;
width: 900px;
margin-bottom: 100px;
}
.all-searches-container{
position: absolute;
top: 50px;
right: 265px;
}
.search-div{
width: 350px;
}
.search-div h1{
margin-bottom: 15px;
}
.search-div p{
margin-bottom: 50px;
}
.title-img{
margin: auto;
display: flex;
justify-content: center;
align-items: center;
margin-top: 100px;
margin-bottom: 100px;
}
.sections{
position: relative;
display: inline;
margin-top: 200px;
margin-bottom: 200px;
}
.section{
display: inline;
width: 300px;
margin-right: 50px;
}
section h1,
.section p{
text-align: center;
width: 300px;
}
.section h1{
margin-bottom: 15px;
}
.section p{
margin-bottom: 20px;
}
.first h1,
.third h1{
padding-left: 40px;
}
.img-div{
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 20px;
}
/*.first{
position: absolute;
top: 50%;
left: -25%;
transform: translate(-25%, -50%);
}
.second{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.third{
position: absolute;
top: 50%;
left: 100%;
transform: translate(-25%, -50%);
}*/
.web-sites{
margin: auto;
margin-top: 1300px;
width: 100%;
padding-left: 200px;
margin-bottom: 150px;
}
.web-site{
display: inline-block;
width: 100px;
margin-right: 190px;
}
.download-ios :hover{
background-color: #5dccbb;
}
.download-mac :hover{
background-color: #8896ff;
}
.footer{
background-color: #f5f6f8;
padding: 25px 150px 20px 150px;
position: relative;
height: 100%;
}
.footer div,
.footer ul{
display: inline-block;
}
.logo-footer{
height: 100%;
width: 300px;
}
.logo-footer img{
width: 50px;
height: 50px;
}
ul{
list-style: none;
display: inline;
margin-top: 30px;
width: 200px;
}
li{
margin-right: 50px;
margin-bottom: 40px;
transition: 0.2s;
}
.social-media{
position: absolute;
right: 150px;
top: 100px;
}
ul :hover{
color: #33b295;
cursor: pointer;
}
.media-icon{
margin-right: 30px;
}
.media-icon svg :hover{
fill: #33b295;
}
#media screen and (max-width:600px){
.title, .computer-image img, .search-div{
width: 100%;
}
.section{
display: block;
top: 50%;
}
}
<!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">
<link rel="stylesheet" href="style.css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Bai+Jamjuree:wght#400;600&display=swap" rel="stylesheet">
<title>Clipboard</title>
</head>
<body>
<div class="header">
<div class="logo">
<img src="images/logo.svg" alt="">
</div>
</div>
<div class="main">
<div class="title">
<div class="title-text">
<h1>A history of everything you copy</h1>
<p>Clipboard allows you to track and organize everything you copy.
Instantly acces your clipboard on all your devices.
</p>
</div>
<div class="title-buttons">
<div class="download-ios">
<button>Download for iOS</button>
</div>
<div class="download-mac">
<button>Download for Mac</button>
</div>
</div>
<div class="title-text">
<h1>Keep track of your snippets</h1>
<p>Clipboard instantly stores any item you copy in the cloud,
meaning you can acces your snippets immediatly on all your devices.
Our Mac and iOS apps will help you organize everything.
</p>
</div>
</div>
<div class="computer-div">
<div class="computer-image">
<img src="images/image-computer.png" alt="">
</div>
<div class="all-searches-container">
<div class="search-div">
<h1>Quick Search</h1>
<p>Easily search your snippets by content,
category, web address, application, and more.
</p>
</div>
<div class="search-div">
<h1>iCLoud Sync</h1>
<p>Instantly saves and syncs snippets across all your devices.</p>
</div>
<div class="search-div">
<h1>Complete History</h1>
<p>Retrive any snippets from the first moment you started using app.</p>
</div>
</div>
<div class="title">
<div class="title-text">
<h1>Acces clipboard anywhere</h1>
<p>Whether you're on the go, or at your computer,
you can acces all your Clipboard snippets in a
few simple clicks.
</p>
</div>
<div class="title-img">
<img src="images/image-devices.png" alt="">
</div>
<div class="title-text">
<h1>Supercharge your workflow</h1>
<p>We've got tools to boost your productivity.</p>
</div>
<div class="sections">
<div class="section first">
<img src="images/icon-blacklist.svg" alt="">
<h1>Create blacklists</h1>
<p>Ensure sensitivite information never
makes its way to your clipboard by excluding
certain sources.
</p>
</div>
<div class="section second">
<img src="images//icon-text.svg" alt="">
<h1>Plain text snippets</h1>
<p>Remove unwanted formatting from copied
text for a consistent look.
</p>
</div>
<div class="section third">
<img src="images/icon-preview.svg" alt="">
<h1>Sneak preview</h1>
<p>Quick preview of all snippets on your Clipboard
for easy acces.
</p>
</div>
</div>
</div>
<div class="web-sites">
<div class="web-site">
<img src="images/logo-google.png" alt="">
</div>
<div class="web-site">
<img src="images/logo-ibm.png" alt="">
</div>
<div class="web-site">
<img src="images/logo-microsoft.png" alt="">
</div>
<div class="web-site">
<img src="images/logo-hp.png" alt="">
</div>
<div class="web-site">
<img src="images/logo-vector-graphics.png" alt="">
</div>
</div>
</div>
<div class="title">
<div class="title-text">
<h1>Clipboard for iOS and Mac OS</h1>
<p>Avaible for free on App Store. Download for Mac or iOS, sync
with iCloud and you're ready to start adding to your clipboard.
</p>
</div>
<div class="title-buttons">
<div class="download-ios"><button>Download for iOS</button></div>
<div class="download-mac"><button>Download for Mac</button></div>
</div>
</div>
</div>
<div class="footer">
<div class="logo-footer">
<img src="images/logo.svg" alt="">
</div>
<ul>
<li>FAQs</li>
<li>Contact Us</li>
</ul>
<ul>
<li>Privacy Policy</li>
<li>Press Kit</li>
</ul>
<ul>
<li>Install Guide</li>
</ul>
<div class="social-media">
<div class="media-icon">
<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"><path d="M22.675 0H1.325C.593 0 0 .593 0 1.325v21.351C0 23.407.593 24 1.325 24H12.82v-9.294H9.692v-3.622h3.128V8.413c0-3.1 1.893-4.788 4.659-4.788 1.325 0 2.463.099 2.795.143v3.24l-1.918.001c-1.504 0-1.795.715-1.795 1.763v2.313h3.587l-.467 3.622h-3.12V24h6.116c.73 0 1.323-.593 1.323-1.325V1.325C24 .593 23.407 0 22.675 0z" fill="#4C545C" fill-rule="nonzero"/></svg> </div>
<div class="media-icon">
<svg width="24" height="20" xmlns="http://www.w3.org/2000/svg"><path d="M24 2.557a9.83 9.83 0 01-2.828.775A4.932 4.932 0 0023.337.608a9.864 9.864 0 01-3.127 1.195A4.916 4.916 0 0016.616.248c-3.179 0-5.515 2.966-4.797 6.045A13.978 13.978 0 011.671 1.149a4.93 4.93 0 001.523 6.574 4.903 4.903 0 01-2.229-.616c-.054 2.281 1.581 4.415 3.949 4.89a4.935 4.935 0 01-2.224.084 4.928 4.928 0 004.6 3.419A9.9 9.9 0 010 17.54a13.94 13.94 0 007.548 2.212c9.142 0 14.307-7.721 13.995-14.646A10.025 10.025 0 0024 2.557z" fill="#4C545C" fill-rule="nonzero"/></svg> </div>
<div class="media-icon">
<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"><path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zM12 0C8.741 0 8.333.014 7.053.072 2.695.272.273 2.69.073 7.052.014 8.333 0 8.741 0 12c0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98C8.333 23.986 8.741 24 12 24c3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98C15.668.014 15.259 0 12 0zm0 5.838a6.162 6.162 0 100 12.324 6.162 6.162 0 000-12.324zM12 16a4 4 0 110-8 4 4 0 010 8zm6.406-11.845a1.44 1.44 0 100 2.881 1.44 1.44 0 000-2.881z" fill="#4C545C" fill-rule="nonzero"/></svg>
</div>
</div>
</div>
</body>
</html>
I tried to change something, that is why my css looks incomplete.
The box-sizing CSS property sets how the total width and height of an element is calculated.
Try setting all elements box-sizing default to border-box like this:
*{
box-sizing: border-box;
}
body{
width: 100vw!important;
}
Here is a full example:
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
font-family: 'Bai Jamjuree', sans-serif;
min-width: 100vw;
width: 100vw!important;
max-width: 100vw;
}
h1{
color: #535a62;
}
p{
font-weight: 600;
color: #a6a7a9;
}
.header{
background: url("https://via.placeholder.com/1200");
background-size: cover;
height: 300px;
padding: 130px 0 0 0;
}
.logo{
margin: auto;
width: 125px;
height: 125px;
}
.title{
width: 690px;
height: 225px;
margin: auto;
margin-bottom: 100px;
}
.title-text h1{
text-align: center;
margin-bottom: 35px;
font-size: 2.75rem;
}
.title-text p{
text-align: center;
font-size: 1.25rem;
margin-bottom: 50px;
}
.title-buttons{
margin: auto;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 170px;
}
.download-ios button,
.download-mac button{
display: inline;
margin-right: 20px;
height: 50px;
width: 225px;
border-radius: 30px;
outline: none;
border: none;
font-size: 18px;
color: #fff;
padding: 10px 20px;
transition: 0.2s;
}
.download-ios button{
background-color: #26bba5;
border-bottom: 3px solid #18a08c;
}
.download-mac button{
background-color: #6174ff;
border-bottom: 3px solid #5362d7;
}
.computer-div{
margin-top: 500px;
position: relative;
}
.computer-image img{
display: inline;
margin-left: -30px;
width: 900px;
margin-bottom: 100px;
}
.all-searches-container{
position: absolute;
top: 50px;
right: 265px;
}
.search-div{
width: 350px;
}
.search-div h1{
margin-bottom: 15px;
}
.search-div p{
margin-bottom: 50px;
}
.title-img{
margin: auto;
display: flex;
justify-content: center;
align-items: center;
margin-top: 100px;
margin-bottom: 100px;
}
.sections{
position: relative;
display: inline;
margin-top: 200px;
margin-bottom: 200px;
}
.section{
display: inline;
width: 300px;
margin-right: 50px;
}
section h1,
.section p{
text-align: center;
width: 300px;
}
.section h1{
margin-bottom: 15px;
}
.section p{
margin-bottom: 20px;
}
.first h1,
.third h1{
padding-left: 40px;
}
.img-div{
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 20px;
}
/*.first{
position: absolute;
top: 50%;
left: -25%;
transform: translate(-25%, -50%);
}
.second{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.third{
position: absolute;
top: 50%;
left: 100%;
transform: translate(-25%, -50%);
}*/
.web-sites{
margin: auto;
margin-top: 1300px;
width: 100%;
padding-left: 200px;
margin-bottom: 150px;
}
.web-site{
display: inline-block;
width: 100px;
margin-right: 190px;
}
.download-ios :hover{
background-color: #5dccbb;
}
.download-mac :hover{
background-color: #8896ff;
}
.footer{
background-color: #f5f6f8;
padding: 25px 150px 20px 150px;
position: relative;
height: 100%;
}
.footer div,
.footer ul{
display: inline-block;
}
.logo-footer{
height: 100%;
width: 300px;
}
.logo-footer img{
width: 50px;
height: 50px;
}
ul{
list-style: none;
display: inline;
margin-top: 30px;
width: 200px;
}
li{
margin-right: 50px;
margin-bottom: 40px;
transition: 0.2s;
}
.social-media{
position: absolute;
right: 150px;
top: 100px;
}
ul :hover{
color: #33b295;
cursor: pointer;
}
.media-icon{
margin-right: 30px;
}
.media-icon svg :hover{
fill: #33b295;
}
#media screen and (max-width:600px){
.title, .computer-image img, .search-div{
width: 100%;
}
.section{
display: block;
top: 50%;
}
}
<!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">
<link rel="stylesheet" href="style.css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Bai+Jamjuree:wght#400;600&display=swap" rel="stylesheet">
<title>Clipboard</title>
</head>
<body>
<div class="header">
<div class="logo">
<img src="images/logo.svg" alt="">
</div>
</div>
<div class="main">
<div class="title">
<div class="title-text">
<h1>A history of everything you copy</h1>
<p>Clipboard allows you to track and organize everything you copy.
Instantly acces your clipboard on all your devices.
</p>
</div>
<div class="title-buttons">
<div class="download-ios">
<button>Download for iOS</button>
</div>
<div class="download-mac">
<button>Download for Mac</button>
</div>
</div>
<div class="title-text">
<h1>Keep track of your snippets</h1>
<p>Clipboard instantly stores any item you copy in the cloud,
meaning you can acces your snippets immediatly on all your devices.
Our Mac and iOS apps will help you organize everything.
</p>
</div>
</div>
<div class="computer-div">
<div class="computer-image">
<img src="images/image-computer.png" alt="">
</div>
<div class="all-searches-container">
<div class="search-div">
<h1>Quick Search</h1>
<p>Easily search your snippets by content,
category, web address, application, and more.
</p>
</div>
<div class="search-div">
<h1>iCLoud Sync</h1>
<p>Instantly saves and syncs snippets across all your devices.</p>
</div>
<div class="search-div">
<h1>Complete History</h1>
<p>Retrive any snippets from the first moment you started using app.</p>
</div>
</div>
<div class="title">
<div class="title-text">
<h1>Acces clipboard anywhere</h1>
<p>Whether you're on the go, or at your computer,
you can acces all your Clipboard snippets in a
few simple clicks.
</p>
</div>
<div class="title-img">
<img src="images/image-devices.png" alt="">
</div>
<div class="title-text">
<h1>Supercharge your workflow</h1>
<p>We've got tools to boost your productivity.</p>
</div>
<div class="sections">
<div class="section first">
<img src="images/icon-blacklist.svg" alt="">
<h1>Create blacklists</h1>
<p>Ensure sensitivite information never
makes its way to your clipboard by excluding
certain sources.
</p>
</div>
<div class="section second">
<img src="images//icon-text.svg" alt="">
<h1>Plain text snippets</h1>
<p>Remove unwanted formatting from copied
text for a consistent look.
</p>
</div>
<div class="section third">
<img src="images/icon-preview.svg" alt="">
<h1>Sneak preview</h1>
<p>Quick preview of all snippets on your Clipboard
for easy acces.
</p>
</div>
</div>
</div>
<div class="web-sites">
<div class="web-site">
<img src="images/logo-google.png" alt="">
</div>
<div class="web-site">
<img src="images/logo-ibm.png" alt="">
</div>
<div class="web-site">
<img src="images/logo-microsoft.png" alt="">
</div>
<div class="web-site">
<img src="images/logo-hp.png" alt="">
</div>
<div class="web-site">
<img src="images/logo-vector-graphics.png" alt="">
</div>
</div>
</div>
<div class="title">
<div class="title-text">
<h1>Clipboard for iOS and Mac OS</h1>
<p>Avaible for free on App Store. Download for Mac or iOS, sync
with iCloud and you're ready to start adding to your clipboard.
</p>
</div>
<div class="title-buttons">
<div class="download-ios"><button>Download for iOS</button></div>
<div class="download-mac"><button>Download for Mac</button></div>
</div>
</div>
</div>
<div class="footer">
<div class="logo-footer">
<img src="images/logo.svg" alt="">
</div>
<ul>
<li>FAQs</li>
<li>Contact Us</li>
</ul>
<ul>
<li>Privacy Policy</li>
<li>Press Kit</li>
</ul>
<ul>
<li>Install Guide</li>
</ul>
<div class="social-media">
<div class="media-icon">
<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"><path d="M22.675 0H1.325C.593 0 0 .593 0 1.325v21.351C0 23.407.593 24 1.325 24H12.82v-9.294H9.692v-3.622h3.128V8.413c0-3.1 1.893-4.788 4.659-4.788 1.325 0 2.463.099 2.795.143v3.24l-1.918.001c-1.504 0-1.795.715-1.795 1.763v2.313h3.587l-.467 3.622h-3.12V24h6.116c.73 0 1.323-.593 1.323-1.325V1.325C24 .593 23.407 0 22.675 0z" fill="#4C545C" fill-rule="nonzero"/></svg> </div>
<div class="media-icon">
<svg width="24" height="20" xmlns="http://www.w3.org/2000/svg"><path d="M24 2.557a9.83 9.83 0 01-2.828.775A4.932 4.932 0 0023.337.608a9.864 9.864 0 01-3.127 1.195A4.916 4.916 0 0016.616.248c-3.179 0-5.515 2.966-4.797 6.045A13.978 13.978 0 011.671 1.149a4.93 4.93 0 001.523 6.574 4.903 4.903 0 01-2.229-.616c-.054 2.281 1.581 4.415 3.949 4.89a4.935 4.935 0 01-2.224.084 4.928 4.928 0 004.6 3.419A9.9 9.9 0 010 17.54a13.94 13.94 0 007.548 2.212c9.142 0 14.307-7.721 13.995-14.646A10.025 10.025 0 0024 2.557z" fill="#4C545C" fill-rule="nonzero"/></svg> </div>
<div class="media-icon">
<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"><path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zM12 0C8.741 0 8.333.014 7.053.072 2.695.272.273 2.69.073 7.052.014 8.333 0 8.741 0 12c0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98C8.333 23.986 8.741 24 12 24c3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98C15.668.014 15.259 0 12 0zm0 5.838a6.162 6.162 0 100 12.324 6.162 6.162 0 000-12.324zM12 16a4 4 0 110-8 4 4 0 010 8zm6.406-11.845a1.44 1.44 0 100 2.881 1.44 1.44 0 000-2.881z" fill="#4C545C" fill-rule="nonzero"/></svg>
</div>
</div>
</div>
</body>
</html>
Related
The smooth scrolling isn’t working on my Html css website
below is the code for both html and css. Please I really need help with this issue and I want a solution why the scrolling effect is not working after i tried using html{
scroll-behavior: smooth;
}.....I have tried also to use some java script short codes but it is still not working. I have designed it to scroll to a specific part of the page after clicking on the menu headings
<html lang="en">
<head>
<title> Anetin Super Structures</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" href="images/logo (1).png">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/css2?family=Kaushan+Script&family=Poppins&display=swap" rel="stylesheet">
</head>
<body>
<!--home section-->
<section id="coverphoto">
<img src="images/logomah.png" class="logo">
<div class="banner-text">
<h1 class="heading">Anetin Super Structures</h1>
<p class="paragraph">Engineering your dreams with us</p>
<div class="banner-btn">
<span></span> Find Out
<span></span> Read More
</div>
</div>
</section>
<div id="sideNav">
<nav>
<ul>
<li>HOME</li>
<li>FEATURES</li>
<li>SERVICES</li>
<li>TESTIMONIALS</li>
<li>ABOUT US</li>
</ul>
</nav>
</div>
<div id="menuBtn">
<img src="/images/menu-button.png" id="menu" >
</div>
<!--features sections-->
<section id="features">
<div class="title-text">
<p>FEATURES</p>
<h1>Why Choose Us</h1>
</div>
<div class="feature-box">
<div class="features">
<h1>Experienced Stuff</h1>
<div class="features-desk">
<div class="features-icon">
<i class="fa fa-shield"></i>
</div>
<div class="features-text">
<p>How we do it! On large scale construction our Architects normally manages the job with a construction manager and a design engineer supervising it.</p>
</div>
</div>
<h1>Pre Booking Online</h1>
<div class="features-desk">
<div class="features-icon">
<i class="fa fa-check-square-o"></i>
</div>
<div class="features-text">
<p>How we do it! On large scale construction our Architects normally manages the job with a construction manager and a design engineer supervising it.</p>
</div>
</div>
<h1>Affordable Cost</h1>
<div class="features-desk">
<div class="features-icon">
<i class="fa fa-usd"></i>
</div>
<div class="features-text">
<p>In every services that we offer we also make sure that they have affordable costs with quality work</p>
</div>
</div>
</div>
<div class="features-img">
<img src="images/feature.jpeg" >
</div>
</div>
</section>
<!--services section-->
<section id="services">
<div class="title-text">
<p>SERVICES</p>
<h1>We Provide Better</h1>
</div>
<div class="service-box">
<div class="single-service">
<img src="images/buildingN.jpeg">
<div class="overlay"></div>
<div class="service-descrip">
<h3>Construction</h3>
<hr>
<p></p>
</div>
</div>
<div class="single-service">
<img src="images/electrical eng.jpeg" >
<div class="overlay"></div>
<div class="service-descrip">
<h3>Electrical Engineering</h3>
<hr>
<p></p>
</div>
</div>
<div class="single-service">
<img src="images/Painting.jpeg" >
<div class="overlay"></div>
<div class="service-descrip">
<h3>Wall Painting</h3>
<hr>
<p>We pair you up with the ideal artist for your project. From wall paintings to wall art ideas for your office or homes - the ideas are endless.</p>
</div>
</div>
<div class="single-service">
<img src="images/pumblingN.jpeg" >
<div class="overlay"></div>
<div class="service-descrip">
<h3>Pumbling</h3>
<hr>
<p> We install, check, and replace fixtures in your home or commercial property to ensure that you obtain high-quality service and materials. Toilets, kitchen and bathroom sinks etc.</p>
</div>
</div>
<div class="single-service">
<img src="images/engineeringdrawings.jpeg" >
<div class="overlay"></div>
<div class="service-descrip">
<h3>Engineering Drawings</h3>
<hr>
<p></p>
</div>
</div>
<div class="single-service">
<img src="images/roofing.jpeg" >
<div class="overlay"></div>
<div class="service-descrip">
<h3>Roofing</h3>
<hr>
<p>Custom Roofs, Ceiling, Material, Installation, Supply and Manufacturing by our professional engineers</p>
</div>
</div>
</div>
</section>
<!--end of services section-->
<!--testimonial section-->
<section id="testimonial">
<div class="title-text">
<p>TESTIMONIALS</p>
<h1>What Client Says</h1>
</div>
<div class="testimonial-row">
<div class="testimonial-column">
<div class="user">
<img src="images/tatenda.jfif">
<div class="user-info">
<h4>TATENDA CHIKOMA <i class="fa fa-twitter"></i></h4>
<small>#taibo87</small>
</div>
</div>
<p>To say we're happy would be an understatement. When Anetin Team builds a home for you, they'll build it with care as if they were doing it for themselves and their families. Anetin Team would definitely be the one to build our next home in Southley Park, Harare.</p>
</div>
<div class="testimonial-column">
<div class="user">
<img src="images/nyasha.jfif">
<div class="user-info">
<h4> NYASHA MUGANHIRE<i class="fa fa-twitter"></i></h4>
<small>#nyaash_16!</small>
</div>
</div>
<p>I love this company. Very easy to talk to them and they really know how to save money and do quality stuff. Anetin Super Structures were great to work with, they did a complete remodel of our kitchen and two bathrooms providing best ceiling fitting and repairing the damaged water system. </p>
</div>
<div class="testimonial-column">
<div class="user">
<img src="images/lorraine.jpg">
<div class="user-info">
<h4>LORRAINE MHASHU <i class="fa fa-twitter"></i></h4>
<small>#lolo30_</small>
</div>
</div>
<p>If you need a new roof please do yourself a favour and get in touch with Anetin Super Structures. I can't say enough how awesome it was working with Anetin, they made the entire roofing beautifully i'm always grateful. </p>
</div>
</div>
</section>
<!--end of testimonial section-->
<!--footer section-->
<section id="footer">
<img src="images/brick layering.jpg" class="footer-img">
<div class="title-text">
<p>CONTACT</p>
<h1>Visit Shop Today</h1>
</div>
<div class="footer-row">
<div class="footer-left">
<h1>Opening Hours</h1>
<p><i class="fa fa-clock-o"></i>Monday to Friday - 8am to 5pm</p>
<p><i class="fa fa-clock-o"></i>Saturday and Sunday - 9am to 3pm</p>
</div>
<div class="footer-right">
<h1>Get In Touch</h1>
<p>7329 Limpopo Rd Zimre Park, Zimbabwe<i class="fa fa-map-marker"></i></p>
<p>anetinsuperstructures#gmail.com</p>
<p><i class="fa fa-phone"></i>+263 77 448 7726</p>
</div>
</div>
<div class="social-links">
<i class="fa fa-facebook"></i>
<i class="fa fa-instagram"></i>
<i class="fa fa-twitter"></i>
<i class="fa fa-youtube-play"></i>
<p>© 2022 Anetin Super Structures. All Rights Reserved</p>
</div>
</section>
<!--end of footer section-->
<script>
var menuBtn = document.getElementById("menuBtn")
var sideNav = document.getElementById("sideNav")
var menu = document.getElementById("menu")
sideNav.style.right== "-250px"
menuBtn.onclick= function(){
if(sideNav.style.right== "-250px"){
sideNav.style.right= "0";
menu.src="/images/cancel.png";
}
else{
sideNav.style.right="-250px";
menu.src="/images/menu-button.png"
}
}
</script>
</body>
</html>
/*CSS*/
*{
margin: 0;
padding: 0;
font-family: 'Poppins', sans-serif;
}
html{
scroll-behavior: smooth;
}
#coverphoto{
background: linear-gradient(rgba(0,0,0,0.5),#967300),url(../images/cover.jpeg);
background-size: cover;
background-position: center;
height: 100vh;
}
.logo{
width: 140px;
position: absolute;
top: 4%;
left: 10%;
}
.banner-text{
text-align: center;
color: #fff;
padding-top: 180px;
}
.banner-text h1{
font-size: 130px;
font-family: 'Kaushan Script', cursive;
animation: anim 2s;
}
.banner-text p{
font-size: 20px;
font-style: italic;
font-weight: 100;
animation: anim 1.5s .5s backwards;
}
#keyframes anim{
0%{
opacity: 0;
}
100%{
opacity: 1;
}
}
.banner-btn{
margin: 70px auto;
animation: anim 2s .8s backwards;
}
.banner-btn a{
width: 150px;
text-decoration: none;
display: inline-block;
margin: 0 10px;
padding: 12px 0;
color: #fff;
border: .5px solid #fff;
position: relative;
z-index: 1;
transition: color .5s;
}
.banner-btn a span{
width: 0%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background: #fff;
z-index: -1;
transition: .5s;
}
.banner-btn a:hover span{
width: 100%;
}
.banner-btn a:hover{
color: black;
}
#sideNav{
width: 250px;
height: 100vh;
position: fixed;
right: -250px;
top: 0;
background: #967300;
z-index: 2;
transition: .5s;
}
nav ul li{
list-style: none;
margin: 50px 20px;
color: #fff;
cursor: pointer;
}
nav ul li a {
text-decoration: none;
}
#menuBtn{
width: 30px;
height: 25px;
background: #967300;
text-align: center;
position: fixed ;
right: 50px;
top: 30px ;
border-radius: 3px;
z-index: 3;
cursor: pointer;
}
.menu-btn img{
width: 20px;
margin-top: 15px;
}
#media screen and (max-width: 770px) {
.banner-text h1{
font-size: 44px;
}
.banner-btn a{
display: block;
margin: 20px auto;
}`enter code here`
}
/* features*/
#features{
width: 100%;
padding: 70px 0;
}
.title-text{
text-align: center;
padding-bottom: 70px;
}
.title-text p{
margin: auto;
font-size: 20px;
color: #ddb01d;
font-weight: bold;
position: relative;
z-index: 1;
display: inline-block;
}
.title-text p::after{
content: '';
width: 50px;
height: 35px;
background: linear-gradient(#ddb01d, #fff) ;
position: absolute;
top: -20px;
left: 0;
z-index: -1;
transform: rotate(10deg);
border-top-left-radius: 35px;
border-bottom-right-radius: 35px;
}
.title-text h1{
font-size: 50px;
}
.feature-box{
width: 80%;
margin:auto ;
display: flex;
flex-wrap: wrap ;
align-items: center;
text-align: center;
}
.features{
flex-basis: 50%;
}
.features-img{
margin: auto;
flex-basis: 50%;
}
.features-img img{
width: 70%;
border-radius: 10px;
}
.features h1{
text-align: left;
margin-bottom: 10px;
font-weight: 100;
color: #967300;
}
.features-desk{
display: flex;
align-items: center;
margin-bottom: 40px;
}
.features-icon .fa{
width: 50px;
height: 50px;
font-size: 30px;
line-height: 50px;
border-radius: 8px;
color: #967300;
border: 1px solid #967300;
}
.features-text p{
padding: 0 20px;
text-align: initial;
}
#media screen and (max-width: 770px) {
.title-text h1{
font-size: 35px;
}
.features{
flex-basis: 100%;
}
.features-img{
flex-basis: 100%;
}
.features-img img{
width: 100%;
}
}
#services{
width: 100%;
padding: 70px 0;
background: #efefef;
}
.service-box{
width: 80%;
display: flex;
flex-wrap: wrap;
justify-content: space-around ;
margin: auto;
}
.single-service{
flex-basis: 48%;
text-align: center;
border-radius: 7px;
margin-bottom: 20px;
color: #fff;
position: relative;
}
.single-service img{
width: 100%;
border-radius: 7px;
}
.overlay{
width: 100%;
height: 100%;
position: absolute;
top: 0;
border-radius: 7px;
cursor: pointer;
background: linear-gradient(rgba(0,0,0,0.5), #967300);
opacity: 0;
transition: 1s;
}
.single-service:hover .overlay{
opacity: 1;
}
.service-descrip{
bottom: 0;
left: 50%;
width: 80%;
position:absolute;
transform: translateX(-50%);
opacity: 0;
transition: 1s;
}
hr{
background: #fff;
height:2px ;
border: 0;
margin: 15px auto;
width: 60%;
}
.service-descrip p{
font-size: 14px;
}
.single-service:hover .service-descrip{
bottom: 40%;
opacity: 1;
}
#media screen and (max-width: 770px) {
.single-service{
flex-basis: 100%;
margin-bottom: 30px;
}
.service-descrip p{
font-size: 12px;
}
hr{
margin: 5px auto;
}
.single-service:hover .service-descrip{
bottom: 25% !important;
}
}
#testimonial{
width: 100%;
padding: 70px 0;
}
.testimonial-row{
width: 80%;
margin: auto;
display: flex;
justify-content: space-between;
align-items: flex-start;
flex-wrap: wrap;
}
.testimonial-column{
flex-basis: 28%;
padding: 10px ;
margin-bottom: 30px;
border-radius: 5px ;
box-shadow: 0 10px 20px 3px #00968814;
cursor: pointer;
transition: transform .5s;
}
.testimonial-column p{
font-size: 14px;
}
.user{
display: flex;
margin: 2px 0px;
align-items: center;
}
.user img{
width: 40px;
margin-right: 20px;
border-radius: 3px;
}
.user-info .fa{
margin-left: 10px;
color: #27c0ff;
font-size: 20px;
}
.user-info small{
color: #009688;
}
.testimonial-column:hover{
transform: translateY(-7px);
}
#media screen and (max-width: 770px){
.testimonial-column{
flex-basis: 100%;
}
}
#footer{
padding: 100px 0 20px;
background: #efefef;
position: relative;
}
.footer-row{
width: 80%;
margin: 0 auto;
display: flex ;
justify-content: space-between;
flex-wrap: wrap;
}
.footer-left, .footer-right{
padding: 10px;
margin-bottom: 20px ;
flex-basis: 45% ;
}
.footer-right{
text-align: right;
}
.footer-row h1{
margin: 10px 0;
}
.footer-row p{
line-height: 35px;
}
.footer-left .fa, .footer-right .fa{
font-size: 20px;
color: #967300;
margin: 10px;
}
.footer-img{
max-width: 370px;
opacity: 0.1;
position:absolute;
left: 50%;
top: 35%;
transform: translate(-50%, -50%);
}
.social-links{
text-align: center;
}
.social-links .fa{
height: 40px;
width: 40px;
font-size: 20px;
line-height: 40px;
border: 1px solid #967300;
margin: 40px 5px 0;
transition: .5s;
}
.social-links .fa:hover{
background: #967300;
color: #fff;
transform: translateY(-7px);
cursor: pointer;
}
.social-links p{
font-size: 12px;
margin-top: 20px;
}
#media screen and (max-width: 770px){
.footer-left, .footer-right{
flex-basis: 100%;
font-size: 14px;
}
.footer-img{
top: 25%;
}
}
I think you must ad scroll-behavior: smooth; to body selector!
You can try this:
// anhor
const menuBtn = document.getElementById("menuBtn");
menuBtn?.addEventListener('click', function(e) {
e.preventDefault();
const target = document.getElementById("some-selector");
target.scrollIntoView({ behavior: "smooth", block: "start" });
});
How do I hide my navbar on scroll in just css and html [closed]
Closed. This question needs details or clarity. It is not currently accepting answers. Want to improve this question? Add details and clarify the problem by editing this post. Closed 1 year ago. Improve this question I am trying to make my navbar hide when I scroll down without using anything other than html and css with minimal js if possible. I can't provide code until later tonight because of project rules.
I figured out that it is very simple, applied in the code below.
<!DOCTYPE html>
<html>
<head>
<!--these are links to the css and little verticle bar icons and also the device width so the navbarand text can work properally at a smaller device width (to an extent)-->
<title>Parker Aucoin</title>
<link rel="icon" href="favicon.ico" type="image/x-icon"/>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/>
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div class="a">
<div id="home">
<div id="navbar">
<script type="text/javascript">
var prevScrollpos = window.pageYOffset;
window.onscroll = function() {
var currentScrollPos = window.pageYOffset;
if (prevScrollpos > currentScrollPos) {
document.getElementById("navbar").style.top = "0";
} else {
document.getElementById("navbar").style.top = "-100px";
}
prevScrollpos = currentScrollPos;
} </script>
<div id="navlinks">
<ul>
<li>Portfolio</li>
<li>Contact</li>
<li>StackOverflow</li>
</ul>
</div>
</div>
<div class="content">
<div class="header">
<p>Parker</p>
</div>
<div class="header2">
<p><span>Aucoin</span></p>
</div>
<div class="header3">
<p>Software Developer</p>
</div>
<div class="gallery-header">
<div id="portfolio">
<h1>Portfolio</h1>
<h3>My GitHub
<a class="github-btn" href="https://github.com/ParkerAucoin/" target="_blank">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-github" viewBox="0 0 16 16">
<path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z"/>
</svg>
</a>
</h3>
</div>
</div>
<p>
<div id="gallery">
<a target="_blank" href="images/portfolio1.jpg">
<img src="images/portfolio1.jpg" alt="Forest" width="100" height="200">
</a>
<div class="desc"></div>
</div>
<div id="gallery">
<a target="_blank" href="images/portfolio5.jpg">
<img src="images/portfolio5.jpg" alt="Northern Lights" width="100" height="200">
</a>
<div class="desc"></div>
</div>
<div id="gallery">
<a target="_blank" href="images/portfolio6.jpg">
<img src="images/portfolio6.jpg" alt="Mountains" width="600" height="400">
</a>
<div class="desc"></div>
</div>
</p>
<div class="spacer">
<p>
<div id="gallery">
<a target="_blank" href="images/portfolio2.jpg">
<img src="images/portfolio2.jpg" alt="Forest" width="100" height="200">
</a>
<div class="desc"></div>
</div>
<div id="gallery">
<a target="_blank" href="images/portfolio3.jpg">
<img src="images/portfolio3.jpg" alt="Northern Lights" width="100" height="200">
</a>
<div class="desc"></div>
</div>
<div id="gallery">
<a target="_blank" href="images/portfolio4.jpg">
<img src="images/portfolio4.jpg" alt="Mountains" width="600" height="400">
</a>
<div class="desc"></div>
</div>
</p>
</div>
<div id="contact">
<h1 id="contact-header">Contact</h1>
<table>
<tr>
<th>
<div id="slideshow">
<div class="slider">
<div class="slides">
<input type="radio" name="radio-btn" id="radio1">
<input type="radio" name="radio-btn" id="radio2">
<input type="radio" name="radio-btn" id="radio3">
<div class="slide first">
<img src="images/portfolio1.jpg" alt="image1">
</div>
<div class="slide">
<img src="images/portfolio2.jpg" alt="image1">
</div>
<div class="slide">
<img src="images/portfolio3.jpg" alt="image1">
</div>
<div class="navigarion-auto">
<div class="auto-btn1"></div>
<div class="auto-btn2"></div>
<div class="auto-btn3"></div>
</div>
</div>
<div class="navigation-manual">
<label for="radio1" class="manual-btn"></label>
<label for="radio2" class="manual-btn"></label>
<label for="radio3" class="manual-btn"></label>
</div>
</div>
<script type="text/javascript">
var counter = 1;
setInterval(function(){
document.getElementById('radio' + counter).checked = true;
counter++;
if (counter > 3){
counter = 1;
}
}, 5000);
</script>
</th>
</tr>
</div>
</div>
</div>
</div>
</body>
</html>
CSS:
#import url('https://fonts.googleapis.com/css2?family=Fugaz+One&display=swap');
*{
margin: 0;
padding: 0;
}
html {
scroll-behavior: smooth;
}
body{
height: 100vh;
background-image: linear-gradient(rgba(0,0,0,0.8),rgba(0,0,0,0.8)),url(images/background.jpg);
background-position: center;
background-size: cover;
overflow-x: hidden;
position: relative;
margin: 0;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
font-family: 'Fugaz One', cursive;
}
#navbar{
transition: .3s;
z-index: 1;
top: 0;
position: sticky;
width: 100%;
overflow: hidden;
display: inline-block;
padding-top: 40px;
font-family: 'Fugaz One', cursive;
}
#navlinks{
float: center;
display: block;
color: #f2f2f2;
text-align: center;
text-decoration: none;
flex: 1;
font-family: 'Fugaz One', cursive;
}
#navlinks ul{
margin-left: 0px;
display: inline-block;
}
#navlinks ul li{
list-style: none;
display: inline-block;
padding: 8px 25px;
}
#navlinks ul a{
color: #fff;
text-decoration: none;
font-size: 15px;
}
#navlinks ul li::after{
content: '';
width: 0;
height: 2px;
background: rgb(255, 100, 52);
display: block;
margin: auto;
transition: .3s;
}
#navlinks ul li:hover::after{
width: 100%;
}
.header{
font-family: 'Fugaz One', cursive;
position: relative;
display: block;
padding-top: 1500px;
color: #fff;
text-align: center;
margin: 0;
}
.header p{
font-size: 100px;
}
.header2{
font-family: 'Fugaz One', cursive;
position: relative;
display: block;
top: -65px;
margin: 0;
color: #fff;
text-align: center;
padding-top: -30px;
}
.header2 p{
font-size: 100px;
}
.header2 span{
color: rgb(255, 100, 52);
}
.header3{
font-family: 'Fugaz One', cursive;
margin: 0;
position: relative;
color: rgb(163, 163, 163);
font-size: 20px;
text-align: center;
top: -100px;
padding-bottom: 250px;
}
#contact{
position: relative;
color: #fff;
text-align: center;
float: center;
margin: 0;
top: 100px;
}
#slideshow{
top: 20px;
align-items: center;
justify-content: center;
position: relative;
margin: 0;
padding-bottom: 20px;
}
.slider{
width: 200px;
height: 300;
border-radius: 10px;
overflow: hidden;
}
.slides{
width: 500%;
height: 400px;
display: flex;
}
.slides input{
display: none;
}
.slide{
width: 20%;
transition: 2s;
}
.slide img{
width: 200px;
height: 500px;
}
.navigation-manual{
position: absolute;
width: 200px;
margin-top: -40px;
display: flex;
justify-content: center;
}
.manual-btn{
border: 2px solid rgb(255, 100, 52);
padding: 5px;
border-radius: 10px;
cursor: pointer;
transition: .3s;
}
.manual-btn:not(:last-child){
margin-right: 10px;
}
.manual-btn:hover{
background: rgb(255, 100, 52);
}
#radio1:checked ~ .first{
margin-left: 0;
}
#radio2:checked ~ .first{
margin-left: -20%;
}
#radio3:checked ~ .first{
margin-left: -40%;
}
.navigation-auto{
position: absolute;
display: flex;
width: 400px;
justify-content: center;
margin-top: 460px;
}
.navigation-auto div{
border: 2px solid rgb(255, 100, 52);
padding: 5px;
border-radius: 10px;
transition: 1s;
}
.navigation-auto div:not(:last-child){
margin-right: 40px;
}
#radio1:checked ~ .navigation-auto .auto-btn1{
background: rgb(255, 100, 52);
}
#radio2:checked ~ .navigation-auto .auto-btn2{
background: rgb(255, 100, 52);
}
#radio3:checked ~ .navigation-auto .auto-btn3{
background: rgb(255, 100, 52);
}
.gallery-header{
font-family: 'Fugaz One', cursive;
text-align: center;
justify-content: center;
align-items: center;
margin: 0;
padding: 20;
}
#portfolio{
color: #fff;
padding-bottom: 50px;
}
#portfolio h3{
color: rgb(163, 163, 163);
}
h3 a{
color: rgb(255, 100, 52);
}
h3 a:hover{
color: rgb(252, 154, 125);
}
#gallery {
margin: 5px;
border: 1px solid #ccc;
float: left;
width: 180px;
height: 300px;
}
#gallery:hover {
border: 1px solid #777;
}
#gallery img {
width: 180px;
height: 300px;
}
div.desc {
padding: 15px;
text-align: center;
}
th.contact-form{
padding: 16px;
position: relative;
margin: 0;
float: center;
}
Why is my css not supported on mobile browsers?
Hello to all and to all,
I'm a Junior developer and its going to be almost two weeks long as I struggle on a topic. My code works very well for the desktop version and on all browsers (Chrome, EI, Firefox, Edge).
On the other hand when I want to view my page on mobile everything works well on safari but for se that is Firefox and chrome is the disaster.
I have the impression that there are classes of my CSS that are not supported. On the other hand when I put the style in inline mode in my page html everything works well, weird all its !!!
Hoping that a savior can help me find a solution. I put you below my html code and css.
Good day everyone.
body{
background-image: url('img/bg.jpg');
background-size: cover;
background-repeat: no-repeat;
font-family:Arial,Helvetica,sans-serif;
height: 1500px;
margin: 0px;
}
.verso{
width: 370px;
height:950px ;
margin-bottom: 0px;
}
.carteModeRecto{
text-align: -moz-center;
-webkit-box-align: center;
width: 370px;
text-align: left;
margin:auto;
text-align: -webkit-center;
}
.recto,.verso{
text-align: -webkit-center;
text-align: -moz-center;
text-align: -ms-center;
margin-bottom: 50px;
overflow: hidden;
margin-top: 50px;
background-color: white;
box-shadow: 1px 1px 5px 1px black;
}
#photoprofil{
background-image: url("img/photo_roger.jpg");
width: 238px;
height: 240px;
border-radius: 150px;
margin-top: 11px;
text-align: left;
margin: auto;
margin-top: 11px;
text-align: left;
margin: auto;
}
#photoprofil2{
border: 3px solid #e5e5e5;
width: 260px;
height: 250px;
border-radius: 150px 150px;
text-align: left;
margin: auto;
padding-top: 10px;
text-align: left;
margin: auto;
padding-top: 10px;
height: 250px;
}
.ligneinfo{
display: flex;
margin-top: 7px;
}
.buton,.buton2{
display: flex;
cursor: pointer;
background-color: #ca3439;
text-align: center;
border-radius: 10px;
color: white;
text-align: left;
margin:0 auto;
outline: none;
border: none;
border: 2px solid #cb353b;
}
.buton{
margin-bottom: 30px;
width: 280px;
height: 50px;
}
.buton2{
background-color: white;
color: #2e4158;
text-align: left;
margin:0 auto;
margin-bottom: 30px;
width: 280px;
height: 52px
}
.down{
margin-top: 8px;
}
.partag{
margin-top: 4px;
width: 42px;
height: 43px;
}
.qrcode{
border: 2px solid #cb353b;
border-radius: 10px;
margin-top: 50px;
}
.buttontext2,.buttontext{
color: #2e4158;
margin-top: 15px;
font-size: 1em;
}
.buttontext{
color: white;
}
.imgbutton,.imgbutton2{
margin-left: 20px;
height: 42px;
width: 58px;
margin-right: 20px;
margin-top: 8px;
}
.imgbutton2{
height: 42px;
width: 43px;
margin-top: 5px;
}
.info{
margin-left: 35px;
}
.nom,.statu{
font-size: 1.6em;
color: #2e4158;
margin-top: 40px;
text-align: center
}
.statu{
margin-bottom: 30px;
margin-top: 0px;
}
.texte{
margin-top: 5px;
margin-left: 10px;
color: #2e4158;
font-size: 1.2em;
}
.carte{
text-align: -moz-center;
-webkit-box-align: center;
width: 370px;
text-align: left;
margin:auto;
text-align: -webkit-center;
}
.carte_visite_recto_verso {
-webkit-perspective: 740px;
perspective: 740px;
margin-top: 50px;
}
.carte_visite_recto_verso .carte {
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.carte_visite_recto_verso .carte .couche {
margin:0px !important;
-webkit-transition: 1s;
transition: 1s;
-webkit-backface-visibility: hidden ;
backface-visibility: hidden ;
}
.carte_visite_recto_verso .carte .recto {
position: absolute;
z-index: 1;
}
.carte_visite_recto_verso .carteModeRecto .recto {
-webkit-transform: rotatey(-0deg);
transform: rotatey(-0deg);
}
.carte_visite_recto_verso .carteModeRecto .verso {
-webkit-transform: rotatey(-180deg);
transform: rotatey(-180deg);
}
.carte_visite_recto_verso .carteModeVerso .recto {
-webkit-transform: rotatey(+180deg);
transform: rotatey(+180deg);
}
.carte_visite_recto_verso .carteModeVerso .verso {
-webkit-transform: rotatey(0deg);
transform: rotatey(0deg);
}
a{
text-decoration: none;
color: #2e4158;
}
.iconinfo{
height: 29px;
width: 25px;
}
.logo{
width: 370px;
padding-top: 30px;
margin-bottom: 20px;
text-align: -webkit-center;
}
.reseaux{
text-align: left;
margin:0 auto;
margin-left:35px;
margin-top: 60px;
padding-bottom: 70px;
}
.qrcode{
text-align: left;
margin:0 auto;
width: 280px;
height: 330px;
}
.imgqr{
text-align: left;
margin:0 auto;
margin-left: 45px;
padding-top: 60px;
}
.imglogo{
width: 300px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta property="og:image" content="img/photo_roger.jpg">
<meta name="image" content="img/photo_roger.jpg">
<meta name="description" content="Location d'imprimantes et photocopieurs,
Location et vente de matériel informatique,Téléphonie Voip et débit internet,Solutions de commutation" />
<link rel="stylesheet" media="screen" type="text/css" href="style.css">
<title>Roger Duarte : Directeur Commercial - Axium Solutions </title>
<link rel="shortcut icon" href="img/logo2.jpg" type="image/jpg"/>
<link rel="icon" href="img/logo2.jpg" type="image/jpg"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<div class="carte_visite_recto_verso" >
<div class="carte carteModeRecto" >
<div class="couche recto" > <!--DEBUT DU MODE RECTO-->
<div class="logo">
<img src="img/logo.jpg" alt="" class="imglogo" >
</div>
<div> <!--PHOTO DU CLIENT-->
<div id="photoprofil2">
<div id="photoprofil"></div>
</div>
</div>
<div class="nom" >
Roger Duarte
</div>
<div class="statu" >
Directeur Commercial
</div>
<a href="download/vcard_roger.vcf" download>
<div class="buton2">
<img src="img/ico_download.jpg" alt="" class="imgbutton">
<div class="buttontext2" > Télécharger le contact</div>
</div></a>
<div class="buton"
onclick="$(document).find('.carte').toggleClass('carteModeVerso');
$(document).find('.carte').toggleClass('carteModeRecto');">
<img src="img/ico_partage.jpg" alt="" class="imgbutton2" >
<div class="buttontext" >Partager</div>
</div>
<div class="info">
<div class="ligneinfo" >
<img src="img/ico_mobile.jpg" alt="" class="iconinfo">
<div class="texte">01 84 00 86 21</div>
</div>
<div class="ligneinfo" >
<img src="img/ico_phone.jpg" alt="" class="iconinfo">
<div class="texte">06 62 68 25 03</div> <!--ZONE INFORMATION-->
</div>
<div class="ligneinfo" >
<img src="img/ico_sms.jpg" alt="" class="iconinfo">
<div class="texte">SMS</div>
</div>
<div class="ligneinfo" >
<img src="img/ico_mail.jpg" alt="" class="iconinfo">
<div class="texte" >Roger.duarte#axiumsolutions.fr</div>
</div>
<div class="ligneinfo" >
<img src="img/ico_web.jpg" alt="" class="iconinfo">
<div class="texte">www.axiumsolutions.fr</div>
</div>
<div class="ligneinfo" >
<img src="img/ico_adresse.jpg" alt="" class="iconinfo" >
<a href="https://goo.gl/maps/HdY48H9MVqRsX3KR9"><div class="texte" style="text-align: left;" >Immeuble Point Cardinal <br>
31 Avenue Pierre Brossolette <br>
91380 CHILLY MAZARIN</a>
</div>
</div>
</div>
<div class="reseaux" >
<div class="ligneinfo" >
<img src="img/ico_linkedin.jpg" alt="" class="iconinfo">
<div class="texte">Linkedin</div>
</div>
<div class="ligneinfo" > <!--ZONE RESEAUX SOCIAUX-->
<img src="img/ico_fb.jpg" alt="" class="iconinfo">
<div class="texte">Facebook</div>
</div>
</div> <!--FIN MODE RECTO-->
</div>
<div class="couche verso" > <!--DEBUT MODE VERSO-->
<div class="logo" >
<img src="img/logo.jpg" alt="" class="imglogo" >
</div>
<a href="vcard_roger.vcf" download>
<div class="buton2" >
<img src="img/ico_download.jpg" alt="" class="imgbutton" >
<div class="buttontext2" >Télécharger le contact</div>
</div></a>
<div class="buton2">
<img src="img/ico_mail2.jpg" alt="" class="imgbutton">
<div class="buttontext2" >Partager Par Mail</div> <!--ZONE DE PARTAGE-->
</div>
<div class="buton2" >
<img src="img/ico_whatsapp.jpg" alt="" class="imgbutton" >
<div class="buttontext2">Partager par Whatsapp</div>
</div>
<div class="buton2" >
<img src="img/ico_copier.jpg" alt="" class="imgbutton">
<div class="buttontext2" >Copier le lien</div>
</div>
<div class="buton"
onclick="$(document).find('.carte').toggleClass('carteModeVerso');
$(document).find('.carte').toggleClass('carteModeRecto');">
<img src="img/ico_retour.jpg" alt="" class="imgbutton2">
<div class="buttontext" >Retour</div>
</div>
<div class="qrcode" >
<img src="img/qr_code.jpg" alt="" class="imgqr" >
</div> <!--FIN DU MODE VERSO-->
</div>
</div>
</body>
</html>
try to use max-width instead of width. Max-width help to change size based on device size.
Example:
.verso{
width:100%;
max-width: 370px;
margin-bottom: 0px;
}
thank you for your help, unfortunately its not changing anything. I can post an image of itself that its gives on my mobile with firefox and chrome. Mobile version on firefox and chrome Mobile version on safari
i spend sometimes for searching about this and i found something , i hope it helpful : checkout the link : https://dev.to/neshaz/how-to-make-all-browsers-understand-your-css-2a4e
CSS: width property is not working for div tags
I am trying to create a Product catalog. I have planned to create multiple rows whereas in each row there would be 2 products each.
Thus in each row the 1st product belongs to product-1 class and 2nd product belongs to product - 2 class.
I have divided the page vertically into two parts using float:left and specified width:50% for both classes.
And also for product-2 class I have specified left:50% (to push it to left)
I have kept display:block , position:relative for both classes.
But the width property seems to not be working.
Code: https://jsfiddle.net/abhaygc/0pfygcbe/
Code Snippet:
body{
height: 100vh;
margin: 0px;
overflow: scroll;
}
.header{
background-color: white;
height:8%;
overflow: hidden;
font-style: "Roboto";
font-size: 25px;
border-bottom: 2px solid;
border-bottom-color: #cccccc;
}
#clear{
clear: both;
}
.logo{
margin-top: 12px;
float: left;
left: 0px;
padding-right: 50px;
}
#logo:hover{
background: transparent;
}
.links{
display: block;
float: right;
margin-right: 10px;
margin-top: 10px;
}
a{
position: relative;
right: 0px;
/*top: 25px;*/
padding-left: 10px;
padding-right: 10px;
color:black;
letter-spacing: 2px;
font-weight: 200;
text-decoration: none;
}
a:hover{
background-color:#cccccc;
}
.content{
display: block;
background-color: white;
height: 92%;
margin-top: 0px;
}
#clear{
clear: both;
}
.image{
display: block;
width: 200px;
height: 200px;
border-style: dashed;
border-color: red;
border-width: 2px;
overflow: hidden;
}
.product-1{
display: block;
position: relative;
padding-left: 10%;
padding-right: 10%;
margin-top: 5%;
float: left;
left: 0px;
width: 40%;
overflow: hidden;
border-style: solid;
border-color: black;
border-width: 1px;
}
.product-2{
display: block;
position: relative;
padding-left: 10%;
padding-right: 10%;
margin-top: 5%;
float: left;
left: 50%;
width: 50%;
overflow: hidden;
border-style: solid;
border-color: black;
border-width: 1px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet'>
<link rel="stylesheet" type="text/css" href="products.css">
<title>Products</title>
</head>
<body>
<div class="header">
<div class="logo">
<img id="logo"src="logo.png" alt="LOGO">
</div>
<div class="links">
Home
Products
Login
Register
Contact
About
</div>
</div>
<div class="content">
<div class="product-1 product">
<div class="image">
<img src="slide-4.jpg" alt="Image 1" />
</div>
<div class="caption">
</div>
</div>
<div class="product-2 product">
<div class="image">
<img src="slide-5.jpg" alt="Image 2"/>
</div>
<div class="caption">
</div>
</div>
<div id="clear"></div>
<div class="product-1 product">
<div class="image">
<img src="slide-6.jpg" alt="Image 3"/>
</div>
<div class="caption">
</div>
</div>
<div class="product-2 product">
<div class="image">
<img src="slide-5.jpg" alt="Image 4"/>
</div>
<div class="caption">
</div>
</div>
</div>
</body>
<script type="text/javascript" src="products.js"></script>
</html>
The width in .product-2 does does not visibly work because of the left: 50% property you have assigned to it. If you remove that, then assigning a width to .product-2 will work. I have added a <div class="row"> to each of your division to distinctly divide them as a row. I assigned float-right to .product-2 and a sample width of 200px so you can see the width working. Hope this answers your question, good luck
body{
height: 100vh;
margin: 0px;
overflow: scroll;
}
.header{
background-color: white;
height:8%;
overflow: hidden;
font-style: "Roboto";
font-size: 25px;
border-bottom: 2px solid;
border-bottom-color: #cccccc;
}
#clear{
clear: both;
}
.logo{
margin-top: 12px;
float: left;
left: 0px;
padding-right: 50px;
}
#logo:hover{
background: transparent;
}
.links{
display: block;
float: right;
margin-right: 10px;
margin-top: 10px;
}
a{
position: relative;
right: 0px;
/*top: 25px;*/
padding-left: 10px;
padding-right: 10px;
color:black;
letter-spacing: 2px;
font-weight: 200;
text-decoration: none;
}
a:hover{
background-color:#cccccc;
}
.content{
display: block;
background-color: white;
height: 92%;
margin-top: 0px;
}
#clear{
clear: both;
}
.image{
display: block;
width: 200px;
height: 200px;
border-style: dashed;
border-color: red;
border-width: 2px;
overflow: hidden;
}
.product-1{
display: block;
position: relative;
padding-left: 10%;
padding-right: 10%;
margin-top: 5%;
float: left;
left: 0px;
width: 175px; /* sample width */
overflow: hidden;
border-style: solid;
border-color: black;
border-width: 1px;
}
.product-2{
display: block;
position: relative;
padding-left: 10%;
padding-right: 10%;
margin-top: 5%;
float: right;
width: 175px; /* sample width */
overflow: hidden;
border-style: solid;
border-color: black;
border-width: 1px;
}
<body>
<div class="header">
<div class="logo">
<img id="logo"src="logo.png" alt="LOGO">
</div>
<div class="links">
Home
Products
Login
Register
Contact
About
</div>
</div>
<div class="content">
<div class="row">
<div class="product-1 product">
<div class="image">
<img src="slide-4.jpg" alt="Image 1" />
</div>
<div class="caption">
</div>
</div>
<div class="product-2 product">
<div class="image">
<img src="slide-5.jpg" alt="Image 2"/>
</div>
<div class="caption">
</div>
</div>
</div>
<div id="clear"></div>
<div class="row">
<div class="product-1 product">
<div class="image">
<img src="slide-6.jpg" alt="Image 3"/>
</div>
<div class="caption">
</div>
</div>
<div class="product-2 product">
<div class="image">
<img src="slide-5.jpg" alt="Image 4"/>
</div>
<div class="caption">
</div>
</div>
</div>
</div>
</body>
body{
height: 100vh;
margin: 0px;
overflow: scroll;
}
.header{
background-color: white;
height:8%;
overflow: hidden;
font-style: "Roboto";
font-size: 25px;
border-bottom: 2px solid;
border-bottom-color: #cccccc;
}
#clear{
clear: both;
}
.logo{
margin-top: 12px;
float: left;
left: 0px;
padding-right: 50px;
}
#logo:hover{
background: transparent;
}
.links{
display: block;
float: right;
margin-right: 10px;
margin-top: 10px;
}
a{
position: relative;
right: 0px;
/*top: 25px;*/
padding-left: 10px;
padding-right: 10px;
color:black;
letter-spacing: 2px;
font-weight: 200;
text-decoration: none;
}
a:hover{
background-color:#cccccc;
}
.content{
display: block;
background-color: white;
height: 92%;
margin-top: 0px;
}
#clear{
clear: both;
}
.image{
display: block;
width: 200px;
height: 200px;
border-style: dashed;
border-color: red;
border-width: 2px;
overflow: hidden;
margin: 0 auto;
}
.product-1{
display: block;
position: relative;
/* padding-left: 10%; */
/* padding-right: 10%; */
margin-top: 5%;
float: left;
/* left: 0px; */
width: 40%;
overflow: hidden;
border-style: solid;
border-color: black;
border-width: 0;
margin: 0 5%;
margin-top: 15px;
box-sizing: border-box;
border-width:1px;
}
.product-2{
display: block;
position: relative;
/* padding-left: 10%; */
/* padding-right: 10%; */
/* margin-top: 15px; */
float: left;
/* left: 50%; */
width: 40%;
overflow: hidden;
border-style: solid;
border-color: black;
border-width: 0;
margin: 0 5%;
margin-top: 15px;
box-sizing: border-box;
border-width:1px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet'>
<link rel="stylesheet" type="text/css" href="products.css">
<title>Products</title>
</head>
<body>
<div class="header">
<div class="logo">
<img id="logo"src="logo.png">
</div>
<div class="links">
Home
Products
Login
Register
Contact
About
</div>
</div>
<div class="content">
<div class="product-1 product">
<div class="image">
<img src="slide-4.jpg" alt="Image 1" />
</div>
<div class="caption">
</div>
</div>
<div class="product-2 product">
<div class="image">
<img src="slide-5.jpg" alt="Image 2"/>
</div>
<div class="caption">
</div>
</div>
<div id="clear"></div>
<div class="product-1 product">
<div class="image">
<img src="slide-6.jpg" alt="Image 3"/>
</div>
<div class="caption">
</div>
</div>
<div class="product-2 product">
<div class="image">
<img src="slide-5.jpg" alt="Image 4"/>
</div>
<div class="caption">
</div>
</div>
</div>
</body>
<script type="text/javascript" src="products.js"></script>
</html>
https://jsfiddle.net/Sampath_Madhuranga/0pfygcbe/23/
This works fine. Let me know if there is any problem.
Thanks
Div overlay on top of other elements even with low z-index value
I have a div overlay with a low z-index value. But even when i apply higher z-index values to my other content the overlay is always on top, when all i want is for it to be over my backgrounds.
Here's my markup:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
color: white;
}
body {
font-family: 'Open Sans', serif;
}
.section {
/* the imp ortant one*/
/* background-attachment: fixed;*/
background-size: cover;
background-position: center;
background-repeat: no-repeat;
height: 100%;
z-index: 15;
}
#section1 {
background-image: url("../images/main_background.png");
}
#section2 {
background-image: url("../images/auction_background.png");
}
#section3 {
background-image: url("../images/convention_background.png");
}
#section4 {
background-image: url("../images/exhibition_background.png")
}
.overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 10;
background-color: rgba(0, 0, 0, 0.8);
}
.topbar {
position: fixed;
display: flex;
justify-content: flex-end;
z-index: 15;
width: 100%;
}
.social-icons span {
display: inline-block;
position: relative;
bottom: 1em;
}
.social-icons * {
margin-left: 0.5em
}
.social-icons {
margin: 5em;
}
.social-icons li {
display: inline-block;
}
.social-icons svg {
fill: rgba( 255, 255, 255, 0.7);
width: 50px;
}
.logo {
/* margin: 10em;*/
z-index: 13;
width: 100%;
}
.logo img {
display: block;
width: 70em;
margin: 0 auto;
margin-top: 10em;
}
.coming-soon {
z-index: 15;
font-size: 5rem;
text-align: center;
margin-top: 1em
}
.coming {
font-weight: lighter;
}
.soon {
font-weight: bolder;
}
.keep {
text-align: center;
margin-top: 1em;
}
.text-block {
width: 50em;
margin-left: 25em;
margin-top: 15em;
}
.title {
font-size: 5rem;
}
.text-block p {
margin-top: 1em;
font-size: 2rem;
font-weight: 100;
}
.text-block span {
font-weight: 900;
}
.email-input {
height: 4em;
width: 30em;
border-color: white;
/* background: black;*/
border-radius: 20em;
margin: 0 auto;
}
.navigation {
position: fixed;
width: 100%;
}
.email-input input {
width: inherit;
height: inherit;
text-align: center;
border-radius: 20em;
background-color: transparent;
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="topbar">
<ul class="social-icons">
<span>Find us on</span>
<li>
<a class="icons" href="#">
<svg version="1.1" id="Facebook_w_x2F__circle" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 20 20" enable-background="new 0 0 20 20" xml:space="preserve">
<path d="M10,0.4c-5.302,0-9.6,4.298-9.6,9.6s4.298,9.6,9.6,9.6s9.6-4.298,9.6-9.6S15.302,0.4,10,0.4z M12.274,7.034h-1.443
c-0.171,0-0.361,0.225-0.361,0.524V8.6h1.805l-0.273,1.486H10.47v4.461H8.767v-4.461H7.222V8.6h1.545V7.726
c0-1.254,0.87-2.273,2.064-2.273h1.443V7.034z"/>
</svg></a>
</li>
<li>
<a class="icons" href="#">
<svg id="Instagram_w_circle" data-name="Instagram w/circle" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 19.19995 19.19995"><title>instagram-with-circle</title><path d="M13.89777,7.05115a1.65591,1.65591,0,0,0-.94891-0.94891,2.76589,2.76589,0,0,0-.92841-0.17218C11.49316,5.906,11.33508,5.90094,10,5.90094S8.50684,5.906,7.97955,5.93005a2.76589,2.76589,0,0,0-.92841.17218,1.65591,1.65591,0,0,0-.94891.94891,2.76589,2.76589,0,0,0-.17218.92841C5.906,8.50684,5.90094,8.665,5.90094,10s0.00507,1.49316.02911,2.02045a2.76553,2.76553,0,0,0,.17218.92841,1.65591,1.65591,0,0,0,.94891.94891,2.76589,2.76589,0,0,0,.92841.17218c0.52716,0.024.6853,0.02911,2.02045,0.02911s1.49329-.00507,2.02045-0.02911a2.76589,2.76589,0,0,0,.92841-0.17218,1.65591,1.65591,0,0,0,.94891-0.94891,2.76553,2.76553,0,0,0,.17218-0.92841c0.024-.52728.02911-0.68536,0.02911-2.02045S14.094,8.50684,14.06995,7.97955A2.76589,2.76589,0,0,0,13.89777,7.05115ZM10,12.56757A2.56757,2.56757,0,1,1,12.56757,10,2.56756,2.56756,0,0,1,10,12.56757ZM12.669,7.931a0.6,0.6,0,1,1,.6-0.6A0.6,0.6,0,0,1,12.669,7.931Z" transform="translate(-0.40002 -0.40002)"/><circle cx="9.59998" cy="9.59998" r="1.66669"/><path d="M10,0.4A9.6,9.6,0,1,0,19.6,10,9.59995,9.59995,0,0,0,10,.4Zm4.96991,11.6615a3.67039,3.67039,0,0,1-.23242,1.21368,2.55612,2.55612,0,0,1-1.46228,1.46228,3.67039,3.67039,0,0,1-1.21368.23242C11.5282,14.99426,11.35791,15,10,15s-1.5282-.00574-2.06152-0.03009a3.67039,3.67039,0,0,1-1.21368-.23242,2.55612,2.55612,0,0,1-1.46228-1.46228,3.67039,3.67039,0,0,1-.23242-1.21368C5.00574,11.5282,5,11.35791,5,10s0.00574-1.5282.03009-2.06152a3.67039,3.67039,0,0,1,.23242-1.21368A2.55612,2.55612,0,0,1,6.72479,5.26251a3.67039,3.67039,0,0,1,1.21368-.23242C8.4718,5.00574,8.64209,5,10,5s1.5282,0.00574,2.06152.03009a3.67039,3.67039,0,0,1,1.21368.23242,2.55612,2.55612,0,0,1,1.46228,1.46228,3.67039,3.67039,0,0,1,.23242,1.21368C14.99426,8.4718,15,8.64209,15,10S14.99426,11.5282,14.96991,12.06152Z" transform="translate(-0.40002 -0.40002)"/></svg>
</a>
</li>
<li>
<a class="icons" href="#">
<svg version="1.1" id="Twitter_w_x2F__circle" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 20 20" enable-background="new 0 0 20 20" xml:space="preserve">
<path d="M10,0.4c-5.302,0-9.6,4.298-9.6,9.6s4.298,9.6,9.6,9.6s9.6-4.298,9.6-9.6S15.302,0.4,10,0.4z M13.905,8.264
c0.004,0.082,0.005,0.164,0.005,0.244c0,2.5-1.901,5.381-5.379,5.381c-1.068,0-2.062-0.312-2.898-0.85
c0.147,0.018,0.298,0.025,0.451,0.025c0.886,0,1.701-0.301,2.348-0.809c-0.827-0.016-1.525-0.562-1.766-1.312
c0.115,0.021,0.233,0.033,0.355,0.033c0.172,0,0.34-0.023,0.498-0.066c-0.865-0.174-1.517-0.938-1.517-1.854V9.033
C6.257,9.174,6.549,9.26,6.859,9.27C6.351,8.93,6.018,8.352,6.018,7.695c0-0.346,0.093-0.672,0.256-0.951
c0.933,1.144,2.325,1.896,3.897,1.977c-0.033-0.139-0.049-0.283-0.049-0.432c0-1.043,0.846-1.891,1.891-1.891
c0.543,0,1.035,0.23,1.38,0.598c0.431-0.086,0.835-0.242,1.2-0.459c-0.141,0.441-0.44,0.812-0.831,1.047
c0.383-0.047,0.747-0.148,1.086-0.299C14.595,7.664,14.274,7.998,13.905,8.264z"/>
</svg>
</a>
</li>
</ul>
</div>
<div id="pagepiling">
<!-- <div class="overlay"></div>-->
<div class="section" id="section1">
<div class="logo">
<img src="./images/auction_logo.png" alt="">
</div>
<div class="coming-soon">
<span class="coming">Coming</span> <span class="soon">Soon</span>
</div>
<div class="keep"><span>Keep in touch</span></div>
</div>
<div class="section" id="section2">
<div class="text-block">
<h1 class="title">Auction</h1>
<p><span>A full service dealer </span>and public auto auction.Experience the thrill of bidding and also tak advantage of available bargains on your next vehicle purchase</p>
</div>
</div>
<div class="section" id="section3">
<div class="text-block">
<h1 class="title">
Convention
</h1>
<p>
<span> A dynamic platform</span> for Business to Business and Business to Consumer relations, featuring the largest gathering of stakeholders in the automotive industry in Abuja.
</p>
</div>
</div>
<div class="section" id="section4">
<div class="text-block">
<h1 class="title">
Exhibition
</h1>
<p>
<span> A wide range</span> of exhibitors from all sectors of the automotive industry displaying products and services for direct marketing and service engagement opportunities
</p>
</div>
</div>
</div>
</body>
</html>
I'm using a java script library - pagepiling.js although i can't see how this could influence my markup. Here's the jsfiddle JsFiddle
Add position: relative to all elements with z-index, because elements with static position can't overlay
Your overlay's z-index is set to 10. That causes the issue it seems. Check below snippet(which i inherited from fiddler) for reference.
$(document).ready(function() {
$('#pagepiling').pagepiling({
verticalCentered: false,
css3: true,
});
});
* {
margin: 0;
padding: 0;
box-sizing: border-box;
color: white;
}
body {
font-family: 'Open Sans', serif;
/* position: relative;*/
}
.section {
/* the imp ortant one*/
/* background-attachment: fixed;*/
background-size: cover;
background-position: center;
background-repeat: no-repeat;
height: 100%;
z-index: 15;
}
#section1 {
background-image: url("https://imgur.com/aeKw80J.png");
}
#section2 {
background-image: url("https://imgur.com/dnVZlHW.png");
}
#section3 {
background-image: url("https://imgur.com/wcmCU0Z.png");
}
#section4 {
background-image: url("https://imgur.com/mhVSOZx.png")
}
.overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
background-color: rgba(0, 0, 0, 0.8);
}
.topbar {
position: fixed;
display: flex;
justify-content: flex-end;
z-index: 15;
width: 100%;
}
.social-icons span {
display: inline-block;
position: relative;
bottom: 1em;
}
.social-icons * {
margin-left: 0.5em
}
.social-icons {
margin: 5em;
}
.social-icons li {
display: inline-block;
}
.social-icons svg {
fill: rgba( 255, 255, 255, 0.7);
width: 50px;
}
.logo {
/* margin: 10em;*/
z-index: 13;
width: 100%;
}
.logo img {
display: block;
width: 70em;
margin: 0 auto;
margin-top: 10em;
}
.coming-soon {
z-index: 15;
font-size: 5rem;
text-align: center;
margin-top: 1em
}
.coming {
font-weight: lighter;
}
.soon {
font-weight: bolder;
}
.keep {
text-align: center;
margin-top: 1em;
}
.text-block {
width: 50em;
margin-left: 25em;
margin-top: 15em;
}
.title {
font-size: 5rem;
}
.text-block p {
margin-top: 1em;
font-size: 2rem;
font-weight: 100;
}
.text-block span {
font-weight: 900;
}
.email-input {
height: 4em;
width: 30em;
border-color: white;
border-radius: 20em;
margin: 0 auto;
}
.navigation {
position: fixed;
width: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pagePiling.js/1.5.4/jquery.pagepiling.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/pagePiling.js/1.5.4/jquery.pagepiling.min.css" rel="stylesheet" />
<body>
<div class="topbar">
<ul class="social-icons">
<span>Find us on</span>
<li>
<a class="icons" href="#">
<svg version="1.1" id="Facebook_w_x2F__circle" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 20 20" enable-background="new 0 0 20 20" xml:space="preserve">
<path d="M10,0.4c-5.302,0-9.6,4.298-9.6,9.6s4.298,9.6,9.6,9.6s9.6-4.298,9.6-9.6S15.302,0.4,10,0.4z M12.274,7.034h-1.443
c-0.171,0-0.361,0.225-0.361,0.524V8.6h1.805l-0.273,1.486H10.47v4.461H8.767v-4.461H7.222V8.6h1.545V7.726
c0-1.254,0.87-2.273,2.064-2.273h1.443V7.034z"/>
</svg></a>
</li>
<li>
<a class="icons" href="#">
<svg id="Instagram_w_circle" data-name="Instagram w/circle" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 19.19995 19.19995"><title>instagram-with-circle</title><path d="M13.89777,7.05115a1.65591,1.65591,0,0,0-.94891-0.94891,2.76589,2.76589,0,0,0-.92841-0.17218C11.49316,5.906,11.33508,5.90094,10,5.90094S8.50684,5.906,7.97955,5.93005a2.76589,2.76589,0,0,0-.92841.17218,1.65591,1.65591,0,0,0-.94891.94891,2.76589,2.76589,0,0,0-.17218.92841C5.906,8.50684,5.90094,8.665,5.90094,10s0.00507,1.49316.02911,2.02045a2.76553,2.76553,0,0,0,.17218.92841,1.65591,1.65591,0,0,0,.94891.94891,2.76589,2.76589,0,0,0,.92841.17218c0.52716,0.024.6853,0.02911,2.02045,0.02911s1.49329-.00507,2.02045-0.02911a2.76589,2.76589,0,0,0,.92841-0.17218,1.65591,1.65591,0,0,0,.94891-0.94891,2.76553,2.76553,0,0,0,.17218-0.92841c0.024-.52728.02911-0.68536,0.02911-2.02045S14.094,8.50684,14.06995,7.97955A2.76589,2.76589,0,0,0,13.89777,7.05115ZM10,12.56757A2.56757,2.56757,0,1,1,12.56757,10,2.56756,2.56756,0,0,1,10,12.56757ZM12.669,7.931a0.6,0.6,0,1,1,.6-0.6A0.6,0.6,0,0,1,12.669,7.931Z" transform="translate(-0.40002 -0.40002)"/><circle cx="9.59998" cy="9.59998" r="1.66669"/><path d="M10,0.4A9.6,9.6,0,1,0,19.6,10,9.59995,9.59995,0,0,0,10,.4Zm4.96991,11.6615a3.67039,3.67039,0,0,1-.23242,1.21368,2.55612,2.55612,0,0,1-1.46228,1.46228,3.67039,3.67039,0,0,1-1.21368.23242C11.5282,14.99426,11.35791,15,10,15s-1.5282-.00574-2.06152-0.03009a3.67039,3.67039,0,0,1-1.21368-.23242,2.55612,2.55612,0,0,1-1.46228-1.46228,3.67039,3.67039,0,0,1-.23242-1.21368C5.00574,11.5282,5,11.35791,5,10s0.00574-1.5282.03009-2.06152a3.67039,3.67039,0,0,1,.23242-1.21368A2.55612,2.55612,0,0,1,6.72479,5.26251a3.67039,3.67039,0,0,1,1.21368-.23242C8.4718,5.00574,8.64209,5,10,5s1.5282,0.00574,2.06152.03009a3.67039,3.67039,0,0,1,1.21368.23242,2.55612,2.55612,0,0,1,1.46228,1.46228,3.67039,3.67039,0,0,1,.23242,1.21368C14.99426,8.4718,15,8.64209,15,10S14.99426,11.5282,14.96991,12.06152Z" transform="translate(-0.40002 -0.40002)"/></svg>
</a>
</li>
<li>
<a class="icons" href="#">
<svg version="1.1" id="Twitter_w_x2F__circle" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 20 20" enable-background="new 0 0 20 20" xml:space="preserve">
<path d="M10,0.4c-5.302,0-9.6,4.298-9.6,9.6s4.298,9.6,9.6,9.6s9.6-4.298,9.6-9.6S15.302,0.4,10,0.4z M13.905,8.264
c0.004,0.082,0.005,0.164,0.005,0.244c0,2.5-1.901,5.381-5.379,5.381c-1.068,0-2.062-0.312-2.898-0.85
c0.147,0.018,0.298,0.025,0.451,0.025c0.886,0,1.701-0.301,2.348-0.809c-0.827-0.016-1.525-0.562-1.766-1.312
c0.115,0.021,0.233,0.033,0.355,0.033c0.172,0,0.34-0.023,0.498-0.066c-0.865-0.174-1.517-0.938-1.517-1.854V9.033
C6.257,9.174,6.549,9.26,6.859,9.27C6.351,8.93,6.018,8.352,6.018,7.695c0-0.346,0.093-0.672,0.256-0.951
c0.933,1.144,2.325,1.896,3.897,1.977c-0.033-0.139-0.049-0.283-0.049-0.432c0-1.043,0.846-1.891,1.891-1.891
c0.543,0,1.035,0.23,1.38,0.598c0.431-0.086,0.835-0.242,1.2-0.459c-0.141,0.441-0.44,0.812-0.831,1.047
c0.383-0.047,0.747-0.148,1.086-0.299C14.595,7.664,14.274,7.998,13.905,8.264z"/>
</svg>
</a>
</li>
</ul>
</div>
<div id="pagepiling">
<div class="overlay"></div>
<div class="section" id="section1">
<div class="logo">
<img src="https://imgur.com/GgfKM8n.png" alt="">
</div>
<div class="coming-soon">
<span class="coming">Coming</span> <span class="soon">Soon</span>
</div>
<div class="navigation">
<div class="keep"><span>Keep in touch</span></div>
<!-- <input type="text">-->
</div>
</div>
<div class="section" id="section2">
<div class="text-block">
<h1 class="title">Auction</h1>
<p><span>A full service dealer </span>and public auto auction.Experience the thrill of bidding and also tak advantage of available bargains on your next vehicle purchase</p>
</div>
</div>
<div class="section" id="section3">
<div class="text-block">
<h1 class="title">
Convention
</h1>
<p>
<span> A dynamic platform</span> for Business to Business and Business to Consumer relations, featuring the largest gathering of stakeholders in the automotive industry in Abuja.
</p>
</div>
</div>
<div class="section" id="section4">
<div class="text-block">
<h1 class="title">
Exhibition
</h1>
<p>
<span> A wide range</span> of exhibitors from all sectors of the automotive industry displaying products and services for direct marketing and service engagement opportunities
</p>
</div>
</div>