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>
Related
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>
below you'll see I have a div container that holds one row with two columns of equal width and height. The image is on the left side and the text is on the right. I'm currently using #media so that when the screen reaches a certain width, both columns will go on top of each other and they'll be one column. My question is, is there any way to make the second column go above the first column when my #media activates instead of vice-versa? Thanks in advance.
<div class="resources-flex-container" >
<div class="resources-img-section">
<img src="../images/resources.png" alt="" class="resources-img">
</div>
<div class="resources-main-content">
<p class="resources-section-title">Lorem Ipsum Dolor Sit</p>
<p class="resources-section-description">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla quibusdam rerum, saepe exercitationem earum quas architecto, autem, accusantium facere aliquam repellat minus quia quis eum ad? Cupiditate, corporis quae? Libero!
</p>
</div>
</div>
CSS
.resources-flex-container {
padding-left: 5%;
padding-right: 5%;
background-color: rgb(238,43,42, .15);
align-items: center;
padding-top: 2%;
padding-bottom: 2%;
}
#media (min-width: 56.25em){
.resources-flex-container {
display: flex;
}
}
.resources-main-content {
flex: 1;
padding: 20px;
border-radius: 12px;
}
.resources-section-title {
font-size: 30px;
font-weight: 600; text-align: center;
}
.resources-section-description {
font-size: 1.125rem;
}
.resources-button-section {
text-align: center;
}
.resources-button {
color:white;
width: 270px;
font-weight: 500;
background-color: #CE4A4A;
border-radius: 50px;
font-size: 1.75rem;
text-align: center;
text-decoration: none;
padding-top: .7%;
padding-bottom: .7%;
padding-right: 5%;
padding-left: 5%;
border: 0;
}
.resources-img-section {
flex: .75 0 300px;
padding: 20px;
border-radius: 12px;
}
.resources-img {
display: block;
margin-left: auto;
margin-right: auto;
width: 70%;
height: 80%;
border-radius: 10px;
box-shadow: 0px 0px 5px black;
}
You can add flex-direction: column-reverse; property in #media query class according to your min-width and max-width
h1, h2 {
font-family: Lato;
}
.resources-flex-container {
padding-left: 5%;
padding-right: 5%;
background-color: rgb(238,43,42, .15);
align-items: center;
padding-top: 2%;
padding-bottom: 2%;
display: flex;
flex-direction: row;
}
#media screen and (min-width: 56.25em ){
.resources-flex-container {
display: flex;
flex-direction: column-reverse;
}
}
#media screen and (max-width: 600px) {
.resources-flex-container {
display: flex;
flex-direction: column-reverse;
}
}
#media screen and (min-width: 601px) {
.resources-flex-container {
display: flex;
flex-direction: row;
}
}
.resources-main-content {
flex: 1;
padding: 20px;
border-radius: 12px;
}
.resources-section-title {
font-size: 30px;
font-weight: 600; text-align: center;
}
.resources-section-description {
font-size: 1.125rem;
}
.resources-button-section {
text-align: center;
}
.resources-button {
color:white;
width: 270px;
font-weight: 500;
background-color: #CE4A4A;
border-radius: 50px;
font-size: 1.75rem;
text-align: center;
text-decoration: none;
padding-top: .7%;
padding-bottom: .7%;
padding-right: 5%;
padding-left: 5%;
border: 0;
}
.resources-img-section {
flex: .75 0 300px;
padding: 20px;
border-radius: 12px;
}
.resources-img {
display: block;
margin-left: auto;
margin-right: auto;
width: 70%;
height: 80%;
border-radius: 10px;
box-shadow: 0px 0px 5px black;
}
<div class="resources-flex-container" >
<div class="resources-img-section">
<img src="../images/resources.png" alt="" class="resources-img">
</div>
<div class="resources-main-content">
<p class="resources-section-title">Lorem Ipsum Dolor Sit</p>
<p class="resources-section-description">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla quibusdam rerum, saepe exercitationem earum quas architecto, autem, accusantium facere aliquam repellat minus quia quis eum ad? Cupiditate, corporis quae? Libero!
</p>
</div>
</div>
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>.
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>
I've been making this website for school and I thought i'd figure out how parallax scrolling works. So i've started with the simpelest tutorial to be precise this one. After doing this I placed my navigation bar in. I remember this worked fine at the time but after working allot on the responsiveness I didn't check back and now I can't click on the links anymore.
This is my html:
<div id="group2" class="parallax_group">
<!-- <div class="parallax_layer parallax_layer-back">
background
</div> -->
<div class="parallax_layer parallax_layer-base">
<div id="nav" class="nav">
<ul>
<li><a class="active" href="#">Home</a></li>
<li>Over ons</li>
<li>Wat leveren wij?</li>
<li>Contact</li>
<li>Demo</li>
</ul>
</div>
<div class="section group">
<div class="col span_1_of_3">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam id nam, necessitatibus at odit nobis vitae, dolor sequi sunt doloremque minima, debitis. Sed debitis possimus esse soluta mollitia est culpa.</p>
</div>
<div id="middle" class="col span_1_of_3">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui autem impedit, a, error accusantium soluta molestias quidem quo totam beatae eligendi sint, modi voluptatem nemo fugiat recusandae ullam consequatur nihil?</p>
</div>
<div class="col span_1_of_3">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Provident voluptatibus, quaerat nostrum ullam distinctio praesentium! Nemo eveniet provident id, tenetur cumque natus, quas porro possimus maiores, minus amet laboriosam ea?</p>
</div>
</div>
</div>
</div>
And this is my css:
* {
padding: 0;
margin: 0;
}
body {
text-align: center;
}
h1{
display: inline-block;
font-family: 'Raleway', sans-serif;
color: white;
text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}
p{
display: inline-block;
font-family: 'Raleway', sans-serif;
color: black;
}
header {
z-index: 5;
line-height: 100vh;
}
header .parallax_layer-back {
background: url(sample.jpg);
background-size: contain;
background-repeat: no-repeat;
}
#group2 {
z-index: 3;
}
#group2 .parallax_layer-base {
background-color: #dbdbdb;
}
.parallax {
perspective: 300px;
height: 100vh;
overflow-x: hidden;
overflow-y: auto;
}
.parallax_layer {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.parallax_layer-base {
transform: translateZ(0px);
z-index: 4;
}
.parallax_layer-back {
transform: translateZ(-300px) scale(2);
z-index: 3;
height: 150vh;
}
.parallax_layer-deep{
transform: translateZ(-600px) scale(3);
z-index: 2;
background-color: #dbdbdb;
}
.parallax_group {
position: relative;
height: 100vh;
transform-style: preserve-3d;
/*transform: translate3d(700px, 0, -800px) rotateY(30deg);*/
}
/*Columns*/
/* SECTIONS */
.section {
clear: both;
padding: 0px;
margin: 0px;
}
/* COLUMN SETUP */
.col {
display: block;
float:left;
margin: 1% 0 1% 1.6%;
}
.col:first-child { margin-left: 0; }
/* GROUPING */
.group:before,
.group:after {
content:"";
display:table;
}
.group:after {
clear:both;
}
.group {
zoom:1; /* For IE 6/7 */
}
/* GRID OF THREE */
.span_3_of_3 {
width: 100%;
}
.span_2_of_3 {
width: 66.1%;
}
.span_1_of_3 {
width: 32.2%;
}
#middle{
border-top: 0px;
border-bottom: 0px;
border-right: 1px;
border-left: 1px;
border-style: solid;
}
/*navigation*/
.nav {
position: sticky;
top: 0px;
height: 100px;
width: 100%;
z-index: 30;
font-family: 'Raleway', sans-serif;
font-size: 20px;
background-color: #dbdbdb;
}
.nav ul {
list-style-type: none;
margin-left: 0;
padding-top: 40px;
font-size: 25px;
font-family: 'Raleway', sans-serif;
line-height: 0;
z-index: 30;
}
.nav li {
display: inline-block;
margin-left: 15px;
padding-bottom: 25px;
z-index: 30;
}
a:link {
color: #2F649B;
font-family: inherit;
}
a:visited {
color: #2F649B;
}
a:hover {
color: #6D92B9;
text-decoration: none;
}
a:active {
color: #26507C;
text-decoration: none;
}
footer {
position: sticky;
bottom: 0px;
height: 100px !important;
line-height: 100px;
width: 100%;
}
I know it's allot of code but I have no idea what it could be so i went and gone ahead and gave you everything.
edit: The other html parallax group:
<!DOCTYPE html>
<html>
<head>
<title>Squirel WebDesign</title>
<link rel="stylesheet" type="text/css" href="main.css">
<link rel="stylesheet" type="text/css" href="handheld.css" media="screen and (max-device-width: 480px), screen and (max-width: 480px)">
</head>
<body>
<div class="parallax">
<header class="parallax_group">
<div class="parallax_layer parallax_layer-base">
<h1>i'm a bloody big header preferably with a squirel</h1>
</div>
<div class="parallax_layer parallax_layer-back">
</div>
<div class="parallax_layer parallax_layer-deep">
</div>
</header>