I am doing a side project about a movie website. I designed an RWD navbar as following. When I downsize the screen to the break point which is 576px, the mobile-version navbar would pop up automatically then hide. The result can be seen if running the snippet then expand and collapse the window. I guess the checkbox causes this issue but not really sure. Could someone help me with this issue, please? Thank you!
* {
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: 'Nunito', sans-serif;
}
.wrap {
width: 100%;
}
header {
height: 100px;
background: #000;
padding: 0 10px;
color: #fff;
display: flex;
align-items: center;
position: relative;
}
#checked {
visibility: hidden;
z-index: -9999;
position: absolute;
}
#checked:checked ~.navbar {
right: 0;
}
.logo {
height: 60%;
vertical-align: middle;
}
.navbar{
margin-left: auto;
font-size: 0;
position: fixed;
width: 100%;
height: 100vh;
background: #000;
right: -100%;
top: 0;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
transition: .5s;
z-index: 999;
}
.navbar a {
display: block;
margin: 20px 0;
transition: .4s;
}
.navbar a:hover, .hideBtn:hover {
color: #3498db;
}
.navbar a,
.hideBtn, .showBtn {
font-size: 20px;
padding: 0 10px;
text-decoration: none;
color: #fff;
}
.showBtn {
position: absolute;
top: 37px;
right: 10px;
}
.showcase {
position: relative;
background: url("./image/photo-1517604931442-7e0c8ed2963c.jpg");
background-size: cover;
background-repeat: no-repeat;
background-position: center;
width: 100%;
height: calc(100vh - 60px);
display: flex;
justify-content: center;
align-items: center;
}
.showcase .mask {
position: absolute;
width: 100%;
height: 100%;
background-color: #000;
z-index: 1;
opacity: 0.5;
}
.showcase .txt,
.showcase .slogan {
position: absolute;
color: #fff;
z-index: 2;
font-family: 'Nunito', sans-serif;
font-weight: bold;
font-size: 3em;
}
.showcase .slogan {
font-size: 1.2em;
bottom: 35%;
}
.service {
display: grid;
grid-template-rows: repeat(3, 1fr);
background-color: #000;
grid-gap:20px;
padding: 30px 50px;
}
.service a {
display: flex;
width: auto;
flex-flow: column nowrap;
justify-content: center;
align-items: center;
cursor: pointer;
text-decoration: none;
}
.service a img {
width: 30%;
}
.service a p {
color: #fff;
font-size: 1.5em;
font-weight: bolder;
margin: 10px;
}
.content {
display: grid;
grid-template-rows: repeat(3, 1fr);
grid-template-columns: 1fr;
grid-gap: 0px;
}
.content div {
width: 100%;
text-align: center;
font-size: 1.5em;
}
.content div:nth-child(even) {
background-color: #000;
color: #fff;
}
.content div img {
width: 100%;
}
.content div p {
padding: 10px;
}
footer {
display: flex;
flex-direction: column;
width: 100%;
}
.contact-info {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
padding: 20px;
background-color: #000;
}
.contact-txt {
display: flex;
flex-flow: column nowrap;
width: 50%;
color: #fff;
}
footer #social-media img{
width: 30px;
margin: 0 5px;
}
.copyright {
text-align: center;
}
#media screen and (min-width: 576px) {
.showBtn, .navbar .hideBtn {
display: none;
}
.navbar{
margin-left: auto;
font-size: 0;
position: relative;
width: auto;
height: 100%;
background: #000;
right: 0;
top: 0;
display: flex;
justify-content: flex-end;
align-items: center;
flex-direction: row;
transition: none;
z-index: 0;
}
.showcase .txt {
font-size: 4em;
}
.showcase .slogan {
font-size: 2em;
}
.service {
display: grid;
grid-template-rows: 1fr;
grid-template-columns: repeat(3, 1fr);
}
.content {
display: grid;
grid-template-rows: repeat(3, 1fr);
}
.content div {
display: grid;
grid-template-columns: 1fr 1fr;
align-items: center;
font-size: 1.2em;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Movie List</title>
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css2?family=Nunito:wght#600&display=swap" rel="stylesheet">
</head>
<body>
<div class="wrap">
<header>
<img class="logo" src="./image/media.svg" />
<input type="checkbox" id="checked">
<label for="checked" class="showBtn">
<i class="fas fa-bars"></i>
</label>
<nav class="navbar">
About
Explore
Contact us
<label for="checked" class="hideBtn">
<i class="fas fa-times"></i>
</label>
</nav>
</header>
<div class="showcase">
<div class="mask"></div>
<h1 class="txt">HOME CINEMA</h1>
<h2 class="slogan">Experience Cinema at home</h2>
</div>
<div class="service">
<a href="#subscribe-info">
<img src="./image/communications.svg" alt="">
<p>$99 / month</p>
</a>
<a href="#vr-info">
<img src="./image/electronics.svg" alt="">
<p>Virtual Reality</p>
</a>
<a href="#unlimited-info">
<img src="./image/arrows.svg" alt="">
<p>Unlimited Watch</p>
</a>
</div>
<div class="content">
<div id="subscribe-info">
<img src="./image/photo-1543536448-d209d2d13a1c.jpg" alt="">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendis necessitatibus ratione, ut sunt
voluptatibus totam a repudiandae enim nihil beatae ducimus aliquid! Et, beatae reprehenderit aspernatur est
hic commodi expedita.</p>
</div>
<div id="vr-info">
<img src="./image/pexels-photo-3391378.jpeg" alt="">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Neque possimus facere ipsum unde saepe maxime
voluptatem tempora sint pariatur at, nobis ipsam necessitatibus similique maiores, reiciendis repudiandae
voluptatum, cumque repellat.</p>
</div>
<div id="unlimited-info">
<img src="./image/pexels-photo-3912397.jpeg" alt="">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Est, nesciunt veniam, reprehenderit, fugiat nemo
fugit natus dicta maxime delectus ut quos et mollitia obcaecati pariatur. Rerum minima delectus sint ex?</p>
</div>
</div>
<footer>
<div class="contact-info">
<div class="contact-txt">
<p>hola#jamondetaiwan.com</p>
<p>+886 2771 5412</p>
<p>2F., No. 2, Ln. 179, Kanghu Rd., Neihu Dist., Taipei City 114, Taiwan (R.O.C.)</p>
</div>
<div id="social-media">
<img src="./image/fb.svg" alt="">
<img src="./image/ig.svg" alt="">
<img src="./image/youtube.svg" alt="">
</div>
</div>
<div class="copyright">
</div>
</footer>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/js/all.min.js"></script>
</body>
</html>
This arises due to the CSS transition: .5s; in .navbar; when you reach the breakpoint, you are changing the right position and CSS is animating it. To avoid this, specify the properties you want to animate or add the transition property using JavaScript before you show the menu. For example, using jQuery:
$(".navbar").css("transition", ".5s");
Edit: I missed the CSS selector that is causing the animation and so assumed it was jQuery.
To address the issue with just HTML/CSS, you can create a copy of the navbar and use display: none;. The following snippet should work; I have added a copy of the navbar and added the classes .navbar-big and .navbar-small. This allow us to use the display property to hide the navbar we don't want to show based on the breakpoint, and set transition: right .5s; for .navbar-small.
* {
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: 'Nunito', sans-serif;
}
.wrap {
width: 100%;
}
header {
height: 100px;
background: #000;
padding: 0 10px;
color: #fff;
display: flex;
align-items: center;
position: relative;
}
#checked {
visibility: hidden;
z-index: -9999;
position: absolute;
}
#checked:checked ~.navbar {
right: 0;
transition: .5s;
}
.logo {
height: 60%;
vertical-align: middle;
}
.navbar {
margin-left: auto;
font-size: 0;
position: fixed;
width: 100%;
height: 100vh;
background: #000;
right: -100%;
top: 0;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
z-index: 999;
}
.navbar-small {
transition: right .5s;
}
.navbar-big {
display: none;
}
.navbar a {
display: block;
margin: 20px 0;
transition: .4s;
}
.navbar a:hover, .hideBtn:hover {
color: #3498db;
}
.navbar a,
.hideBtn, .showBtn {
font-size: 20px;
padding: 0 10px;
text-decoration: none;
color: #fff;
}
.showBtn {
position: absolute;
top: 37px;
right: 10px;
}
.showcase {
position: relative;
background: url("./image/photo-1517604931442-7e0c8ed2963c.jpg");
background-size: cover;
background-repeat: no-repeat;
background-position: center;
width: 100%;
height: calc(100vh - 60px);
display: flex;
justify-content: center;
align-items: center;
}
.showcase .mask {
position: absolute;
width: 100%;
height: 100%;
background-color: #000;
z-index: 1;
opacity: 0.5;
}
.showcase .txt,
.showcase .slogan {
position: absolute;
color: #fff;
z-index: 2;
font-family: 'Nunito', sans-serif;
font-weight: bold;
font-size: 3em;
}
.showcase .slogan {
font-size: 1.2em;
bottom: 35%;
}
.service {
display: grid;
grid-template-rows: repeat(3, 1fr);
background-color: #000;
grid-gap:20px;
padding: 30px 50px;
}
.service a {
display: flex;
width: auto;
flex-flow: column nowrap;
justify-content: center;
align-items: center;
cursor: pointer;
text-decoration: none;
}
.service a img {
width: 30%;
}
.service a p {
color: #fff;
font-size: 1.5em;
font-weight: bolder;
margin: 10px;
}
.content {
display: grid;
grid-template-rows: repeat(3, 1fr);
grid-template-columns: 1fr;
grid-gap: 0px;
}
.content div {
width: 100%;
text-align: center;
font-size: 1.5em;
}
.content div:nth-child(even) {
background-color: #000;
color: #fff;
}
.content div img {
width: 100%;
}
.content div p {
padding: 10px;
}
footer {
display: flex;
flex-direction: column;
width: 100%;
}
.contact-info {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
padding: 20px;
background-color: #000;
}
.contact-txt {
display: flex;
flex-flow: column nowrap;
width: 50%;
color: #fff;
}
footer #social-media img{
width: 30px;
margin: 0 5px;
}
.copyright {
text-align: center;
}
#media screen and (min-width: 576px) {
.showBtn, .navbar .hideBtn {
display: none;
}
.navbar {
margin-left: auto;
font-size: 0;
position: relative;
width: auto;
height: 100%;
background: #000;
right: 0;
top: 0;
display: flex;
justify-content: flex-end;
align-items: center;
flex-direction: row;
transition: none;
z-index: 0;
}
.navbar-small {
display: none;
}
.showcase .txt {
font-size: 4em;
}
.showcase .slogan {
font-size: 2em;
}
.service {
display: grid;
grid-template-rows: 1fr;
grid-template-columns: repeat(3, 1fr);
}
.content {
display: grid;
grid-template-rows: repeat(3, 1fr);
}
.content div {
display: grid;
grid-template-columns: 1fr 1fr;
align-items: center;
font-size: 1.2em;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Movie List</title>
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css2?family=Nunito:wght#600&display=swap" rel="stylesheet">
</head>
<body>
<div class="wrap">
<header>
<img class="logo" src="./image/media.svg" />
<input type="checkbox" id="checked">
<label for="checked" class="showBtn">
<i class="fas fa-bars"></i>
</label>
<nav class="navbar navbar-big">
About
Explore
Contact us
<label for="checked" class="hideBtn">
<i class="fas fa-times"></i>
</label>
</nav>
<nav class="navbar navbar-small">
About
Explore
Contact us
<label for="checked" class="hideBtn">
<i class="fas fa-times"></i>
</label>
</nav>
</header>
<div class="showcase">
<div class="mask"></div>
<h1 class="txt">HOME CINEMA</h1>
<h2 class="slogan">Experience Cinema at home</h2>
</div>
<div class="service">
<a href="#subscribe-info">
<img src="./image/communications.svg" alt="">
<p>$99 / month</p>
</a>
<a href="#vr-info">
<img src="./image/electronics.svg" alt="">
<p>Virtual Reality</p>
</a>
<a href="#unlimited-info">
<img src="./image/arrows.svg" alt="">
<p>Unlimited Watch</p>
</a>
</div>
<div class="content">
<div id="subscribe-info">
<img src="./image/photo-1543536448-d209d2d13a1c.jpg" alt="">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendis necessitatibus ratione, ut sunt
voluptatibus totam a repudiandae enim nihil beatae ducimus aliquid! Et, beatae reprehenderit aspernatur est
hic commodi expedita.</p>
</div>
<div id="vr-info">
<img src="./image/pexels-photo-3391378.jpeg" alt="">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Neque possimus facere ipsum unde saepe maxime
voluptatem tempora sint pariatur at, nobis ipsam necessitatibus similique maiores, reiciendis repudiandae
voluptatum, cumque repellat.</p>
</div>
<div id="unlimited-info">
<img src="./image/pexels-photo-3912397.jpeg" alt="">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Est, nesciunt veniam, reprehenderit, fugiat nemo
fugit natus dicta maxime delectus ut quos et mollitia obcaecati pariatur. Rerum minima delectus sint ex?</p>
</div>
</div>
<footer>
<div class="contact-info">
<div class="contact-txt">
<p>hola#jamondetaiwan.com</p>
<p>+886 2771 5412</p>
<p>2F., No. 2, Ln. 179, Kanghu Rd., Neihu Dist., Taipei City 114, Taiwan (R.O.C.)</p>
</div>
<div id="social-media">
<img src="./image/fb.svg" alt="">
<img src="./image/ig.svg" alt="">
<img src="./image/youtube.svg" alt="">
</div>
</div>
<div class="copyright">
</div>
</footer>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/js/all.min.js"></script>
</body>
</html>
Related
/* #import url("https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Noto+Serif&family=Roboto:wght#500&display=swap"); */
#import url("https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Kanit&family=Montserrat:ital,wght#1,200&family=Noto+Serif&family=Oswald:wght#300;400&family=Roboto+Mono:ital,wght#0,500;1,400&family=Roboto:ital,wght#1,900&display=swap");
* {
padding: 0;
margin: 0;
font-family: calibri;
box-sizing: border-box;
}
html {
font-size: 62.5%;
height: 100%;
scroll-behavior: smooth !important;
}
body {
line-height: 1.4;
font-weight: 300;
position: relative;
font-size: 1.6rem;
height: fit-content;
}
.container {
max-width: 120rem;
margin: 0 auto;
padding: 0 2rem;
}
header {
background-color: #3498db;
position: sticky;
top: 0;
z-index: 100;
box-shadow: 0.5rem 0.5rem 0.5rem rgba(0, 0, 0, 0.5);
/* width: 100%; */
/* min-height: 100%; */
}
ul {
list-style: none;
}
a {
text-decoration: none;
color: black;
font-weight: 40rem;
font-size: 2ren;
}
nav {
display: flex;
justify-content: space-between;
place-items: center;
/* height: 15vh; */
}
nav ul {
display: flex;
flex-direction: row;
gap: 2.2rem;
}
nav ul li {
border-bottom: 0.2rem solid transparent;
transition: 0.2s ease-in;
}
nav ul li:hover {
border-bottom: 0.2rem solid #1b0058;
transition: 0.2s ease-in;
}
.logo {
font-size: 3rem;
font-family: "Noto Serif", serif;
}
.hero-section {
grid-template-columns: repeat(3, 1fr);
background-image: url(../images/Red\ background.jpg);
background-position: center;
background-size: cover;
min-height: 100vh;
width: 100%;
color: white;
}
.hero-section-data {
padding-left: 7rem;
padding-top: 7.5rem;
padding-right: 5rem;
}
.hero-section .container {
display: flex;
justify-content: space-between;
place-items: center;
flex-direction: row;
padding: 3rem 1rem;
flex-direction: row;
}
.hero-section-data h1 {
font-size: 5rem;
font-weight: 500;
line-height: 1.2;
}
.hero-section-data p {
margin: 2rem 0;
padding-bottom: 2rem;
font-size: 1.8rem;
}
.hero-section button {
padding: 1rem 1rem;
background: orange;
border-radius: 1rem;
}
.hero-section button:hover {
color: white;
transition: 0.3s ease-in;
/* transform: scale(1.2) translateY(10px); */
}
.hero-section .image img {
width: 200rem;
max-width: 100%;
position: relative;
left: 5rem;
}
.features-section {
padding-top: 3rem;
background-color: #9df9ef;
width: 100%;
}
.features-section .container {
display: flex;
align-items: center;
justify-content: center;
text-align: center;
}
.features-section h2 {
padding-bottom: 2rem;
}
.features-section h3 {
font-family: "Oswald", sans-serif;
padding-bottom: 2rem;
font-size: 5rem;
}
.features-section h5 {
padding-bottom: 2rem;
}
.features-section button {
padding: 0.5rem 1.5rem;
background-color: crimson;
color: white;
font-size: 20px;
}
.features-section button:hover {
opacity: 0.8;
transition: 0.3s ease-in;
}
.features-watch img {
width: 50rem;
max-width: 100%;
position: relative;
margin-top: -29rem;
top: 29rem;
right: 1rem;
}
.comfortable .container {
display: flex;
flex-direction: column;
padding-top: 30rem;
gap: 3rem;
text-align: center;
place-items: center;
}
.comfortable h3 {
font-size: 3rem;
}
.comfortable button {
margin-top: 1rem;
padding: 0.5rem 1.5rem;
background-color: #3498db;
color: white;
font-size: 2rem;
cursor: pointer;
}
.comfortable button:hover {
opacity: 0.8;
transition: 0.3s ease-in;
}
.comfortable img {
margin-top: 10rem;
max-width: 100%;
}
.fitness {
background-image: url(../images/fitness.jpg);
background-size: cover;
background-position: center;
min-height: 100vh;
margin-top: 7.5rem;
width: 100%;
}
.fitness .container {
flex-direction: column;
display: flex;
color: white;
padding: 10rem 0;
justify-content: center;
align-items: center;
text-align: center;
}
.fitness h3 {
font-size: 6.2rem;
padding-bottom: 1rem;
}
.fitness p {
font-size: 2rem;
}
.last-btn {
padding: 0.5rem 1.5rem;
background-color: #3498db;
color: white;
font-size: 2rem;
}
.last-btn:hover {
opacity: 0.8;
transition: 0.3s ease-in;
}
.stock-section {
display: flex;
justify-content: center;
margin: 5rem 0;
gap: 3rem;
}
.stock img {
width: 40rem;
max-width: 100%;
}
.stock-content {
display: flex;
flex-direction: column;
gap: 2rem;
}
.stock-content h3 {
font-size: 3rem;
}
.stock-content button {
place-self: start;
}
.footer-upper {
background-color: #4169e1;
padding: 2.5rem;
}
.footer-upper .container {
display: flex;
color: black;
justify-content: space-between;
}
.footer-upper h4 {
font-size: 2rem;
/* margin-top: -5px; */
border-bottom: 0.2rem solid #1b0058;
margin-bottom: 1rem;
position: relative;
padding-top: 0.5rem;
top: -1rem;
}
.footer-upper ul {
font-size: 2rem;
}
.footer-lower {
padding: 1rem;
background-color: #000080;
display: flex;
justify-content: center;
font-size: 2rem;
color: white;
}
.menu-bar {
display: none;
}
/* Media Queries */
#media (max-width: 768px) {
html {
font-size: 40%;
}
nav ul {
display: none;
}
.menu-bar i {
font-size: 2.4rem;
}
.menu-bar {
display: block;
}
/* Footer */
.footer-upper .container {
display: flex;
flex-wrap: wrap;
gap: 2rem;
}
.footer-upper .footer-links {
width: 15rem;
}
.hero-section-data p {
font-size: 3rem;
/* font-weight: 500;
line-height: 1.2; */
}
}
#media (max-width: 1024px) {
.hero-section .container {
display: flex;
/* justify-content: space-between;
place-items: center;
flex-direction: row;
padding: 3rem 1rem; */
flex-direction: column;
}
.logo {
padding-left: 2rem;
}
}
/* #media (max-width: 425px) {
.features-watch img {
margin-top: 20rem;
top: 20rem;
}
} */
#media (max-width: 1360px) {
nav ul {
padding-right: 2rem;
}
}
#media (max-width: 1305px) {
nav ul {
padding-right: 3rem;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Watch Website</title>
<link rel="StyleSheet" href="Css/Style.css" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css"
/>
<!-- Font awesome link -->
<script
src="https://kit.fontawesome.com/a2e94f730a.js"
crossorigin="anonymous"
></script>
</head>
<body>
<header>
<nav class="container">
<div class="logo">Watch</div>
<div class="menu-bar">
<i class="fa-solid fa-bars"></i>
</div>
<ul>
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Contact</li>
</ul>
<!-- menu button -->
</nav>
</header>
<main>
<section class="hero-section" id="hero">
<div class="container">
<div class="hero-section-data">
<h1>
Get your watch <br />
now!
</h1>
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Error ex
ullam in, officiis modi sequi adipisci sed inventore molestias
numquam. Lorem ipsum dolor sit amet consectetur adipisicing elit.
Accusantium, ex?
</p>
<button>Order Now</button>
</div>
<div class="image">
<img src="images/smart_watch-removebg-preview.png" alt="" />
</div>
</div>
</section>
<section class="features-section" id="features">
<div class="container">
<div class="features-content">
<h2>Presenting</h2>
<h3>Apple Watch Series 9</h3>
<h5>
Presenting to you the most luxurious watch of the world with
unlimited features, which makes you'r life more easier.Available
in different colors- Features and much more. You can Detects if
you’ve been in a severe car crash, automatically connects you to
emergency services, and notifies your emergency contacts.
</h5>
<button>Visit More</button>
<div class="features-watch">
<img src="images/features watch.png" alt="" />
</div>
</div>
</div>
</section>
<section class="comfortable" id="comfortable">
<div class="container">
<h3>
Makes Your Life More Comfortable And Get Acess To The Wonderfull
Features
</h3>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Saepe earum
ipsum facilis nemo excepturi quaerat blanditiis fugiat atque, eius
quia libero nulla quis repellat, pariatur distinctio illo explicabo
totam dolores.
</p>
<button class="read-more">Read More</button>
<img src="images/threewatch.png" alt="" />
</div>
</section>
<section class="fitness" id="connect">
<div class="container">
<h3>Get your watch today!</h3>
<p>
Connectivity on your terms. The ultimate wearables experience.<br />
Always connected… and it’s beautiful.It’s time to step up your style
with a smartwatch that looks great with every outfit.
</p>
</div>
</section>
<section class="stock-section container" id="fitness">
<div class="stock-img">
<img src="images/stock.png" alt="" />
</div>
<div class="stock-content">
<h3>In Stock!</h3>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam<br />
accusantium temporibus pariatur ab nemo,Lorem ipsum dolor, sit amet
consectetur adipisicing elit. Dolorem, debitis. Blanditiis libero ad
animi nam dolorem provident suscipit labore eligendi.
</p>
<p>
If you have any query about the "Apple Watch Series" so you can
contact our team.
</p>
<hr />
<button class="last-btn">Buy Now</button>
</div>
</section>
</main>
<footer>
<section class="footer-upper">
<div class="container">
<div class="footer-links">
<h4>Shop & Learn</h4>
<ul>
<li>Features</li>
<li>Pricing</li>
<li>Info</li>
<li>Apps</li>
<li>Connection</li>
</ul>
</div>
<div class="footer-links">
<h4>Our Branches</h4>
<ul>
<li>Pakistan</li>
<li>India</li>
<li>Usa</li>
<li>Nepal</li>
<li>Bangladesh</li>
</ul>
</div>
<div class="footer-links">
<h4>Why us?</h4>
<ul>
<li>Genuine Products</li>
<li>Accuracy</li>
<li>Discounts</li>
<li>Delivery</li>
<li>Gift Cards</li>
</ul>
</div>
<div class="footer-links">
<h4>Brands</h4>
<ul>
<li>Apple</li>
<li>Mi</li>
<li>Samsung</li>
<li>Huawei</li>
<li>Honor</li>
</ul>
</div>
</div>
</section>
<section class="footer-lower">
<p>All rights reserved #AnasSiddiqui 2022</p>
</section>
</footer>
</body>
</html>
My header is going up when scrolling. I have already add the position sticky. Its work fine for the desktop but when i switch on the mobile devices by clicking the inspect button when i scroll down the header goes up i am finding the answers since many days.
I want the header to go down with the scroll especially in mobile devices.
This is my first webpage ever and I'm very new to this. I've been googling but I can't find a solution to this problem.
I've tried messing around with positioning and or adding containers but I can't get my footer to stay under my page. When resizing, it moves up and collides with all the content on the page
Forgive my code, but it's all over the place with media queries and comments from trying random things out.
Any guidance or pointers are appreciated!
(Also I know this is a "code dump and fix my problem" but my structure is pretty bad and maybe the problem could be elsewhere other than the footer and main content)
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
/*html, body {*/
/* height: 100%;*/
/*}*/
/*.wrapper {*/
/* min-height: 100%;*/
/*}*/
.wrapper {
position:relative;
min-height: 100vh;
}
/*.content-wrap {*/
/* padding-bottom: 348px;*/
/*}*/
/*------------------- background ------------------------*/
.background-container{
background-size: 40px 40px;
background-image: radial-gradient(circle, #696969 1px, rgba(0, 0, 0, 0) 1px);
position: relative;
font-family: 'Titillium Web', sans-serif;
/*padding-bottom: 348px;*/
}
/*------------------- nav ------------------------*/
nav {
display: flex;
padding: 2% 6%;
align-items: center;
justify-content: space-between;
}
nav img {
width: 150px;
}
.nav-links {
flex: 1;
text-align: right;
}
.nav-links ul li {
list-style: none;
display: inline-block;
position: relative;
padding: 8px 12px;
}
.nav-links ul li a {
color: black;
text-decoration: none;
font-size: 17px;
font-weight: 600;
}
.nav-links ul li::after {
content: '';
width: 0%;
height: 2px;
background: black;
display: block;
margin: auto;
transition: 0.5s;
}
.nav-links ul li:hover::after {
width: 100%;
}
.fa-solid {
display: none;
}
/*------------------- main ------------------------*/
main {
background-size: 40px 40px;
background-image: radial-gradient(circle, #696969 1px, rgba(0, 0, 0, 0) 1px);
/*height stuff i found to calc height of main*/
height: calc( 100vh - 161px);
align-items: center;
justify-content: center;
font-family: 'Titillium Web', sans-serif;
}
.title{
display: flex;
margin-left: auto;
margin-right: auto;
align-items: center;
justify-content: center;
font-weight: 700;
margin-bottom: 100px;
padding-top: 100px;
}
.grid-ish {
display: grid;
height: 100vh;
grid-template-columns: 1fr 1fr;
grid-template-rows: .3fr .3fr;
grid-template-areas:
"spotify discord"
"tracker idk";
grid-gap: 3rem;
margin: auto;
width: 50%;
}
.spotify {
grid-area: spotify;
background: #e9d138;
display: flex;
justify-content: center;
flex-direction: column;
padding: 30px;
border-radius: 15px;
text-align: left;
}
.spotify h2{
font-weight: 700;
text-align: left;
margin-bottom: 30px;
}
.discord {
grid-area: discord;
background: #e9d138;
display: flex;
justify-content: center;
flex-direction: column;
padding: 30px;
border-radius: 15px;
text-align: left;
height: 21em;
}
.discord h2{
font-weight: 700;
text-align: left;
margin-bottom: 30px;
}
.tracker {
grid-area: tracker;
background: #e9d138;
display: flex;
justify-content: center;
flex-direction: column;
padding: 30px;
border-radius: 15px;
text-align: left;
height: 18em;
}
.tracker h2{
font-weight: 700;
text-align: left;
margin-bottom: 30px;
}
.idk {
grid-area: idk;
background: #e9d138;
display: flex;
justify-content: center;
flex-direction: column;
padding: 30px;
border-radius: 15px;
text-align: left;
height: 15em;
}
.idk h2{
font-weight: 700;
text-align: left;
margin-bottom: 30px;
}
#media(max-width: 700px){
/*------ display none ------*/
/*------ nav ------*/
nav img {
display: none;
}
.nav-links ul li{
display: block;
}
html, body {
/*still dunno how this solves my overflow*/
/*but oh well*/
overflow-x:hidden;
}
.nav-links{
position: absolute;
background: #e9d138;
height: 100vh;
width: 200px;
top: 0;
right: -200px;
text-align: left;
transition: 1s;
z-index: 2;
}
nav .fa-xmark{
display: block;
color: black;
margin: 10px;
font-size: 22px;
cursor: pointer;
}
nav .fa-bars{
display: block;
color: black;
margin: 38px 20px 0 0;
font-size: 30px;
cursor: pointer;
}
.nav-links ul{
padding: 30px;
}
/*------ main ------*/
main {
height: 100%;
}
}
#media(max-width: 1000px){
/*------ display none ------*/
/*------ main ------*/
main {
height: 100%;
}
}
/*------------------- footer ------------------------*/
.footer-container {
position: relative;
bottom: 0;
left: 0;
right: 0;
background: white;
background-size: 40px 40px;
/*background-color: gray;*/
background-image: radial-gradient(circle, #696969 1px, rgba(0, 0, 0, 0) 1px);
display: flex;
margin-top:auto;
z-index: -11;
/*margin-top: -348px;*/
/*clear: both;*/
}
.footer{
width: 80%;
text-align: center;
margin: 0 auto;
justify-content: center;
flex-wrap: wrap;
margin-bottom: 4rem;
}
.footer1{
padding-top: 6rem;
}
.footer2{
display: flex;
align-items: center;
justify-content: center;
margin-top: 2rem;
}
.footer2 a{
text-decoration: none;
color: black;
margin-left: 2rem;
transition: .5s;
}
.footer2 a:hover{
transform: translate(0, -5px);
}
.footer3{
display: flex;
align-items: center;
justify-content: center;
margin: 3rem 0 0;
}
.footer3 a{
margin: 0 2rem;
text-decoration: none;
color: black;
font-size: 30px;
transition: .5s;
}
.footer3 a:hover{
transform: translate(0, -5px);
}
#media(max-width: 700px){
.footer1{
padding-top: 30px;
}
.footer3{
margin: 2rem 0 0;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.2/css/all.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/#fortawesome/fontawesome-free#6.1.2/css/fontawesome.min.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Titillium+Web&display=swap" rel="stylesheet">
<link href="styles3.css" rel="stylesheet">
</head>
<body>
<!------------------------------- nav ------------------------------->
<div class="wrapper">
<div class= "content-wrap">
<div class="background-container">
<nav>
<img src="assets/logo.png">
<div class="nav-links" id="navLinks">
<i class="fa-solid fa-xmark" onclick="hideMenu()"></i>
<ul>
<li>HOME</li>
<li>ABOUT</li>
<li>PROJECTS</li>
<li>WHAT I'VE BEEN UP TO</li>
</ul>
</div>
<i class="fa-solid fa-bars" onclick="showMenu()"></i>
</nav>
</div>
<!------------------------------- main content ------------------------------->
<main>
<h1 class="title">Projects</h1>
<div class="grid-ish">
<div class="spotify">
<h2>Spotify Playlist -> Youtube Downloader</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Esse ullam sequi, nam repellendus ab, repellat maiores. Saepe
voluptatem at asperiores obcaecati qui culpa, hic sint voluptatum
ad consequuntur voluptas dolorem?<br> <br>Lorem ipsum dolor sit amet,
consectetur adipisicing elit. Itaque, facere iste, eligendi ipsa rerum
voluptas officia ullam eius iusto eaque.</p>
</div>
<div class="discord">
<h2>Discord Bot</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Esse ullam sequi, nam repellendus ab, repellat maiores. Saepe
voluptatem at asperiores obcaecati qui culpa, hic sint voluptatum
ad consequuntur voluptas dolorem?Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Esse ullam sequi, nam repellendus ab, repellat maiores. Saepe
voluptatem at asperiores obcaecati qui culpa, hic sint voluptatum
ad consequuntur voluptas dolorem?</p>
</div>
<div class="tracker">
<h2>Financial Tracker</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate
alias ducimus animi, voluptatem quaerat? Aliquam, fuga, distinctio! Modi
veritatis quam quisquam molestias eveniet temporibus incidunt dolorem
quaerat obcaecati tempora possimus, aperiam, qui.</p>
</div>
<div class="idk">
<h2>Haven't Decided</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis
placeat, dolores maxime, assumenda aspernatur repellendus? Officiis
maxime obcaecati nisi maiores. ipsum dolor sit amet, consectetur
adipisicing elit. Eligendi</p>
</div>
</div>
</main>
</div>
<!------------------------------- footer ------------------------------->
<footer>
<div class= "footer-container">
<div class="footer">
<div class="footer1">
<h2>Luca Henderson</h2>
</div>
<div class="footer2">
Home
About
Projects
What I've Been Up To
</div>
<div class="footer3">
<i class="fab fa-linkedin"></i>
<i class="fab fa-github"></i>
<i class="fab fa-angellist"></i>
</div>
</div>
</div>
</footer>
</div>
<!--<-------------JavaScript for Toggle Menu------------>
<script>
var navLinks = document.getElementById("navLinks");
function showMenu(){
navLinks.style.right ="0";
}
function hideMenu(){
navLinks.style.right = "-200px";
}
</script>
</body>
</html>
I did some changes to your code in the css you have to put fit content as height instead of a hard coded height that's why your content keep overflowing and cover the footer.
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
/*html, body {*/
/* height: 100%;*/
/*}*/
/*.wrapper {*/
/* min-height: 100%;*/
/*}*/
.wrapper {
position:relative;
min-height: 100vh;
}
/*.content-wrap {*/
/* padding-bottom: 348px;*/
/*}*/
.content-wrap{
height: fit-content;
}
/*------------------- background ------------------------*/
.background-container{
background-size: 40px 40px;
background-image: radial-gradient(circle, #696969 1px, rgba(0, 0, 0, 0) 1px);
position: relative;
font-family: 'Titillium Web', sans-serif;
/*padding-bottom: 348px;*/
}
/*------------------- nav ------------------------*/
nav {
display: flex;
padding: 2% 6%;
align-items: center;
justify-content: space-between;
}
nav img {
width: 150px;
}
.nav-links {
flex: 1;
text-align: right;
}
.nav-links ul li {
list-style: none;
display: inline-block;
position: relative;
padding: 8px 12px;
}
.nav-links ul li a {
color: black;
text-decoration: none;
font-size: 17px;
font-weight: 600;
}
.nav-links ul li::after {
content: '';
width: 0%;
height: 2px;
background: black;
display: block;
margin: auto;
transition: 0.5s;
}
.nav-links ul li:hover::after {
width: 100%;
}
.fa-solid {
display: none;
}
/*------------------- main ------------------------*/
main {
background-size: 40px 40px;
background-image: radial-gradient(circle, #696969 1px, rgba(0, 0, 0, 0) 1px);
/*height stuff i found to calc height of main*/
/*height: calc( 100vh - 161px); this is not needed*/
align-items: center;
justify-content: center;
font-family: 'Titillium Web', sans-serif;
}
.title{
display: flex;
margin-left: auto;
margin-right: auto;
align-items: center;
justify-content: center;
font-weight: 700;
margin-bottom: 100px;
padding-top: 100px;
}
.grid-ish {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: .3fr .3fr;
grid-template-areas:
"spotify discord"
"tracker idk";
grid-gap: 3rem;
margin: auto;
width: 50%;
height: fit-content;
}
.spotify {
grid-area: spotify;
background: #e9d138;
display: flex;
justify-content: center;
flex-direction: column;
padding: 30px;
border-radius: 15px;
text-align: left;
}
.spotify h2{
font-weight: 700;
text-align: left;
margin-bottom: 30px;
}
.discord {
grid-area: discord;
background: #e9d138;
display: flex;
justify-content: center;
flex-direction: column;
padding: 30px;
border-radius: 15px;
text-align: left;
height: 21em;
}
.discord h2{
font-weight: 700;
text-align: left;
margin-bottom: 30px;
}
.tracker {
grid-area: tracker;
background: #e9d138;
display: flex;
justify-content: center;
flex-direction: column;
padding: 30px;
border-radius: 15px;
text-align: left;
height: 18em;
}
.tracker h2{
font-weight: 700;
text-align: left;
margin-bottom: 30px;
}
.idk {
grid-area: idk;
background: #e9d138;
display: flex;
justify-content: center;
flex-direction: column;
padding: 30px;
border-radius: 15px;
text-align: left;
height: 15em;
}
.idk h2{
font-weight: 700;
text-align: left;
margin-bottom: 30px;
}
#media(max-width: 700px){
/*------ display none ------*/
/*------ nav ------*/
nav img {
display: none;
}
.nav-links ul li{
display: block;
}
html, body {
/*still dunno how this solves my overflow*/
/*but oh well*/
overflow-x:hidden;
}
.nav-links{
position: absolute;
background: #e9d138;
height: 100vh;
width: 200px;
top: 0;
right: -200px;
text-align: left;
transition: 1s;
z-index: 2;
}
nav .fa-xmark{
display: block;
color: black;
margin: 10px;
font-size: 22px;
cursor: pointer;
}
nav .fa-bars{
display: block;
color: black;
margin: 38px 20px 0 0;
font-size: 30px;
cursor: pointer;
}
.nav-links ul{
padding: 30px;
}
/*------ main ------*/
main {
height: 100%;
}
}
#media(max-width: 1000px){
/*------ display none ------*/
/*------ main ------*/
main {
height: 100%;
}
}
/*------------------- footer ------------------------*/
.footer-container {
position: relative;
bottom: 0;
left: 0;
right: 0;
background: white;
background-size: 40px 40px;
/*background-color: gray;*/
background-image: radial-gradient(circle, #696969 1px, rgba(0, 0, 0, 0) 1px);
display: flex;
margin-top:auto;
z-index: -11;
/*margin-top: -348px;*/
/*clear: both;*/
}
.footer{
width: 80%;
text-align: center;
margin: 0 auto;
justify-content: center;
flex-wrap: wrap;
margin-bottom: 4rem;
}
.footer1{
padding-top: 6rem;
}
.footer2{
display: flex;
align-items: center;
justify-content: center;
margin-top: 2rem;
}
.footer2 a{
text-decoration: none;
color: black;
margin-left: 2rem;
transition: .5s;
}
.footer2 a:hover{
transform: translate(0, -5px);
}
.footer3{
display: flex;
align-items: center;
justify-content: center;
margin: 3rem 0 0;
}
.footer3 a{
margin: 0 2rem;
text-decoration: none;
color: black;
font-size: 30px;
transition: .5s;
}
.footer3 a:hover{
transform: translate(0, -5px);
}
#media(max-width: 700px){
.footer1{
padding-top: 30px;
}
.footer3{
margin: 2rem 0 0;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.2/css/all.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/#fortawesome/fontawesome-free#6.1.2/css/fontawesome.min.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Titillium+Web&display=swap" rel="stylesheet">
<link href="css.css" rel="stylesheet">
</head>
<body>
<!------------------------------- nav ------------------------------->
<div class="wrapper">
<div class= "content-wrap">
<div class="background-container">
<nav>
<img src="assets/logo.png">
<div class="nav-links" id="navLinks">
<i class="fa-solid fa-xmark" onclick="hideMenu()"></i>
<ul>
<li>HOME</li>
<li>ABOUT</li>
<li>PROJECTS</li>
<li>WHAT I'VE BEEN UP TO</li>
</ul>
</div>
<i class="fa-solid fa-bars" onclick="showMenu()"></i>
</nav>
</div>
<!------------------------------- main content ------------------------------->
<main>
<h1 class="title">Projects</h1>
<div class="grid-ish">
<div class="spotify">
<h2>Spotify Playlist -> Youtube Downloader</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Esse ullam sequi, nam repellendus ab, repellat maiores. Saepe
voluptatem at asperiores obcaecati qui culpa, hic sint voluptatum
ad consequuntur voluptas dolorem?<br> <br>Lorem ipsum dolor sit amet,
consectetur adipisicing elit. Itaque, facere iste, eligendi ipsa rerum
voluptas officia ullam eius iusto eaque.</p>
</div>
<div class="discord">
<h2>Discord Bot</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Esse ullam sequi, nam repellendus ab, repellat maiores. Saepe
voluptatem at asperiores obcaecati qui culpa, hic sint voluptatum
ad consequuntur voluptas dolorem?Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Esse ullam sequi, nam repellendus ab, repellat maiores. Saepe
voluptatem at asperiores obcaecati qui culpa, hic sint voluptatum
ad consequuntur voluptas dolorem?</p>
</div>
<div class="tracker">
<h2>Financial Tracker</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate
alias ducimus animi, voluptatem quaerat? Aliquam, fuga, distinctio! Modi
veritatis quam quisquam molestias eveniet temporibus incidunt dolorem
quaerat obcaecati tempora possimus, aperiam, qui.</p>
</div>
<div class="idk">
<h2>Haven't Decided</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis
placeat, dolores maxime, assumenda aspernatur repellendus? Officiis
maxime obcaecati nisi maiores. ipsum dolor sit amet, consectetur
adipisicing elit. Eligendi</p>
</div>
</div>
</main>
</div>
<!------------------------------- footer ------------------------------->
<footer>
<div class= "footer-container">
<div class="footer">
<div class="footer1">
<h2>Luca Henderson</h2>
</div>
<div class="footer2">
Home
About
Projects
What I've Been Up To
</div>
<div class="footer3">
<i class="fab fa-linkedin"></i>
<i class="fab fa-github"></i>
<i class="fab fa-angellist"></i>
</div>
</div>
</div>
</footer>
</div>
<!--<-------------JavaScript for Toggle Menu------------>
<script>
var navLinks = document.getElementById("navLinks");
function showMenu(){
navLinks.style.right ="0";
}
function hideMenu(){
navLinks.style.right = "-200px";
}
</script>
</body>
</html>
This question already has answers here:
How can I horizontally center an element?
(133 answers)
Flexbox: center horizontally and vertically
(14 answers)
Closed 2 years ago.
I don't know what i'm missing here but i can't seem to center my div under a section. Whenever i try to put a margin on the div alone, it also applies a margin to the section tag.
What i want to do is very simple. Put <div class="container"> on the center of the <section id="main">, so the <div class="container"> has space at every side.
Here is my HTML code:
<body>
<section id="main">
<div class="container">
<nav><h2>ALEX\ALBARAN</h2><img src="icon_back.png"></nav><br><br><br>
<div class="box-1">
<h1> HELLO! I'M ALEX</h1>
</div> <br><br>
<div class="box-2">
<h3> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique inventore ipsa optio velit, neque, itaque quasi fugiat impedit libero, vitae temporibus? Quisquam libero voluptas, excepturi non fugiat, perferendis laborum magni!</h3><br><br>
</div>
<div class=box-3>
<i class="fas fa-arrow-circle-down"></i>
</div>
</div>
</section>
and here is my CSS code:
nav {
display: flex;
justify-content: space-between;
}
h2 {
font-family: 'Questrial', sans-serif;
font-weight: 200;
font-size: 15px;
color: white;
}
img {
width:40px;
height: 40px;
align-items: flex-end;
}
#main {
background-color: aqua;
font-family: 'Roboto', sans-serif;
font-weight: 100;
}
.container {
background-image:url(bg1.png);
background-repeat: no-repeat;
background-size: cover;
width: 80%;
justify-content: center;
text-align: center;
margin: 10% 10%;
}
.box-1 {
border: 3px solid white;
background-color: transparent;
color: white;
width: 50%;
padding: auto;
margin: auto;
text-align: center;
}
.box-2 {
font-size: 10px;
font-weight: 100;
color: white;
background-color: transparent;
width: 50%;
padding:auto;
margin:auto;
text-align: center;
}
.box-3 {
text-align: center;
color: white;
padding-bottom: 20px;
}
You can use display:flex on main div. Then center .container.
Here is a simplified snippet:
#main {
background-color: aqua;
font-family: 'Roboto', sans-serif;
font-weight: 100;
display: flex;
align-items: center;
justify-content: center;
height: 300px;
}
.container {
border: 1px solid red;
width: 80%;
height: 80px
}
<section id="main">
<div class="container">
</div>
</section>
To center your div, here are the attributes you have to add in the CSS:
.centered-div {
margin: 0 auto;
width: 80%; // specifies a custom width
}
The problem was the margin: 10% 10%. Replace it with the auto margin and the result will be this (run the snippet to see your HTML page displayed):
nav {
display: flex;
justify-content: space-between;
}
h2 {
font-family: 'Questrial', sans-serif;
font-weight: 200;
font-size: 15px;
color: white;
}
img {
width:40px;
height: 40px;
align-items: flex-end;
}
#main {
background-color: aqua;
font-family: 'Roboto', sans-serif;
font-weight: 100;
}
.container {
background-image:url(bg1.png);
background-repeat: no-repeat;
background-size: cover;
width: 80%;
justify-content: center;
text-align: center;
margin: 0 auto; ############# HERE IS THE MODIFIED LINE #############
}
.box-1 {
border: 3px solid white;
background-color: transparent;
color: white;
width: 50%;
padding: auto;
margin: auto;
text-align: center;
}
.box-2 {
font-size: 10px;
font-weight: 100;
color: white;
background-color: transparent;
width: 50%;
padding:auto;
margin:auto;
text-align: center;
}
.box-3 {
text-align: center;
color: white;
padding-bottom: 20px;
}
<body>
<section id="main">
<div class="container">
<nav><h2>ALEX\ALBARAN</h2><img src="icon_back.png"></nav><br><br><br>
<div class="box-1">
<h1> HELLO! I'M ALEX</h1>
</div> <br><br>
<div class="box-2">
<h3> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique inventore ipsa optio velit, neque, itaque quasi fugiat impedit libero, vitae temporibus? Quisquam libero voluptas, excepturi non fugiat, perferendis laborum magni!</h3><br><br>
</div>
<div class=box-3>
<i class="fas fa-arrow-circle-down"></i>
</div>
</div>
</section>
By the way, you forgot to close your <body>.
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 2 years ago.
Improve this question
I'm trying to build a personal website example,
body{
background-color: rgba(0, 0, 0, 0.123);
margin: 0;
}
.wraper{
display: grid;
grid-template-rows: repeat(4,1fr);
}
.box1{
order: 1;
height: 100vh;
display: grid;
grid-template-rows: 10% 60% 15% 15%;
border: 1px black solid;
grid-gap: 10px;
background-image: url("b.jpg");
background-repeat: no-repeat;
background-position:center ;
background-size: 210vh 200vh;
}
.box1>div{
}
.logo{
}
.logo>img{
height: 30px;
width: 30px;
}
.chancing-word{
font-size: 50px;
text-align: center;
padding: 13%;
color: white;
}
.down_writing{
font-size: 30px;
text-align: center;
padding: 5%;
color: white;
}
.arrow_down{
width: 30px;
height: 30px;
border: solid white;
border-width: 0 3px 3px 0;
display: inline-block;
padding: 3px;
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
}
.arrow1{
text-align: center;
padding-bottom: 20px;
}
.box2{
order: 2;
display: block;
position: sticky;
z-index: 1;
}
.box::before{
}
.box3{
order: 3;
}
.box4{
order:4;
}
header{
background-color: rgba(70, 127, 165, 0.123);
border-radius: 10px;
}
.navbar {
height: 75px;
margin: 0;
display: flex;
justify-content: flex-end;
padding: 10px;
align-items: flex-end;
}
.navbar a{
text-decoration: none;
font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
font-size: 25px;
text-align: center;
margin: 1em;
}
.navbar a:hover{
background-color: cornflowerblue;
border: cornflowerblue thin 0,1px;
border-radius: 10px;
}
.chancing-word::after{
content: "Follow your dreams";
animation: textanim 10s linear infinite;
}
#keyframes textanim {
25%{
content: "It is never too late";
}
50%{
content: "You can do it, too"
}
75%{
content: "You, I`m talking to YOU"
}
}
<!DOCTYPE html>
<html>
<head>
<link href="personal webpage.css" type="text/css" rel="stylesheet">
<title>Latecoder</title>
</head>
<body>
<div class="wraper">
<div class="box1">
<div class="logo"><img src="logo.jpg" alt="logo"></div>
<div class="chancing-word"> </div>
<div class=down_writing>Hello, over here</div>
<div class="arrow1"><i class="arrow_down"></i></div>
</div>
<div class="box2">
<nav class="navbar">
<div class="nav_buttons">Home</div>
<div class="nav_buttons">Services</div>
<div class="nav_buttons">Works</div>
<div class="nav_buttons">Contact</div>
</nav>
</div>
<div class="box3">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Omnis voluptas minus dolor unde dicta aliquid odio ut temporibus, aspernatur distinctio nam voluptatibus placeat illum impedit, quisquam recusandae rem sapiente libero.</div>
<div class="box4"></div>
</div>
<footer>
</footer>
</body>
</html>
I try to stick the navigation bar on the middle of the website and after I scrolled down, I want the navigation bar to stay on the top. Also, I want to remove the scroll bar on left if it is possible.
I gave enough detail
I gave enough detail
I gave enough detail
Check out my example. I made the navbar moveable. Your navbar will only move within the div "box2", because it is because of the current structure of your site. In order for the navbar to move throughout the site, you need to move the navbar outside the div "box2".
body{
background-color: rgba(0, 0, 0, 0.123);
margin: 0;
}
.wraper{
display: grid;
grid-template-rows: repeat(4,1fr);
}
.box1{
order: 1;
height: 100vh;
display: grid;
grid-template-rows: 10% 60% 15% 15%;
border: 1px black solid;
grid-gap: 10px;
background-image: url("b.jpg");
background-repeat: no-repeat;
background-position:center ;
background-size: 210vh 200vh;
}
.box1>div{
}
.logo{
}
.logo>img{
height: 30px;
width: 30px;
}
.chancing-word{
font-size: 50px;
text-align: center;
padding: 13%;
color: white;
}
.down_writing{
font-size: 30px;
text-align: center;
padding: 5%;
color: white;
}
.arrow_down{
width: 30px;
height: 30px;
border: solid white;
border-width: 0 3px 3px 0;
display: inline-block;
padding: 3px;
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
}
.arrow1{
text-align: center;
padding-bottom: 20px;
}
.box2{
order: 2;
display: block;
position: sticky;
z-index: 1;
}
.box::before{
}
.box3{
order: 3;
}
.box4{
order:4;
}
header{
background-color: rgba(70, 127, 165, 0.123);
border-radius: 10px;
}
.navbar {
position: sticky;
top: 0;
height: 75px;
margin: 0;
display: flex;
justify-content: flex-end;
padding: 10px;
align-items: flex-end;
}
.navbar a{
text-decoration: none;
font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
font-size: 25px;
text-align: center;
margin: 1em;
}
.navbar a:hover{
background-color: cornflowerblue;
border: cornflowerblue thin 0,1px;
border-radius: 10px;
}
.chancing-word::after{
content: "Follow your dreams";
animation: textanim 10s linear infinite;
}
#keyframes textanim {
25%{
content: "It is never too late";
}
50%{
content: "You can do it, too"
}
75%{
content: "You, I`m talking to YOU"
}
}
<!DOCTYPE html>
<html>
<head>
<link href="personal webpage.css" type="text/css" rel="stylesheet">
<title>Latecoder</title>
</head>
<body>
<div class="wraper">
<div class="box1">
<div class="logo"><img src="logo.jpg" alt="logo"></div>
<div class="chancing-word"> </div>
<div class=down_writing>Hello, over here</div>
<div class="arrow1"><i class="arrow_down"></i></div>
</div>
<div class="box2">
<nav class="navbar">
<div class="nav_buttons">Home</div>
<div class="nav_buttons">Services</div>
<div class="nav_buttons">Works</div>
<div class="nav_buttons">Contact</div>
</nav>
</div>
<div class="box3">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Omnis voluptas minus dolor unde dicta aliquid odio ut temporibus, aspernatur distinctio nam voluptatibus placeat illum impedit, quisquam recusandae rem sapiente libero.</div>
<div class="box4"></div>
</div>
<footer>
</footer>
</body>
</html>
Forgive my if my html and css is bad this is my first page im doing alone. I have been working on this issue for atleast 3 hours I have my index page complete looks halfway decent but when I commit it to github and view it on my sons iphone the images look squished and the aspect ratio is off. If I can have any help thanks in advance!!
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA Compatible" content="ie=edge" />
<link rel="stylesheet" href="css/stylesheet.css" />
<title>RealtorsRUs</title>
</head>
<body>
<!-- Begin Navbar -->
<header class="hero">
<div id="navbar" class="navbar">
<h1 class="logo">
MReality
</h1>
<nav>
<ul>
<li>
<a class="current" href="index.html">Home</a></li>
<li>
About Us</li>
<li>
Contact Us</li>
</ul>
</nav>
</div>
<!-- End Navbar -->
<div class="content">
<h1>Welcome Home</h1>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Cumque vero
excepturi dolore sequi quibusdam nostrum aperiam voluptatum nihil
deserunt explicabo!
</p>
Read More
</div>
</header>
<main>
<!-- Begin Featured Listings -->
<section class="featuredlistings">
<h2>Featured Listings</h2>
<div class="flex-row">
<div class="item1">
<img
src="images/evelyn-paris-XJnP4L958ds-unsplash.jpg"
alt="Home"
/>
</div>
<div class="item2">
<img
src="images/jesse-roberts-561igiTyvSk-unsplash.jpg"
alt="Home"
/>
</div>
<div class="item3">
<img
src="images/daniel-barnes-RKdLlTyjm5g-unsplash.jpg"
alt="Home"
/>
</div>
</section>
<article id="section-1" class="flex-row-article">
<div class="article-1">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore mollitia, ipsa neque aliquid quod similique consequatur accusantium harum facere natus. Omnis blanditiis incidunt nobis similique reprehenderit illo quaerat, sed ad reiciendis fugit sequi molestias, inventore, exercitationem consectetur soluta. Quibusdam quod laborum eaque, perferendis fugit similique dolorem ipsum mollitia sunt incidunt?
</p>
</div>
<div class="article-2">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquam ut dignissimos vitae voluptatum, obcaecati quidem, eaque, amet cum illo eos numquam iste officiis quia aspernatur animi dicta consectetur nulla eligendi! Laboriosam quas sunt dolor dignissimos illo at porro asperiores, earum, cum sapiente voluptates nemo animi dolore repellat libero cupiditate nulla?
</p>
</div>
</article>
</main>
<footer id="mainfooter">
<p>MReality © 2020, All Rights Reserved</p>
</footer>
</body>
</html>
enter code here
css
* {
box-sizing: border-box;
padding: 0;
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
.btn {
cursor: pointer;
display: inline-block;
padding: 10px 60px;
color: #fff;
border: none;
border-radius: 5px;
background-color: #333;
font-size: 20px;
opacity: .95;
}
.flex-row {
display: flex;
text-align: center;
justify-content: center;
}
.flex-row div{
margin: 5px;
display: flex;
}
.flex-row h3{
font-size: 3rem;
}
.flex-row-article {
display: flex;
text-align: center;
justify-content: center;
flex-direction: column;
}
body {
background: #f9f9f9;
color: #333;
line-height: 1.6;
}
ul {
list-style: none;
}
.navbar {
display: flex;
align-items: center;
justify-content: space-between;
background-color: #333;
color: #fff;
height: 50px;
width: 100%;
padding: 5px;
position: fixed;
top: 0px;
opacity: 0.9;
z-index: 2;
}
.navbar a {
color: #fff;
padding: 10px 10px;
margin: 0 5px;
}
.navbar a:hover {
border-bottom: #fff 2px solid;
}
.navbar ul {
display: flex;
position: sticky;
top: 0;
}
img {
max-width: 100%;
}
.logo{
font-size: 1.5rem;
}
a {
text-decoration: none;
color: #333;
}
.hero-aboutus {
background: url("../images/roger-starnes-sr-BNY7m7BhS2o-unsplash.jpg") no-repeat center
center/cover;
height: 100vh;
text-align: center;
}
.hero-contactus {
background: url("../images/bailey-anselme-Bkp3gLygyeA-unsplash\ \(2\).jpg")
no-repeat center center/cover;
height: 100vh;
text-align: center;
background-position-y: 40%;
}
.hero {
background: url("../images/francesca-tosolini-XAHSexPxSus-unsplash\ \(1\).jpg")
no-repeat center center/cover;
height: 100vh;
text-align: center;
position: relative;
width: 100%;
overflow: hidden;
}
.hero .content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
height: 100%;
color: #fff;
}
.hero .content h1 {
font-size: 3rem;
z-index: 1;
}
.hero .content p {
font-size: 1.5rem;
width: 100%;
margin: 10px 30px;
padding: 0 20px;
z-index: 1;
}
.hero:before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.1);
}
.featuredlistings h2{
text-align: center;
font-size: 2rem;
margin: 5px;
padding: 10px;
}
.article-1 p, .article-2 p{
margin: 0 auto;
padding: 10px;
text-align: center;
font-size: 1.5rem;
width: 50%;
}
#mainfooter p{
text-align: center;
background: #333;
color: #fff;
padding: 20px;
}
#media(max-width: 768px) {
.navbar {
flex-direction: column;
height: 80px;
padding: 20px;
z-index: 100;
align-items: center;
justify-content: center;
}
.navbar a {
padding: 10px 10px;
margin: 0 3px;
}
.flex-row{
flex-wrap: wrap;
}
.featuredlistings h2{
text-align: center;
font-size: 2rem;
}
.article-1 p, .article-2 p{
margin: 0 auto;
padding: 10px;
text-align: center;
font-size: 1.5rem;
width: 100%;
}
img{
flex: 1;
}
.flex-row .item1 .item2 .item3{
Your problem may be fairly easy to solve. May be, as I am not on Safari, but IE11 seems to have the same problem.
Solution
img: { max-width: 100% } should be img: { width: 100% }. Because element width and height are CSS default auto, which means that the browser will try to fill all the space available with the image, fully disregarding its ratio (it stretches in every direction). width: 100% (OR height: 100%, not both!) will make sure that images fill the full width (OR height) of the available space and size its height (OR width) to ratio.
#media screen and (max-width: 768px) { .... img { flex: 1 } .... } should become #media screen and (max-width: 768px) { .... img { flex-grow: 1 } .... }. Especially IE11 cannot handle the shorthand property flex very well, so you need the individual properties instead CSS flex Property. I am not sure, but Safari may have the same problem (may need the vendor prefix -webkit-).
Before, IE11 did not show the images at all with a browser window smaller than 768px and did not preserve the image ratios when resizing, but with my changes everything works as expected. Hopefully, Safari too!
BTW Chrome, Edge and Firefox did not show the problem on W10.
The snippet (code copied from your Github site) with the two changes.
* {
box-sizing: border-box;
padding: 0;
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
.btn {
cursor: pointer;
display: inline-block;
padding: 10px 60px;
color: #fff;
border: none;
border-radius: 5px;
background-color: #333;
font-size: 20px;
opacity: 0.95;
}
.flex-row {
display: flex;
text-align: center;
justify-content: center;
}
.flex-row div {
margin: 5px;
display: flex;
}
.flex-row h3 {
font-size: 3rem;
}
.flex-row-article {
display: flex;
text-align: center;
justify-content: center;
flex-direction: column;
}
body {
background: #f9f9f9;
color: #333;
line-height: 1.6;
}
ul {
list-style: none;
}
.navbar {
display: flex;
align-items: center;
justify-content: space-between;
background-color: #333;
color: #fff;
height: 50px;
width: 100%;
padding: 5px;
position: fixed;
top: 0px;
opacity: 0.9;
z-index: 2;
}
.navbar a {
color: #fff;
padding: 10px 10px;
margin: 0 5px;
}
.navbar a:hover {
border-bottom: #fff 2px solid;
}
.navbar ul {
display: flex;
position: sticky;
top: 0;
}
.navbar h1 {}
img {
/* max-width: 100%;/* REMOVED */
width: 100%;
}
.logo {
font-size: 1.5rem;
position: relative;
}
a {
text-decoration: none;
color: #333;
}
.hero-aboutus {
background: url("https://amolina0116.github.io/MyProjects/realtorsite/images/roger-starnes-sr-BNY7m7BhS2o-unsplash.jpg") no-repeat center center/cover;
height: 100vh;
text-align: center;
}
.hero-contactus {
background: url("https://amolina0116.github.io/MyProjects/realtorsite/images/bailey-anselme-Bkp3gLygyeA-unsplash\ \(2\).jpg") no-repeat center center/cover;
height: 100vh;
text-align: center;
background-position-y: 40%;
}
.hero {
background: url("https://amolina0116.github.io/MyProjects/realtorsite/images/francesca-tosolini-XAHSexPxSus-unsplash\ \(1\).jpg") no-repeat center center/cover;
height: 100vh;
text-align: center;
position: relative;
width: 100%;
overflow: hidden;
}
.hero .content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
height: 100%;
color: #fff;
}
.hero .content h1 {
font-size: 3rem;
z-index: 1;
}
.hero .content p {
font-size: 1.5rem;
width: 100%;
margin: 10px 30px;
padding: 0 20px;
z-index: 1;
}
.hero:before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.1);
}
.featuredlistings h2 {
text-align: center;
font-size: 2rem;
margin: 5px;
padding: 10px;
}
.article-1 p,
.article-2 p {
margin: 0 auto;
padding: 10px;
text-align: center;
font-size: 1.5rem;
width: 50%;
}
#mainfooter {
height: 50px;
background: #333;
text-align: center;
color: #fff;
width: 0 auto;
display: flex;
align-items: center;
justify-content: center;
}
#mainfooter p {}
.ourteam {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
color: #fff;
}
.fred {
background: #333;
opacity: 0.9;
margin: 5px;
padding: 10px;
/* height: ; /**/
}
.fred img {
height: 200px;
border-radius: 50%;
}
.sammy {
background: #333;
opacity: 0.9;
margin: 5px;
padding: 10px;
}
.sammy img {
border-radius: 50%;
}
.box {
display: flex;
align-items: center;
text-align: center;
justify-content: center;
align-content: center;
height: 100%;
background: #333;
color: #fff;
padding: 10px;
}
.box1 {
border-right: black solid 1px;
width: 33.3%;
}
.box2 {
width: 33.3%;
}
.box3 {
border-left: black solid 1px;
width: 33.3%;
}
input[type="text"],
select,
textarea {
width: 100%;
padding: 12px;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
margin-top: 6px;
margin-bottom: 16px;
resize: vertical;
}
input[type="submit"] {
background-color: #4caf50;
color: white;
padding: 12px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
}
input[type="submit"]:hover {
background-color: #45a049;
}
.container {
border-radius: 5px;
background-color: #f2f2f2;
padding: 20px;
position: relative;
top: 30%;
opacity: 0.85;
margin: 0 30%;
}
.contactform {
height: 60vh;
}
#subject {
height: 100px;
}
#media screen and (max-width: 768px) {
#icons {
display: none;
}
.contactform {
width: 100%;
line-height: 0.5;
}
.container {
margin: 0 auto;
top: 80px;
}
.fred {
position: relative;
top: 40px;
}
.navbar {
flex-direction: column;
height: 80px;
padding: 20px;
z-index: 100;
align-items: center;
justify-content: center;
}
.flex-row {
flex-wrap: wrap;
}
.featuredlistings h2 {
text-align: center;
font-size: 2rem;
}
.article-1 p,
.article-2 p {
margin: 0 auto;
padding: 10px;
text-align: center;
font-size: 1.5rem;
width: 100%;
}
img {
flex-grow: 1;
/* MODDED, was flex: 1 */
}
.fred img {
height: 80px;
}
}
.sammy img {}
<!-- Begin Navbar -->
<header class="hero">
<div id="navbar" class="navbar">
<h1 class="logo">
MReality
</h1>
<nav>
<ul>
<li>
<a class="current" href="index.html">Home</a>
</li>
<li>
About
</li>
<li>
Contact
</li>
</ul>
</nav>
</div>
<!-- End Navbar -->
<div class="content">
<h1>Welcome Home</h1>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Cumque vero excepturi dolore sequi quibusdam nostrum aperiam voluptatum nihil deserunt explicabo!
</p>
Read More
</div>
</header>
<main>
<!-- Begin Featured Listings -->
<section class="featuredlistings">
<h2>Featured Listings</h2>
<div class="flex-row">
<div class="item1">
<img src="https://amolina0116.github.io/MyProjects/realtorsite/images/evelyn-paris-XJnP4L958ds-unsplash.jpg" alt="Home" />
</div>
<div class="item2">
<img src="https://amolina0116.github.io/MyProjects/realtorsite/images/jesse-roberts-561igiTyvSk-unsplash.jpg" alt="Home" />
</div>
<div class="item3">
<img src="https://amolina0116.github.io/MyProjects/realtorsite/images/daniel-barnes-RKdLlTyjm5g-unsplash.jpg" alt="Home" />
</div>
</div>
</section>
<article id="section-1" class="flex-row-article">
<div class="article-1">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore mollitia, ipsa neque aliquid quod similique consequatur accusantium harum facere natus. Omnis blanditiis incidunt nobis similique reprehenderit illo quaerat, sed ad reiciendis fugit sequi
molestias, inventore, exercitationem consectetur soluta. Quibusdam quod laborum eaque, perferendis fugit similique dolorem ipsum mollitia sunt incidunt?
</p>
</div>
<div class="article-2">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquam ut dignissimos vitae voluptatum, obcaecati quidem, eaque, amet cum illo eos numquam iste officiis quia aspernatur animi dicta consectetur nulla eligendi! Laboriosam quas sunt dolor dignissimos
illo at porro asperiores, earum, cum sapiente voluptates nemo animi dolore repellat libero cupiditate nulla?
</p>
</div>
</article>
</main>
<footer id="mainfooter">
<p>MReality © 2020, All Rights Reserved</p>
</footer>