I have a little problem with bootstrap, I test lot of possibility for resolve my problem, but I dont found the good..
I have a footer. The footer is in the container for align with the bootstrap grid. I would like to put the width contact block at 100% at the right.Currently it is blocked against the container.
the block are perfectly align, i have just this problem
Curently:
Final result :
(See my code in full view)
#charset 'UTF-8';
#import url('https://fonts.googleapis.com/css?family=Lato:300,400,900|Merriweather:400,400i,700i');
.accompagnement {
height: 550px;
background: #fafafa;
}
.accompagnement__titre {
font-family: Merriweather, serif;
font-size: 30px;
font-weight: 400;
line-height: 240px;
position: relative;
color: #aba08c;
}
.accompagnement__titre:after {
position: absolute;
right: 40%;
bottom: 70px;
width: 200px;
height: 1px;
content: ' ';
background: #aba08c;
}
.accompagnement__informations {
background: white;
background-clip: content-box;
}
.accompagnement__image {
width: 100%;
height: 210px;
background: url('../assets/img/spot-of-light-1145368.jpg') no-repeat center center;
}
.accompagnement__texte {
line-height: 26px;
padding: 30px 30px;
}
.accompagnement__texte > h2 {
font-size: 24px;
color: #8b3d61;
}
.accompagnement__texte > p {
font-weight: 300;
}
.valign {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.set-relative {
position: relative;
}
.svg-button {
/**
Gestion du :Hover des SVG
*/
}
.svg-button-gauche,
.svg-button-droite {
position: absolute;
top: 50%;
width: 46px;
height: 46px;
fill: #5e5f78;
}
.svg-button-gauche {
left: -60px;
}
.svg-button-droite {
right: -60px;
}
.svg-button-fleche {
fill: none;
stroke: #ccc;
stroke-linecap: round;
stroke-linejoin: round;
stroke-width: 2px;
}
.svg-button-contour {
fill: #ccc;
}
.svg-button-gauche:hover .svg-button-fleche,
.svg-button-droite:hover .svg-button-fleche {
stroke: red;
}
.svg-button-gauche:hover .svg-button-contour,
.svg-button-droite:hover .svg-button-contour {
fill: red;
}
footer {
position: relative;
background: #e5e3e8;
}
footer ul {
margin: 50px 0 140px 0;
color: #5e5f78;
}
footer ul li {
font-weight: 300;
line-height: 25px;
}
footer ul li:first-child {
font-family: Merriweather, serif;
font-weight: 400;
line-height: 30px;
}
footer ul li a {
text-decoration: none;
color: inherit;
}
footer ul li a:hover {
color: inherit;
}
.footer {
font-size: 13px;
font-weight: 300;
padding: 30px 0;
color: #5e5f78;
border-top: 1px solid #fff;
}
.footer__copyright {
padding-left: 0;
}
.footer__appolo {
padding-right: 0;
text-align: right;
}
.footer__appolo > a {
display: inline-block;
text-decoration: none;
color: #5e5f78;
}
.footer__appolo > a:first-child:after {
margin: 0 15px;
content: '•';
}
.contacts {
position: absolute;
top: -20px;
right: 0;
height: 409px;
background: #fff;
background-clip: content-box;
}
.contacts > h2 {
font-family: Merriweather, serif;
font-size: 30px;
line-height: 30px;
position: relative;
margin-bottom: 55px;
color: #aba08c;
}
.contacts > h2:after {
position: absolute;
bottom: -30px;
left: 0;
width: 300px;
height: 1px;
content: ' ';
background: #aba08c;
}
.contacts__tel {
font-weight: 300;
line-height: 30px;
margin: 0 0 50px 0;
}
.contacts__permanence,
.contacts__disponibilite,
.contacts__lieu {
font-family: Merriweather, serif;
font-size: 14px;
font-weight: 400;
line-height: 30px;
margin: 0;
}
.contacts__adresse {
font-size: 14px;
font-weight: 300;
line-height: 20px;
margin: 0;
color: #5e5f78;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<body>
<section class="container-fluid accompagnement">
<div class="container">
<div class="row">
<div class="container">
<div class="row set-relative">
<div class="col-lg-4 accompagnement__informations">
<div class="accompagnement__image"></div>
<div class="accompagnement__texte">
<h2>Title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid blanditiis dignissimos fuga nobis, nulla, pariatur, quia quisquam reiciendis repellendus tempore vero voluptas voluptate voluptatibus. Alias ducimus impedit nostrum reprehenderit ut!</p>
</div>
</div>
<div class="col-lg-4 accompagnement__informations">
<div class="accompagnement__image"></div>
<div class="accompagnement__texte">
<h2>Title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda consectetur doloribus ducimus eveniet molestiae? Amet delectus, distinctio harum incidunt, laborum libero minima minus molestias quam repudiandae suscipit ut veniam voluptatum.</p>
</div>
</div>
<div class="col-lg-4 accompagnement__informations">
<div class="accompagnement__image"></div>
<div class="accompagnement__texte">
<h2>Title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores cumque eligendi expedita id itaque minus modi neque nostrum odio omnis provident quam quas quasi quisquam ratione repellendus, sapiente similique voluptas.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<footer>
<div class="container">
<div class="row">
<div class="col-lg-8">
<div class="row">
<div class="col-lg-3">
<ul class="list-unstyled">
<li>Menu</li>
<li>SubMenu</li>
<li>SubMenu</li>
<li>SubMenu</li>
</ul>
</div>
<div class="col-lg-3">
<ul class="list-unstyled">
<li>Menu</li>
<li>Submenu</li>
<li>Submenu</li>
<li>Submenu</li>
</ul>
</div>
<div class="col-lg-3">
<ul class="list-unstyled">
<li>Menu</li>
<li>Submenu</li>
<li>Submenu</li>
</ul>
</div>
<div class="col-lg-3">
<ul class="list-unstyled">
<li>Menu</li>
<li>Submenu</li>
<li>Submenu</li>
</ul>
</div>
</div>
<div class="row footer">
<p class="col-lg-6 footer__copyright">© 2017 Company</p>
<div class="col-lg-6 footer__appolo">
Plan
</div>
</div>
</div>
<div class="col-lg-4">
<div class="row">
<div class="col-lg-12 contacts">
<h2>Contacts</h2>
<p class="contacts__permanence">Blablabla</p>
<p class="contacts__disponibilite">Blablabla</p>
<p class="contacts__tel">Blablabla</p>
<p class="contacts__lieu">Blablabla</p>
</div>
</div>
</div>
</div>
</div>
</footer>
</body>
Thanks
If your block is inside a .container, you can't expand it outside the container, unless you make it position:absolute or something like this.
You could also change the .container in the footer into a .container-fluid, and then create 2 blocks inside for placing.
.container is made to be centered on devices > "xs".
Related
I building my own web page, and I was planning to place a timeline, I've investigated and found one that I want to take as a model, however, I only want to put two cards, but when I comment the rest of the cards, it gets misconfigured and loses its shape, placing itself the second card below the first when I want it to be next to it, how can I put it right next to it without affecting the rest of the structure?
/* Media Queries */
#mixin mq-xs {
#media (min-width: 320px) {
#content;
}
}
#mixin mq-sm {
#media (min-width: 480px) {
#content;
}
}
#mixin mq-md {
#media (min-width: 720px) {
#content;
}
}
#mixin mq-lg {
#media (min-width: 1000px) {
#content;
}
}
$background: #f7f7f7;
$box-shadow: 0px 1px 22px 4px rgba(0, 0, 0, 0.07);
$border: 1px solid rgba(191, 191, 191, 0.4);
$items: 5;
$rows: ceil($items/2);
/* Card sizing */
$card-height: 400px;
$card-width: 450px;
$inner-margin: 15px;
$number-size: 35px;
$stagger: 180px;
$outer-margin: 90px;
$marker-size: 9px;
/* Colors */
$steps: #46b8e9;
$colors: #46b8e9,
#3ee9d1,
#ce43eb,
#4d92eb;
$timeline: #bdbdbd;
/* Calculations */
$container-height: $rows * ($card-height + $outer-margin) + $stagger;
$container-width: $card-width*2 + $outer-margin*3;
$head-height: $number-size + 50;
$body-height: $card-height - $head-height;
$marker-dist: $card-width + $outer-margin/2 - $marker-size/2;
/* Placeholders */
#include mq-lg {
%arrow {
position: absolute;
content: "";
width: 0;
height: 0;
}
%marker {
position: absolute;
content: "";
width: $marker-size;
height: $marker-size;
background-color: $timeline;
border-radius: $marker-size;
box-shadow: 0px 0px 2px 8px $background;
}
}
/* Some Cool Stuff */
$counter: $items - $rows + 2;
#for $i from 1 through $rows {
.demo-card:nth-child(#{$i*2-1}) { order: $i }
.demo-card:nth-child(#{$i*2}) { order: $counter }
$counter: $counter + 1;
}
/* Border Box */
* {
box-sizing: border-box;
}
/* Fonts */
#timeline {
padding: 100px 0;
background: $background;
border-top: $border;
border-bottom: $border;
.logo
{
width: 60px;
border-radius: 10px;
}
h1 {
text-align: center;
font-size: 3rem;
font-weight: 200;
margin-bottom: 20px;
}
p.leader {
text-align: center;
max-width: 90%;
margin: auto;
margin-bottom: 45px;
}
.demo-card-wrapper {
position: relative;
margin: auto;
#include mq-lg {
display: flex;
flex-flow: column wrap;
width: $container-width;
height: $container-height;
margin: 0 auto;
}
&::after {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 50%;
border-left: $border;
#include mq-lg {
border-left: 1px solid $timeline;
}
}
}
.demo-card {
position: relative;
display: block;
margin: 10px auto 80px;
max-width: 94%;
#include mq-sm {
max-width: 60%;
box-shadow: $box-shadow;
}
#include mq-md {
max-width: 40%;
}
#include mq-lg {
max-width: $card-width;
height: $card-height;
margin: $outer-margin;
margin-top: $outer-margin/2;
margin-bottom: $outer-margin/2;
&:nth-child(odd) {
margin-right: $outer-margin/2;
.head::after {
#extend %arrow;
border-left-width: 15px;
border-left-style: solid;
left: 100%;
}
.head::before {
#extend %marker;
left: $marker-dist + 1;
}
}
&:nth-child(even) {
margin-left: $outer-margin/2;
.head::after {
#extend %arrow;
border-right-width: 15px;
border-right-style: solid;
right: 100%;
}
.head::before {
#extend %marker;
right: $marker-dist - 1;
}
}
&:nth-child(2) {
margin-top: $stagger;
}
}
.head {
background-color: black;
position: relative;
display: flex;
align-items: center;
color: #fff;
font-weight: 400;
.number-box {
display: inline;
float: left;
margin: $inner-margin;
padding: 10px;
font-size: $number-size;
line-height: $number-size;
font-weight: 600;
background: rgba(0, 0, 0, 0.17);
}
h2 {
text-transform: uppercase;
font-size: 1.3rem;
font-weight: inherit;
letter-spacing: 2px;
margin: 0;
padding-bottom: 6px;
line-height: 1rem;
#include mq-sm {
font-size: 165%;
line-height: 1.2rem;
}
span {
display: block;
font-size: 0.6rem;
margin: 0;
#include mq-sm {
font-size: 0.8rem;
}
}
}
}
.body {
background: #fff;
border: $border;
border-top: 0;
padding: $inner-margin;
#include mq-lg {
height: $body-height;
}
p {
font-size: 14px;
line-height: 18px;
margin-bottom: $inner-margin;
}
img {
display: block;
width: 100%;
}
}
#for $i from 1 through $items {
&--step#{$i} {
$color: nth($colors, ((($i - 1) % 4) + 1));
background-color: $color;
.head::after {
border-color: $color;
}
}
}
}
}
<section id=timeline>
<h1>A Flexbox Timeline</h1>
<p class="leader">All cards must be the same height and width for space calculations on large screens.</p>
<div class="demo-card-wrapper">
<div class="demo-card demo-card--step1">
<div class="head">
<div class="number-box">
<span><img src="../../assets/img/-.png" class="logo"></span>
</div>
<h2><span class="small">- (2022)</span> -</h2>
</div>
<div class="body">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta reiciendis deserunt doloribus consequatur, laudantium odio dolorum laboriosam.</p>
<img src="http://placehold.it/1000x500" alt="Graphic">
</div>
</div>
<div class="demo-card demo-card--step2">
<div class="head">
<div class="number-box">
<span><img src="../../assets/img/-.png" class="logo"></span>
</div>
<h2><span class="small">-</span> -</h2>
</div>
<div class="body">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta reiciendis deserunt doloribus consequatur, laudantium odio dolorum laboriosam.</p>
<img src="http://placehold.it/1000x500" alt="Graphic">
</div>
</div>
<div class="demo-card demo-card--step3">
<div class="head">
<div class="number-box">
<span>03</span>
</div>
<h2><span class="small">Subtitle</span> Adaptation</h2>
</div>
<div class="body">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta reiciendis deserunt doloribus consequatur, laudantium odio dolorum laboriosam.</p>
<img src="http://placehold.it/1000x500" alt="Graphic">
</div>
</div>
<div class="demo-card demo-card--step4">
<div class="head">
<div class="number-box">
<span>04</span>
</div>
<h2><span class="small">Subtitle</span> Consistency</h2>
</div>
<div class="body">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta reiciendis deserunt doloribus consequatur, laudantium odio dolorum laboriosam.</p>
<img src="http://placehold.it/1000x500" alt="Graphic">
</div>
</div>
<div class="demo-card demo-card--step5">
<div class="head">
<div class="number-box">
<span>05</span>
</div>
<h2><span class="small">Subtitle</span> Conversion</h2>
</div>
<div class="body">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta reiciendis deserunt doloribus consequatur, laudantium odio dolorum laboriosam.</p>
<img src="http://placehold.it/1000x500" alt="Graphic">
</div>
</div>
</div>
</section>
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>
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>
enter image description hereThis is the html code i have written for the index.html or home page. I have used sass code to compile it into the css . I tried everything i could find on the internet related to how to get rid of white space but nothing helped and i don't want to use sticky footer or keep its position set to fixed.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link
rel="stylesheet"
href="https://use.fontawesome.com/releases/v5.7.2/css/all.css"
integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr"
crossorigin="anonymous"
/>
<link
href="https://fonts.googleapis.com/css?family=Dosis&display=swap"
rel="stylesheet"
/>
<link rel="stylesheet" href="css/main.css" />
<title>John | UI/UX Designer & Photographer</title>
</head>
<body>
<!--header-->
<header id="header-home">
<div class="container">
<nav id="main-nav">
<h2>the deck</h2>
<ul>
<li>Home</li>
<li>About</li>
<li>Work</li>
<li>Contact Us</li>
</ul>
</nav>
<div class="header-content">
<h1>
I am John The
<span
class="txt-type"
data-wait="3000"
data-words='["Photographer", "Designer", "UI/UX Developer"]'
></span>
</h1>
<p class="lead">I specialize in UI and Photography</p>
View My Work
</div>
</div>
</header>
//These all the contents of the html page divided everything into sections A,B,C...respectively.
<!--SECTION A SPECIALIZE -->
<section id="home-a" class="text-center py-2">
<div class="container">
<h2 class="section-title">I SPECIALIZE IN</h2>
<div class="bottom-line"></div>
<p class="lead">
Photography as well as creating digital masterpieces and UI/UX layouts
for websites and mobile applications
</p>
<div class="specials">
<div>
<i class="fas fa-file-alt fa-2x"></i>
<h3>Concepting</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eveniet
beatae, omnis ipsa voluptates labore aperiam placeat, nostrum
nulla alias dignissimos?
</p>
</div>
<div>
<i class="fas fa-desktop fa-2x"></i>
<h3>UI/UX</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eveniet
beatae, omnis ipsa voluptates labore aperiam placeat, nostrum
nulla alias dignissimos?
</p>
</div>
<div>
<i class="fas fa-object-ungroup fa-2x"></i>
<h3>VISUAL DESIGN</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eveniet
beatae, omnis ipsa voluptates labore aperiam placeat, nostrum
nulla alias dignissimos?
</p>
</div>
<div>
<i class="fas fa-thumbs-up fa-2x"></i>
<h3>INTERACTION</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eveniet
beatae, omnis ipsa voluptates labore aperiam placeat, nostrum
nulla alias dignissimos?
</p>
</div>
</div>
</div>
</section>
<!--SECTION B STATS-->
<section id="home-b" class="text-center py-2">
<div class="stats">
<div>
<ul>
<li><i class="fas fa-users fa-3x"></i></li>
<li class="stats-title">Clients</li>
<li class="stats-numbers">100</li>
</ul>
</div>
<div>
<ul>
<li><i class="fas fa-award fa-3x"></i></li>
<li class="stats-title">Awards</li>
<li class="stats-numbers">3</li>
</ul>
</div>
<div>
<ul>
<li><i class="fas fa-hourglass-start fa-3x"></i></li>
<li class="stats-title">Hours Worked</li>
<li class="stats-numbers">3500</li>
</ul>
</div>
<div>
<ul>
<li><i class="fas fa-code-branch fa-3x"></i></li>
<li class="stats-title">Projects Completed</li>
<li class="stats-numbers">100</li>
</ul>
</div>
</div>
</section>
<!-- SECTION C MY CREATIVE PROCESS -->
<section id="home-c" class="text-center py-2">
<div class="container">
<h2 class="section-title">
MY CREATIVE PROCESS
</h2><div class="bottom-line"></div>
<p class="lead">All of my UI/UX and design projects are based off of a practiced
formula to get the result that I am looking for
</p>
<div class="process">
<div>
<i class="fas fa-file-alt fa-4x process-icon my-2">
<div class="process-step">1</div>
</i>
<div class="clear"></div>
<h3>DISCUSS THE PROJECT
</h3>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quasi voluptate
earum quaerat itaque officia soluta?
</div>
<div>
<i class="fas fa-desktop fa-4x process-icon my-2">
<div class="process-step">2</div>
</i>
<div class="clear"></div>
<h3>BRAINSTORMING ^ CONCEPT
</h3>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quasi voluptate
earum quaerat itaque officia soluta?
</div>
<div>
<i class="fas fa-object-ungroup fa-4x process-icon my-2">
<div class="process-step">3</div>
</i>
<div class="clear"></div>
<h3>UI/UX PLANNING
</h3>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quasi voluptate
earum quaerat itaque officia soluta?
</div>
<div>
<i class="fas fa-thumbs-up fa-4x process-icon my-2">
<div class="process-step">4</div>
</i>
<div class="clear"></div>
<h3>INTERACTION
</h3>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quasi voluptate
earum quaerat itaque officia soluta?
</div>
</div>
</div>
</section>
</div>
<!-- FOOTER -->
<footer id="main-footer">
<div class="footer-content container">
<p>Copyright © 2019. All Rights Reserved
</p>
<div class="social">
<i class="fab fa-twitter"></i>
<i class="fab fa-facebook"></i>
<i class="fab fa-instagram"></i>
<i class="fab fa-linkedin"></i>
</div>
</div>
</footer>
<script src="js/typewriter.js"></script>
</body>
</html>
I have used sass in the making of this website and all the code related to it is here.
#import "config";
#import "utilities";
#import "item_grid";
//GENERAL STYLES
* {
margin: 0;
padding: 0;
}
#main {
height: 100%;
}
body {
flex-direction: column;
margin: 0;
font-family: "Dosis", sans-serif;
line-height: 1.6;
}
a {
text-decoration: none;
color: $dark-color;
}
ul {
list-style: none;
}
h2,
h3,
h4 {
text-transform: uppercase;
}
img {
width: 100%;
}
//LOGO
#logo {
width: 70px;
height: 70px;
color: #fff;
text-transform: uppercase;
}
//MAIN NAV
#main-nav {
display: flex;
justify-content: space-between;
padding-top: 1rem;
ul {
display: flex;
}
li {
padding: 1rem 1.5rem;
}
a {
text-decoration: none;
color: #fff;
text-transform: uppercase;
border-bottom: 3px transparent solid;
padding-bottom: 0.5rem;
transition: border-color 0.5s;
&:hover {
border-color: $medium-color;
}
&.current {
border-color: $main-color;
}
}
}
//HEADER
#header {
//HEADER HOME WHOLE
&-home {
background: $bg-image no-repeat center right / cover;
color: #fff;
//HEADER CONTENT
.header-content {
padding-top: 20%;
text-align: center;
h1 {
font-size: 4rem;
line-height: 1.2;
}
}
}
// HEADER INNER PAGES CONTENT
&-inner {
background: $bg-image no-repeat 20% 30% / cover;
height: 5.5rem;
border-bottom: 3px solid $main-color;
}
}
//HOME SECTIONS
#home {
//HOME SECTION A
&-a {
padding-top: 100px;
width: 100%;
height: 20rem;
.container {
padding-left: 0;
padding-right: 0;
}
.specials {
margin-top: 1rem 0;
display: grid;
grid-gap: 1rem;
grid-template-columns: repeat(4, 1fr);
.fas {
color: $main-color;
padding-bottom: 0.8rem;
}
}
}
//HOME SECTION B
&-b {
height: 300px;
.container {
height: 100%;
padding: 0;
margin: 0;
}
.stats {
height: 100%;
display: grid;
grid-template-columns: repeat(4, 1fr);
li {
padding-top: 2rem;
line-height: 1;
&.stats-title {
font-size: 2rem;
font-weight: bold;
}
&.stats-numbers {
font-size: 1.5rem;
font-weight: bold;
}
}
div {
padding: 2rem 0;
margin: 0;
&:nth-child(odd) {
background: $light-color;
}
&:nth-child(even) {
background: $medium-color;
}
}
}
}
&-c {
margin-top: 50px;
height: 500px;
.container {
padding-left: 0;
padding-right: 0;
}
.process {
display: grid;
grid-gap: 3rem;
grid-template-columns: repeat(4, 1fr);
text-align: center;
&-step {
position: absolute;
top: 0;
right: 0;
font-size: 28px;
background: $main-color;
border-radius: 50%;
height: 15px;
width: 15px;
line-height: 15px;
padding: 1rem;
transition: all 1s;
}
//PROCESS ICON
&-icon {
border-radius: 50%;
background: $dark-color;
color: #fff;
padding: 2rem;
width: 70px;
height: 70px;
line-height: 70px;
text-align: center;
position: relative;
transition: all 1s;
&:hover {
background: $main-color;
width: 90px;
height: 90px;
line-height: 90px;
.process-step {
background: $dark-color;
}
}
}
}
}
}
// FOOTER
#main-footer {
background: $dark-color;
color: #fff;
height: 6rem;
.footer-content {
display: flex;
justify-content: space-between;
height: 6rem;
align-items: center;
}
.social .fab {
margin: 1rem;
border: 2px #fff solid;
border-radius: 50%;
height: 20px;
width: 20px;
line-height: 20px;
text-align: center;
padding: 0.5rem;
&:hover {
background: $main-color;
}
}
}
config.scss code
//VARIABLES
$website-width:1280px;
$main-color:#ffbc00;
$light-color: #f4f4f4;
$medium-color:#ccc;
$dark-color:#333;
$bg-image:url('../images/main.jpg');
//SET TEXT COLOR FUNCTION
#function set-text-color($color) {
#if(lightness($color) > 50 ) {
#return #000 ;
}
#else {
#return #fff;
}
}
utilities.scss code :
.container {
max-width: $website-width;
height: 100vh;
padding: 0 350px;
margin: auto;
overflow: hidden;
}
//BUTTONS
%btn-shared {
display: inline-block;
padding: 0.8rem 2rem;
transition: all 0.5s;
border: none;
cursor: pointer;
}
.btn {
&-main {
#extend %btn-shared;
color: #333;
background-color: $main-color;
}
&-light {
#extend %btn-shared;
color: #333;
background-color: $light-color;
}
&-dark {
#extend %btn-shared;
color: #f4f4f4;
background-color: $dark-color;
}
}
button[class^='btn-']:hover,
a[class^='btn-']:hover,
input[class^='btn-']:hover {
background-color: $main-color;
}
// ABOUT BACKGROUNDS
.bg {
&-main {
background: $main-color;
color: set-text-color($main-color);
}
&-dark {
background: $dark-color;
color: set-text-color($dark-color);
}
&-light {
background: $light-color;
color: set-text-color($light-color);
}
&-medium {
background: $medium-color;
color: set-text-color($medium-color);
}
}
.lead {
font-size: 1.3rem;
margin-bottom: 2rem;
}
.text-center {
text-align: center;
}
//PADDING
.py {
&-1 {
padding: 1rem 0;
}
&-2 {
padding: 2rem 0;
}
&-3 {
padding: 3rem 0;
}
&-4 {
padding: 4rem 0;
}
}
//MARGIN
.my {
&-1 {
margin: 1rem 0;
}
&-2 {
margin: 2rem 0;
}
&-1 {
margin: 3rem 0;
}
&-1 {
margin: 4rem 0;
}
}
.section-title {
font-size: 2rem ;
display: block;
padding-bottom: 0.5rem;
text-align: center;
font-weight: 100;
text-transform: uppercase;
}
.bottom-line {
height: 2px;
width: 3rem;
background: $main-color;
display: block;
margin: 0 auto 1rem auto;
}
The code related to item_grid.scss is completely unrelated to this page. Thank you for the help.
Have you tried this :
.footer {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
}
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>