Resize button height according to screen size - html

A button on a page design I'm playing with won't resize according to the defined screen width. It works fine for smaller screens but not for larger screens (800 px and above). I'm just starting out and learning as I go so this may be rather stupid! Sharing CSS code below.
Code on Jsfiddle
*,
*::before,
*::after {
box-sizing: border-box;
}
/*Custom properties, update if necessary*/
:root {
--ff-primary: 'Source Sans Pro', sans-serif;
--ff-secondary: 'Source Code Pro', monospace;
--fw-reg: 300;
--fw-bold: 900;
--clr-white: #fff;
--clr-grey: #303030;
--clr-blue: #16E0BD;
--fs-h1: 3rem;
--fs-h2: 2.25rem;
--fs-h3: 1.25rem;
--fs-body: 1rem;
--bs: 0.25em 0.25em 0.75em rgba(0, 0, 0, .25),
0.125em 0.125 0.25em rgba(0, 0, 0, 0.15);
}
#media (min-width: 800px) {
:root {
--fs-h1: 4.5rem;
--fs-h2: 3.75rem;
--fs-h3: 1.5rem;
--fs-body: 1.125rem;
}
}
/*General Styles*/
body {
background: var(--clr-white);
color: var(--clr-grey);
margin: 0;
font-family: var(--ff-primary);
font-size: var(--fs-body);
line-height: 1.6;
}
section {
padding: 5em 2em;
}
img {
display: block;
max-width: 100%;
}
strong {
font-weight: var(--fw-bold)
}
:focus {
outline: 3px solid var(--clr-blue);
outline-offset: 3px;
}
/* Buttons */
.btn {
display: inline-block;
padding: .5em 2.5em;
background: var(--clr-blue);
color: var(--clr-grey);
text-decoration: none;
cursor: pointer;
font-size: .8rem;
text-transform: uppercase;
letter-spacing: 2px;
font-weight: var(--fw-bold);
transition: transform 200ms ease-in-out;
}
.btn:hover {
transform: scale(1.1);
}
/*Typography*/
h1,
h2,
h3 {
line-height: 1;
margin: 0;
}
h1 {
font-size: var(--fs-h1)
}
h2 {
font-size: var(--fs-h2)
}
h3 {
font-size: var(--fs-h3)
}
.section__title {
margin-bottom: 0.25em;
}
.section__title--intro {
font-weight: var(--fw-reg);
}
.section__title--intro strong {
display: block;
}
.section__subtitle {
margin: 0;
font-size: var(--fs-h3);
}
.section__subtitle--intro,
.section__subtitle--about {
background: var(--clr-blue);
padding: .25em;
font-family: var(--ff-secondary);
margin-bottom: 1em;
}
/* Header section */
nav {
display: none;
}
/* Intro section */
.intro {
position: relative;
}
.intro__img {
box-shadow: var(--bs);
}
.section__subtitle--intro {
display: inline-block;
}
#media (min-width: 600px) {
.intro {
display: grid;
width: min-content;
margin: 0 auto;
grid-column-gap: 1em;
grid-template-areas:
"img title"
"img subtitle";
grid-template-columns: min-content max-content;
}
.intro__img {
grid-area: img;
min-width: 250px;
position: relative;
z-index: 2;
}
.section__subtitle--intro {
align-self: start;
grid-column: -1 / 1;
grid-row: 2;
text-align: right;
position: relative;
left: -1.5em;
width: calc(100% + 1.5em);
}
}
/*My services section*/
.myservices {
background-color: var(--clr-grey);
color: var(--clr-white);
background-size: cover;
background-image: url("https://portfolio-project-tl.s3-ap-southeast-1.amazonaws.com/computer-desk-1450x625.jpg");
background-blend-mode: multiply;
text-align: center;
}
.section__title--services {
color: var(--clr-blue);
position: relative;
}
.section__title--services::after {
content: '';
display: block;
width: 3em;
height: 1px;
margin: 0.5em auto 1em;
background: var(--clr-white);
opacity: 0.5;
}
.services {
margin-bottom: 4em;
}
.service {
max-width: 250px;
margin: 0 auto;
}
#media (min-width: 800px) {
.services {
display: flex;
max-width: 1000px;
margin-left: auto;
margin-right: auto;
}
.service+.service {
margin-left: 1.5em;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width initial-scale=1">
<title>Tanuj Lakhina's Portfolio</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/7.0.0/normalize.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.css" integrity="sha256-46qynGAkLSFpVbEBog43gvNhfrOj+BmwXdxFgVK/Kvc=" crossorigin="anonymous" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/css?family=Source+Code+Pro:400,900|Source+Sans+Pro:300,900&display=swap" rel="stylesheet">
<link rel="stylesheet" href="CSS/style.css">
</head>
<body>
<header>
<div class="logo">
<img src="https://portfolio-project-tl.s3-ap-southeast-1.amazonaws.com/logo.png" alt="">
</div>
<button class="nav-toggle" aria-label="toggle navigation">
<span class="hamburger"></span>
</button>
<nav class="nav">
<ul class="nav__list">
<li class="nav__item">Home</li>
<li class="nav__item">My services</li>
<li class="nav__item">About me</li>
<li class="nav__item">My work</li>
</ul>
</nav>
</header>
<!-- INTRODUCTION -->
<section class="intro" id="home">
<h1 class="section__title section__title--intro">
Hi, I am <strong>Tanuj Lakhina</strong>
</h1>
<p class="section__subtitle section__subtitle--intro">journalist</p>
<img src="https://portfolio-project-tl.s3-ap-southeast-1.amazonaws.com/me-313x313.jpg" alt="picture of Tanuj Lakhina" class="intro__img">
</section>
<!-- My services -->
<section class="myservices" id="services">
<h2 class="section__title section__title--services">What I do</h2>
<div class="services">
<div class="service">
<h3>Journalism</h3>
<p>Professional sports journalist with Firstpost (Network18) in Delhi with strong experience of working in digital newsrooms.</p>
</div><!-- / service -->
<div class="services">
<div class="service">
<h3>Social media</h3>
<p>Have worked in B2B and B2C environments for businesses, agency and analytical organisations. I've handled accounts of large entities with over a million customers.</p>
</div><!-- / service -->
<div class="service">
<h3>Data journalism</h3>
<p>Besides the run of the mill stories, I've put special emphasis on data stories and work to offer different perspective to a topic.</p>
</div><!-- / service -->
</div><!-- / services -->
My work
</section>
<!-- About me -->
<section class="about-me" id="about">
<h2 class="section__title section__title--about">Who I am?</h2>
<p class="section__subtitle section__subtitle--about">Journalist, social media enthusiast</p>
<div class="about-me__body">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Velit ut tortor pretium viverra suspendisse potenti nullam ac tortor. Nunc consequat interdum varius sit amet. </p>
<p>Morbi tristique senectus et netus et malesuada fames. Morbi quis commodo odio aenean. Et leo duis ut diam quam nulla porttitor massa id. Venenatis lectus magna fringilla urna porttitor rhoncus. Suspendisse potenti nullam ac tortor vitae.</p>
</div>
<img src="https://portfolio-project-tl.s3-ap-southeast-1.amazonaws.com/IMG-20190323-WA0037-244X406.jpg" alt="About me">
<!-- INSERT ABOUT ME PHOTO ABOVE -->
</section>
<!-- My work -->
<section class="my-work" id="work">
<h2 class="section__title">My work</h2>
<p class="section__subtitle"></p>
<div class="Portfolio">
<!-- Portfolio item 1 -->
<a href="#" class="Portfolio__item">
<img src="https://portfolio-project-tl.s3-ap-southeast-1.amazonaws.com/black-ball-point-pen-with-brown-spiral-notebook-240x240.jpg" alt="" class="portfolio__img"></a>
<!-- Portfolio item 2 -->
<a href="#" class="Portfolio__item">
<img src="https://portfolio-project-tl.s3-ap-southeast-1.amazonaws.com/data-analysis-240x240.jpg" alt="" class="portfolio__img"></a>
<!-- Portfolio item 3 -->
<a href="#" class="Portfolio__item">
<img src="https://portfolio-project-tl.s3-ap-southeast-1.amazonaws.com/newspaper-illustration-240x240.png" alt="" class="portfolio__img"></a>
</div>
</section>
<!-- FOOTER -->
<footer>
Tanujlakhina9#gmail.com
<ul class="social-list">
<li class="social-list__item"><a class="social-list__link" href="https://twitter.com/tanujlakhina"><i class="fa fa-twitter-square" style="font-size:36px"></i></a></li></ul></i>
<li class="social-list__item"><a class="social-list__link" href="https://www.facebook.com/tanujlakhina"><i class="fa fa-facebook-official" style="font-size:36px"></a></li></i>
</ul>
</footer>
</body>
</html>
P.S. It is still WIP.


In my opinion, use
.yourButton {
height: 100vh;
width: 100vw;
}
Use vh to get the screen view height and vw to get view width
From the simple style above, 100vh means 100% of the screen view height and same goes to vw
I hope this helps

Related

this website will not display properly and the text is a problem

So I have a school project due and my website will not display my text properly. Does anybody know the problem?
Here is the code
body {
background-image: image();
}
* {
box-sizing: border-box;
}
header {
background-color: navy;
padding: 34px;
}
.homestyle {
margin: 5px;
text-decoration: none;
color: white;
font-family: 'Prompt', sans-serif;
float: left;
}
.concertstyle {
margin: 5px;
text-decoration: none;
color: white;
font-family: 'Prompt', sans-serif;
float: left;
}
.sportstyle {
margin: 5px;
text-decoration: none;
color: white;
font-family: 'Prompt', sans-serif;
float: left;
}
.Receptenstyle {
margin: 5px;
text-decoration: none;
color: white;
font-family: 'Prompt', sans-serif;
float: left;
}
.Contactstyle {
margin: 5px;
text-decoration: none;
color: white;
font-family: 'Prompt', sans-serif;
float: left;
}
.foto_zwolle {
width: 150px;
float: right;
}
.knopanimatie a::after {
content: '';
width: 0%;
height: 2px;
background: #fff;
margin: auto;
transition: 0.5s;
display: block;
}
.knopanimatie a:hover::after {
width: 100%;
}
.footer {
color: white;
font-family: 'Prompt', sans-serif;
background-color: rgb(21, 108, 179);
text-align: center;
padding: 10px;
}
html,
body {
height: 100%;
margin: 0;
}
.wrapper {
min-height: 0%;
/* Equal to height of footer */
/* But also accounting for potential margin-bottom of last child */
margin-bottom: 0px;
z-index: 10;
}
.sticky {
top: 0;
padding: 0px;
font-size: 20px;
}
.grid-container {
display: grid;
grid-template-areas: 'header header header' 'zwolle zwolle zwolle' 'tekstlinks tekstmidden tekstrechts ' 'footer footer footer';
gap: 10px;
padding: 10px;
}
.tekstlinks {
grid-area: tekstlinks;
height: 100px;
width: 360px;
padding: 30px;
padding-top: 0px;
font-family: 'Prompt', sans-serif;
display: inline-block;
}
.tekstmidden {
grid-area: tekstmidden;
height: 100px;
display: inline-block;
width: 360px;
padding: 30px;
padding-top: 0px;
font-family: 'Prompt', sans-serif;
}
.zwolle {
grid-area: zwolle;
font-family: 'Prompt', sans-serif;
padding: 30px;
}
.tekstrechts {
grid-area: tekstrechts;
font-family: 'Prompt', sans-serif;
height: 100px;
width: 360px;
padding: 30px;
padding-top: 0px;
display: inline-block;
}
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="stylejustin.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=Prompt:ital,wght#1,100&display=swap" rel="stylesheet">
<title> Document </title>
</head>
<img class="foto_zwolle" src="logo_rechtop_klein.png" alt="tekst">
<body>
<header>
<div class="knopanimatie">
<a class="homestyle" href="home.html"> Home </a>
<a class="concertstyle" href="concerten.html"> Concerten </a>
<a class="sportstyle" href="sport.html"> Sport </a>
<a class="Receptenstyle" href="Recepten.html"> Recepten </a>
<a class="Contactstyle" href="contact.html"> Contact </a>
</div>
</header>
<div class="grid-container">
<div class="zwolle">
<h1> Nieuws uit Zwolle </h1>
</div>
<div class="tekstlinks">
<p> sapien et ligula ullamcorper. In aliquam sem fringilla ut morbius.</p>
</div>
<div class="tekstmidden">
<img src="/mainPags/Zwolle+op+hoogte.jpg" width="250px" style="z-index: 20;">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
</p>
<div class="tekstrechts">
<p>
In aliquam sem fringilla ut morbius.</p>
</div>
</div>
</div>
<div class="wrapper">
<div class="push"></div>
</div>
<div class="sticky">
<footer class="footer">
<h3> Footer </h3>
<p>Footerinfo</p>
<p> infovanfooter </p>
</footer>
</div>
</body>
</html>
```
Please note that some of this has been written in dutch, so don't pay attention to it. That is just my main language.
I tried messing with the padding, margin and even the gridbox but nothing helped. Please help me.

I'm unsure why none of my css transitions are working

So, I have a gallery that is laid out in a CSS grid. When I click on one of the items it opens info and images associated with that item. This info and images are also laid out in a grid.
My issue is that none of the transitions are working and I am not sure why and how to fix this.
// portfolio
$('.gallery .portfolio .portfolio-group a').click(function() {
var itemID = $(this).attr('href');
$('.gallery .portfolio').addClass('item_open');
$(itemID).addClass('item_open');
return false;
});
$('.close').click(function() {
$('.port, .gallery .portfolio').removeClass('item_open');
return false;
});
$(".gallery .portfolio .portfolio-group a").click(function() {
$('html, body').animate({
scrollTop: parseInt($("#top").offset().top)
}, 400);
});
*,
*:before,
*:after {
box-sizing: border-box;
}
body {
font-family: 'Lato', sans-serif;
font-weight: 300;
line-height: 1.5;
color: #333;
}
a {
color: #fff;
}
.row {
width: 100%;
max-width: 1170px;
margin: 0 auto;
padding: 0;
clear: both;
}
.row img {
max-width: 100%;
height: auto;
padding: 0;
margin: 0;
}
header {
background-color: #84b4b1;
color: #fff;
text-align: center;
padding: 30px 0 120px;
}
header h1 {
text-align: center;
text-transform: uppercase;
font-size: 65px;
font-weight: 400;
letter-spacing: 3px;
line-height: .8;
padding-top: 50px;
font-family: 'Montserrat', sans-serif;
}
header span {
text-transform: uppercase;
letter-spacing: 7px;
font-size: 25px;
line-height: 1;
}
header p {
padding-top: 30px;
}
.gallery {
padding: 40px 0 300px;
position: relative;
}
.clearfix:before,
.clearfix:after {
content: ".";
display: block;
overflow: hidden;
}
.clearfix:after {
clear: both;
}
.gallery .portfolio {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 5px;
}
.gallery .portfolio .portfolio-group {
overflow: hidden;
}
.gallery .portfolio .portfolio-group a {
display: block;
position: relative;
width: 85%;
height: 100%;
margin: 0;
padding: 0;
line-height: 0;
}
#media (min-width: 40em) {
.gallery .portfolio .portfolio-group a {
width: 100%;
}
}
#media (min-width: 64em) {
.gallery .portfolio .portfolio-group a {
width: 100%;
}
}
.gallery .portfolio .portfolio-group a:before {
position: absolute;
width: 32px;
height: 32px;
top: 40%;
left: 50%;
margin: -14px 0 0 -16px;
background: url(data:image/svg+xml;utf8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%0A%3C%21--%20Generator%3A%20Adobe%20Illustrator%2017.1.0%2C%20SVG%20Export%20Plug-In%20.%20SVG%20Version%3A%206.00%20Build%200%29%20%20--%3E%0A%3C%21DOCTYPE%20svg%20PUBLIC%20%22-//W3C//DTD%20SVG%201.1//EN%22%20%22http%3A//www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd%22%3E%0A%3Csvg%20version%3D%221.1%22%0A%09%20id%3D%22svg2%22%20xmlns%3Adc%3D%22http%3A//purl.org/dc/elements/1.1/%22%20xmlns%3Acc%3D%22http%3A//creativecommons.org/ns%23%22%20xmlns%3Ardf%3D%22http%3A//www.w3.org/1999/02/22-rdf-syntax-ns%23%22%20xmlns%3Asvg%3D%22http%3A//www.w3.org/2000/svg%22%20xmlns%3Asodipodi%3D%22http%3A//sodipodi.sourceforge.net/DTD/sodipodi-0.dtd%22%20xmlns%3Ainkscape%3D%22http%3A//www.inkscape.org/namespaces/inkscape%22%20inkscape%3Aversion%3D%220.48.4%20r9939%22%20sodipodi%3Adocname%3D%22icon-fullscreen.svg%22%0A%09%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20xmlns%3Axlink%3D%22http%3A//www.w3.org/1999/xlink%22%20x%3D%220px%22%20y%3D%220px%22%20viewBox%3D%220%200%20960%20560%22%0A%09%20enable-background%3D%22new%200%200%20960%20560%22%20xml%3Aspace%3D%22preserve%22%3E%0A%3Csodipodi%3Anamedview%20%20borderopacity%3D%221%22%20pagecolor%3D%22%23ffffff%22%20bordercolor%3D%22%23666666%22%20objecttolerance%3D%2210%22%20gridtolerance%3D%2210%22%20guidetolerance%3D%2210%22%20showgrid%3D%22false%22%20fit-margin-top%3D%220%22%20fit-margin-left%3D%220%22%20inkscape%3Azoom%3D%227.375%22%20inkscape%3Acx%3D%22-5.1525424%22%20inkscape%3Acy%3D%2216%22%20id%3D%22namedview11%22%20inkscape%3Awindow-x%3D%22-8%22%20inkscape%3Awindow-y%3D%22-8%22%20fit-margin-right%3D%220%22%20inkscape%3Apageopacity%3D%220%22%20fit-margin-bottom%3D%220%22%20inkscape%3Awindow-width%3D%221366%22%20inkscape%3Awindow-height%3D%22706%22%20inkscape%3Awindow-maximized%3D%221%22%20inkscape%3Apageshadow%3D%222%22%20inkscape%3Acurrent-layer%3D%22svg2%22%3E%0A%09%3C/sodipodi%3Anamedview%3E%0A%3Cg%3E%0A%09%3Crect%20x%3D%22220%22%20y%3D%22260%22%20fill%3D%22%23FFFFFF%22%20width%3D%22536%22%20height%3D%2224%22/%3E%0A%3C/g%3E%0A%3Cg%3E%0A%09%3Crect%20x%3D%22476%22%20y%3D%224%22%20fill%3D%22%23FFFFFF%22%20width%3D%2224%22%20height%3D%22556%22/%3E%0A%3C/g%3E%0A%3C/svg%3E%0A) no-repeat;
content: '';
opacity: 0;
z-index: 1;
-webkit-transition: all, 0.3s, linear;
transition: all, 0.3s, linear;
}
.gallery .portfolio .portfolio-group a:hover:before {
top: 50%;
opacity: 1;
}
.gallery .portfolio .portfolio-group a:after {
position: absolute;
width: 100%;
top: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.3);
content: '';
opacity: 0;
transition: all, 0.3s, linear;
}
.gallery .portfolio .portfolio-group a:hover:after {
opacity: 1;
}
.gallery .portfolio-item-container {
display: grid;
grid-template-columns: repeat(1, 1fr);
grid-gap: 5px;
}
#media (min-width: 64em) {
.gallery .portfolio-item-container {
grid-template-columns: repeat(2, 1fr);
}
}
.port {
position: absolute;
width: 100%;
top: 0;
left: 0;
padding-top: 100px;
background: #ffffff;
background-color: #fafafa;
z-index: 103;
visibility: hidden;
transform: translateY(-100%);
border-bottom: 1px solid #d0d0d0;
transition: (all, 0.5s, ease-in-out);
}
.port img {
width: 100%;
}
.port h1 {
font-size: 35px;
line-height: 1;
padding: 0;
}
.port h1>* {
opacity: 0;
transition: (all, 0.5s, linear);
}
.port.item_open {
visibility: visible;
transform: translateY(0%);
transition: (all, 0.4s, ease-in-out);
}
.port.item_open>* {
opacity: 1;
transition-delay: 0.5s;
}
.close {
width: 21px;
height: 21px;
background: url(data:image/svg+xml;utf8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%0A%3C%21--%20Generator%3A%20Adobe%20Illustrator%2017.1.0%2C%20SVG%20Export%20Plug-In%20.%20SVG%20Version%3A%206.00%20Build%200%29%20%20--%3E%0A%3C%21DOCTYPE%20svg%20PUBLIC%20%22-//W3C//DTD%20SVG%201.1//EN%22%20%22http%3A//www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd%22%3E%0A%3Csvg%20version%3D%221.1%22%0A%09%20id%3D%22svg2%22%20xmlns%3Adc%3D%22http%3A//purl.org/dc/elements/1.1/%22%20xmlns%3Acc%3D%22http%3A//creativecommons.org/ns%23%22%20xmlns%3Ardf%3D%22http%3A//www.w3.org/1999/02/22-rdf-syntax-ns%23%22%20xmlns%3Asvg%3D%22http%3A//www.w3.org/2000/svg%22%0A%09%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20xmlns%3Axlink%3D%22http%3A//www.w3.org/1999/xlink%22%20x%3D%220px%22%20y%3D%220px%22%20viewBox%3D%220%200%2021%2021%22%0A%09%20enable-background%3D%22new%200%200%2021%2021%22%20xml%3Aspace%3D%22preserve%22%3E%0A%3Cg%20id%3D%22layer1%22%20transform%3D%22translate%280%2C-1031.3622%29%22%3E%0A%09%3Cpath%20id%3D%22path2987%22%20fill%3D%22none%22%20stroke%3D%22%23000000%22%20d%3D%22M0%2C1031.4l21%2C21%22/%3E%0A%09%3Cpath%20id%3D%22path2989%22%20fill%3D%22none%22%20stroke%3D%22%23000000%22%20d%3D%22M21%2C1031.4l-21%2C21%22/%3E%0A%3C/g%3E%0A%3C/svg%3E%0A%0A) no-repeat;
position: absolute;
right: 50px;
margin-top: 50px;
opacity: 0;
z-index: 1004;
transition: (all, 0.1s, ease-in-out);
}
.item_open .close {
opacity: 1;
top: 0px;
transition: (all, 0.3s, ease-in-out);
}
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body translate="no" data-new-gr-c-s-check-loaded="8.896.0" data-gr-ext-installed="">
<link href='https://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Lato:300' rel='stylesheet' type='text/css'>
<header>
<h1>Portfolio Gallery</span>
</h1>
</header>
<div id="top"></div>
<!-- Projects -->
<section class="gallery clearfix">
<div class="row">
<div class="portfolio">
<a class="close" href="#"></a>
<div class="portfolio-group">
<a href="#item02">
<img src="https://cdn.dribbble.com/users/545884/screenshots/3981307/lorena2.png" alt="">
</a>
</div>
<!-- / div #1 -->
<div class="portfolio-group">
<a href="#item02">
<img src="https://cdn.dribbble.com/users/545884/screenshots/3892302/contact.png" alt="">
</a>
</div>
<!-- / div #2 -->
<div class="portfolio-group">
<a href="#item02">
<img src="https://cdn.dribbble.com/users/545884/screenshots/4154721/dive--001.png" alt="">
</a>
</div>
<!-- / div #3 -->
<div class="portfolio-group">
<a href="#item02">
<img src="https://cdn.dribbble.com/users/545884/screenshots/3695553/news.png" alt="">
</a>
</div>
<!-- / div #4 -->
<div class="portfolio-group">
<a href="#item02">
<img src="https://cdn.dribbble.com/users/545884/screenshots/3695553/news.png" alt="">
</a>
</div>
<!-- / div #5 -->
<div class="portfolio-group">
<a href="#item02">
<img src="https://cdn.dribbble.com/users/545884/screenshots/4360101/liberosis_--_12.png" alt="">
</a>
</div>
<!-- / div #6 -->
<div class="portfolio-group">
<a href="#item02">
<img src="https://cdn.dribbble.com/users/545884/screenshots/3148799/technical-book.jpg" alt="">
</a>
</div>
<!-- / div #7 -->
<div class="portfolio-group">
<a href="#item02">
<img src="https://cdn.dribbble.com/users/545884/screenshots/2883479/cover.jpg" alt="">
</a>
</div>
<!-- / div #8 -->
</div>
<!-- / .portfolio -->
</div>
<!-- / .row -->
<!-- Item 01-->
<div id="item01" class="port">
<div class="row">
<div class="description">
<h1>Item 01</h1>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus quis libero erat. Integer ac purus est. Proin erat mi, pulvinar ut magna eget, consectetur auctor turpis.
</div>
<!-- / .description -->
<img src="https://cdn.dribbble.com/users/545884/screenshots/3981307/lorena2.png" alt="">
</div>
<!-- / .row -->
</div>
<!-- / #item01-->
<!-- Item 02-->
<div id="item02" class="port">
<div class="row">
<div class="portfolio-item-container">
<div class="description">
<h1>Item 02</h1>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus quis libero erat. Integer ac purus est. Proin erat mi, pulvinar ut magna eget, consectetur auctor turpis.
</div>
<!-- / .description -->
<div class="portfolio-item">
<img src="dist/image/CAHQ-About-Us.jpg" alt="">
</div>
<div class="portfolio-item">
<img src="https://cdn.dribbble.com/users/545884/screenshots/3981307/lorena2.png" alt="">
</div>
<div class="portfolio-item">
<img src="https://cdn.dribbble.com/users/545884/screenshots/4360101/liberosis_--_12.png" alt="">
</div>
<div class="portfolio-item">
<img src="https://cdn.dribbble.com/users/545884/screenshots/4360101/liberosis_--_12.png" alt="">
</div>
<div class="portfolio-item">
<img src="https://cdn.dribbble.com/users/545884/screenshots/3981307/lorena2.png" alt="">
</div>
</div>
<!-- / .portfolio-item-container -->
</div>
<!-- / .row -->
</div>
<!-- / #item02-->
</section>
<!-- / Projects -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
</body>

I realized I made a mistake in having the transition code in parentheses. With that fix, everything works and !

Displaying <img> underneath other elements

:root {
--clr-primary: #0F052F;
--clr-secondary: #43D9B8;
--clr-light: #EEEEEE;
--fw-light: 300;
--fw-regular: 400;
--fw-medium: 500;
--fw-bold: 700;
}
* {
margin: 0;
box-sizing: border-box;
background-color: #FFFFFF;
}
body {
font-family: 'Poppins', sans-serif;
}
.wrapper {
width: 1440px;
margin: 0 auto;
padding: 0 100px;
}
/* Header - Navigation */
.desktop-nav {
display: flex;
justify-content: space-between;
align-items: center;
width: 1240px;
position: fixed;
z-index: 200;
top: 44px;
padding-right: 0;
}
.desktop-nav .menu-items {
display: flex;
list-style: none;
}
.desktop-nav .menu-items li {
margin: 0 27.5px;
}
.desktop-nav .menu-items li:nth-last-of-type(1) {
margin-right: 0;
}
.desktop-nav .menu-items li a {
text-decoration: none;
color: var(--clr-primary);
font-size: 16px;
font-weight: var(--fw-medium);
position: relative;
}
.desktop-nav .menu-items li a.active::after {
content: "";
position: absolute;
height: 3px;
width: 100%;
background-color: var(--clr-secondary);
left: 0;
bottom: -2px;
}
.desktop-nav .menu-items li a.btn {
color: white;
background-color: var(--clr-primary);
border-radius: 10px;
padding: 10px 23px;
}
/* BIA section */
.bia-container {
height: 100vh;
display: flex;
align-items: center;
justify-content: space-between;
}
.bia-container .left h1 {
font-size: 80px;
font-weight: var(--fw-bold);
margin: 60px 190px 18px 105px;
}
.bia-container .left p {
font-size: 18px;
font-weight: var(--fw-regular);
margin: 18px 195px 57px 105px;
}
.bia-container .left a.btn {
text-decoration: none;
color: rgb(0, 0, 0);
border-radius: 10px;
padding: 10px 23px;
border: 1px solid #43D9B8;
margin: 0 0 0 105px;
}
.bia-container .right {
padding-right: 105px;
}
/* Background header */
.bia-bg {
position: absolute;
z-index: -1;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- Google Fonts-->
<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=Poppins:wght#300;400;500;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="wrapper">
<nav class="desktop-nav">
<div class="logo">
<a href="#">
<img src="Images/bia-logo.svg" alt="">
</div>
<ul class="menu-items">
<li>
Home
</li>
<li>
Services
</li>
<li>
Contact
</li>
<li>
Neem contact op
</li>
</ul>
</nav>
<!-- End of desktop navigation -->
<header class="bia-container">
<div class="left">
<h1>Make data work for you</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ut neque faucibus gravida viverra
tristique. Morbi quis commodo interdum id risus. Vitae hac viverra dui quis lobortis parturient
purus. Libero pharetra tortor.</p>
Neem contact op header
</div>
<div class="right">
<img src="Images/header-analytics.svg" alt="">
</div>
<img class="bia-bg" src="Images/header-background.svg" alt="">
<!-- End of header section -->
</header>
</div>
<script src="main.js"></script>
</body>
</html>
I have a problem. I have a background image that I want to display, however when I give the image a z-index of -1, it becomes invisible and isn't displayed in the background. Does anyone have an idea why this might be happening?
<div class="right">
<img src="Images/header-analytics.svg" alt="">
</div>
.bia-bg {
position: absolute;
z-index: -1;
}
The class and image I'm talking about is found on line 56 (HTML) and the class and image is on line 117 (CSS).
For your reference, the code can be found here: JSFiddle.
Any help would be much appreciated!
What it's supposed to look like:
Design

To put a background on a div or other element you only need to use this on CSS:
background-image: url("./your_image.png");
Getting like this
html
<div class="bg_img">
<!-- something -->
</div>
css
.bg_img{
background-image: url("Images/header-analytics.svg");
}

You have given absolutely everything a default white background.
This means that something with z index -1 cannot be seen at all because elements with default 0 z index cover it in white.
Try removing that blanket setting.

CSS div align to bottom center

I'm trying to align my <div class="social-icons"> into bottom center of my sidebar.
Well icon is on bottom of the page, but on the left.
Screenshot of page: Page screenshot
My code:
#font-face {
font-family: 'FontAwesome';
src: url('../fonts/fontawesome-webfont.eot?v=4.2.0');
src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.2.0') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff?v=4.2.0') format('woff'), url('../fonts/fontawesome-webfont.ttf?v=4.2.0') format('truetype'), url('../fonts/fontawesome-webfont.svg?v=4.2.0#fontawesomeregular') format('svg');
font-weight: normal;
font-style: normal;
}
/*---------------------------------------------------------
1. Reset
-------------------------------------------------------- */
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
vertical-align: baseline;
}
.blue {
color: #06C;
}
.green {
color: #090;
}
main {
display: block;
}
body {
line-height: 1;
}
ol,
ul {
list-style: none;
}
blockquote,
q {
quotes: none;
}
blockquote:before,
blockquote:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
html {
font-size: 100%;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
a:focus {
outline: none;
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
nav,
section {
display: block;
}
audio,
canvas,
video {
display: inline-block;
*display: inline;
*zoom: 1;
}
audio:not([controls]) {
display: none;
}
sub,
sup {
line-height: 0;
position: relative;
vertical-align: baseline;
}
sup {
top: -.5em;
}
sub {
bottom: -.25em;
}
img {
border: 0;
-ms-interpolation-mode: bicubic;
}
button,
input,
select,
textarea {
font-size: 100%;
margin: 0;
vertical-align: baseline;
*vertical-align: middle;
}
button,
input {
line-height: normal;
*overflow: visible;
}
button::-moz-focus-inner,
input::-moz-focus-inner {
border: 0;
padding: 0;
}
button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
cursor: pointer;
-webkit-appearance: button;
}
input[type="search"] {
-webkit-appearance: textfield;
}
input[type="search"]:-webkit-search-decoration {
-webkit-appearance: none;
}
textarea {
overflow: auto;
vertical-align: top;
}
/*---------------------------------------------------------
2. Basic Style
-------------------------------------------------------- */
body {
font-size: 14px;
line-height: 24px;
color: #777777;
font-family: 'Verdana';
overflow-x: hidden;
}
a {
color: #006699;
-webkit-transition: all 150ms ease-in-out;
-moz-transition: all 150ms ease-in-out;
-ms-transition: all 150ms ease-in-out;
-o-transition: all 150ms ease-in-out;
transition: all 150ms ease-in-out;
text-decoration: none !important;
}
a:hover {
color: #555555;
}
h1,
h2,
h3,
h4,
h5 {
color: #555555;
font-weight: bold;
}
::-webkit-input-placeholder {
color: #999999;
}
:-moz-placeholder {
/* Firefox 18- */
color: #999999;
}
::-moz-placeholder {
/* Firefox 19+ */
color: #999999;
}
:-ms-input-placeholder {
color: #999999;
}
.main-content,
.banner-bg {
float: right;
width: 87%;
}
#media screen and (max-width: 1290px) {
.main-content,
.banner-bg {
width: 70%;
}
}
#media screen and (max-width: 992px) {
.main-content,
.banner-bg {
width: 100%;
}
}
.content-wrapper {
padding: 0 80px;
}
#media screen and (max-width: 992px) {
.content-wrapper {
padding: 0 30px;
}
}
h4.widget-title {
font-size: 16px;
font-family: 'Verdana';
text-transform: uppercase;
margin-bottom: 40px;
}
hr {
position: relative;
outline: 0;
border: 0;
width: 100%;
height: 4px;
background: #dddddd;
margin-top: 40px;
margin-bottom: 0;
}
.page-section {
padding-top: 80px;
}
/*---------------------------------------------------------
3. Header
-------------------------------------------------------- */
.sidebar-menu {
float: left;
width: 13%;
height: 100%;
position: fixed;
background-color: #384553;
color: white;
overflow-y: hidden;
}
#media screen and (max-width: 1290px) {
.sidebar-menu {
overflow-y: scroll;
width: 30%;
}
}
.top-section {
padding: 40px;
}
.profile-image {
width: 150px;
height: 150px;
border: 4px solid white;
border-color: #505050;
-webkit-border-radius: 75px;
border-radius: 75px;
overflow: hidden;
margin-bottom: 20px;
margin: auto;
}
.profile-image img {
width: 100%;
}
h3.profile-title {
margin-bottom: 5px;
color: white;
font-size: 18px;
font-family: 'Verdana';
margin-top: 20px;
}
.main-navigation {
margin: 30px 0;
}
.main-navigation li {
display: block;
}
.main-navigation li a {
padding: 15px 40px;
display: block;
color: white;
font-size: 14px;
}
.main-navigation li a i {
margin-right: 15px;
font-size: 24px;
}
.main-navigation li a:hover {
background: #5b6878;
}
.main-navigation li a.active {
background: #495461;
}
.main-navigation li a.active:hover {
background: #495461;
}
.social-icons {
padding: 30px 40px;
position: fixed;
bottom: 0;
margin: auto;
text-align: center;
}
/* .social-icons li {
display: inline-block;
margin-right: 20px;
} */
.social-icons a {
font-size: 18px;
color: white;
}
.social-icons a:hover {
color: #282e35;
}
.responsive-header {
background: #5f6d7e;
text-align: center;
}
#media screen and (max-width: 992px) {
.responsive-header .main-navigation {
margin-top: 10px;
display: none;
}
}
#media screen and (max-width: 992px) {
.responsive-header p {
color: white;
}
}
#media screen and (max-width: 992px) {
.responsive-header .profile-image {
float: left;
width: 100px;
height: 100px;
-webkit-border-radius: 50px;
border-radius: 50px;
overflow: hidden;
margin-right: 30px;
}
.responsive-header .profile-content {
text-align: left;
margin-top: 30px;
overflow: hidden;
}
}
#media screen and (max-width: 992px) {
.top-section {
padding-bottom: 0;
}
}
#media screen and (max-width: 992px) {
.main-navigation a {
padding: 10px;
}
.main-navigation a.active {
background: #5f6d7e !important;
}
.main-navigation a:hover {
background: #5f6d7e !important;
}
}
.toggle-menu {
width: 100%;
display: block;
padding: 20px;
margin-top: 30px;
background: #6cc0f7;
color: white;
font-size: 18px;
}
.toggle-menu:hover {
color: white;
}
/*---------------------------------------------------------
4. Main Content
-------------------------------------------------------- */
/*------ banner ------ */
.banner-bg {
padding: 180px 80px;
position: relative;
background: url("../img/7.jpg");
background-repeat: no-repeat;
background-position: center;
background-size: cover;
z-index: 2;
}
.banner-overlay {
position: absolute;
width: 100%;
height: 100%;
background: rgba(95, 109, 126, 0.4);
top: 0;
left: 0;
z-index: 3;
}
.welcome-text {
position: relative;
z-index: 4;
}
.welcome-text h2 {
font-size: 42px;
font-family: 'Verdana';
color: white;
margin-bottom: 30px;
}
.welcome-text h5 {
font-size: 22px;
color: white;
}
/*------ about us ------ */
.about-image {
overflow: hidden;
border: 4px solid #dddddd;
margin-bottom: 40px;
}
.about-image img {
width: 100%;
display: block;
}
/*------ projects ------ */
.projects-holder {
margin-right: 0;
margin-left: 0;
margin-top: 40px;
}
.projects-holder .col-md-4,
.projects-holder .col-md-4 {
padding-right: 1px;
padding-left: 1px;
}
.project-item {
width: 100%;
margin-bottom: 2px;
overflow: hidden;
position: relative;
}
.project-item img {
width: 100%;
display: block;
}
.project-item:hover .project-hover {
top: 0;
opacity: 1;
visibility: visible;
}
.project-hover {
position: absolute;
width: 100%;
height: 100%;
top: 40px;
left: 0;
background: rgba(0, 0, 0, 0.9);
opacity: 0;
visibility: 0;
-webkit-transition: all 200ms linear;
-moz-transition: all 200ms linear;
-ms-transition: all 200ms linear;
-o-transition: all 200ms linear;
transition: all 200ms linear;
}
.project-hover .inside {
position: absolute;
width: 100%;
left: 0;
bottom: 0;
padding: 30px;
}
.project-hover h5 {
font-size: 16px;
margin-bottom: 15px;
}
.project-hover h5 a {
color: white;
}
.project-hover p {
color: white;
font-size: 13px;
line-height: 20px;
}
/*------ contact ------ */
.contact-form {
margin-top: 40px;
}
.contact-form input,
.contact-form textarea {
width: 100%;
outline: 0;
border: 1px solid #aaaaaa;
padding: 12px;
color: #999999;
margin-bottom: 30px;
}
.contact-form input:focus,
.contact-form textarea:focus {
outline: 0;
}
.contact-form .button {
width: auto;
background: #5f6d7e;
color: white;
text-transform: uppercase;
border: 0;
}
/*---------------------------------------------------------
5. Footer
-------------------------------------------------------- */
#footer p.copyright-text {
margin: 40px 0;
font-size: 13px;
}
#footer p.copyright-text a {
color: #5f6d7e;
}
#footer p.copyright-text a:hover {
color: #6cc0f7;
}
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Autoservis Jiří Baloun</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/font-awesome.css">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/styles.css">
<script src="js/vendor/modernizr-2.6.2.min.js"></script>
</head>
<body>
<!-- SIDEBAR -->
<div class="sidebar-menu hidden-xs hidden-sm">
<div class="top-section">
<div class="profile-image">
<img src="img/profile.jpg">
</div>
<h3 class="profile-title" align="center">Autoservis Jiří Baloun</h3>
<!-- <p class="profile-description">Digital Photography</p> -->
</div>
<!-- top-section -->
<div class="main-navigation">
<ul class="navigation">
<li><i class="fa fa-globe"></i>O nás</li>
<li><i class="fa fa-pencil"></i>Služby</li>
<li><i class="fa fa-camera-retro"></i>Galerie</li>
<li><i class="fa fa-link"></i>Kontakt</li>
</ul>
</div>
<!-- .main-navigation -->
<div class="social-icons">
<i class="fa fa-facebook-square" style="font-size:36px"></i>
</div>
<!-- .social-icons -->
</div>
<!-- .sidebar-menu -->
<div class="banner-bg" id="top">
<div class="banner-overlay"></div>
<div class="welcome-text">
<h2>Autoservis Jiří Baloun</h2>
<h5>Servis osobních vozidel</h5>
</div>
</div>
<!-- MAIN CONTENT -->
<div class="main-content">
<div class="fluid-container">
<div class="content-wrapper">
<!-- ABOUT -->
<div class="page-section" id="about">
<div class="row">
<div class="col-md-12">
<h4 class="widget-title">O nás</h4>
<!-- <div class="about-image">
<img src="img/8.jpg" alt="about me">
</div> -->
<p></p>
<hr>
</div>
</div>
<!-- #about -->
</div>
<!-- PROJECTS -->
<div class="page-section" id="projects">
<div class="row">
<div class="col-md-12">
<h4 class="widget-title">Náhled naší práce</h4>
<p>Duis sed odio sit amet nibh vulputate cursus a sit amet mauris. Morbi accumsan ipsum velit. Nam nec tellus a odio tincidunt auctor a ornare odio. Maecenas et lorem molestie, maximus justo dignissim, cursus nisl. Nullam at ante quis ex pharetra
pulvinar quis id dolor. Integer lorem odio, euismod ut sem sit amet, imperdiet condimentum diam.</p>
</div>
</div>
<div class="row projects-holder">
<div class="col-md-4 col-sm-6">
<div class="project-item">
<img src="img/1.jpg" alt="">
<div class="project-hover">
<div class="inside">
<h5>Pellentesque porta ligula</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam cursus</p>
</div>
</div>
</div>
</div>
<div class="col-md-4 col-sm-6">
<div class="project-item">
<img src="img/2.jpg" alt="">
<div class="project-hover">
<div class="inside">
<h5>Pellentesque porta ligula</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam cursus</p>
</div>
</div>
</div>
</div>
<div class="col-md-4 col-sm-6">
<div class="project-item">
<img src="img/3.jpg" alt="">
<div class="project-hover">
<div class="inside">
<h5>Pellentesque porta ligula</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam cursus.</p>
</div>
</div>
</div>
</div>
<div class="col-md-4 col-sm-6">
<div class="project-item">
<img src="img/4.jpg" alt="">
<div class="project-hover">
<div class="inside">
<h5>Pellentesque porta ligula</h5>
<p>Quisque mattis sit amet dolor eu scelerisque. Vivamus bibendum massa et nisl tempus commodo.</p>
</div>
</div>
</div>
</div>
<div class="col-md-4 col-sm-6">
<div class="project-item">
<img src="img/5.jpg" alt="">
<div class="project-hover">
<div class="inside">
<h5>Pellentesque porta ligula</h5>
<p>Quisque mattis sit amet dolor eu scelerisque. Vivamus bibendum massa et nisl tempus commodo.</p>
</div>
</div>
</div>
</div>
<div class="col-md-4 col-sm-6">
<div class="project-item">
<img src="img/6.jpg" alt="">
<div class="project-hover">
<div class="inside">
<h5>Pellentesque porta ligula</h5>
<p>Quisque mattis sit amet dolor eu scelerisque. Vivamus bibendum massa et nisl tempus commodo.</p>
</div>
</div>
</div>
</div>
</div>
<!-- .projects-holder -->
</div>
<hr>
<!-- CONTACT -->
<div class="page-section" id="contact">
<div class="row">
<div class="col-md-12">
<h4 class="widget-title">KONTAKTUJTE NÁS</h4>
<p>Máte-li jakékoliv dotazy ohledně nabízených služeb, cen a podobně, neváhejte nás kontaktovat telefonicky nebo prostřednictvím tohoto formuláře.</p>
</div>
</div>
<div class="row">
<form action="#" method="post" class="contact-form">
<fieldset class="col-md-4 col-sm-6">
<input type="text" id="your-name" placeholder="Vaše jméno">
</fieldset>
<fieldset class="col-md-4 col-sm-6">
<input type="email" id="email" placeholder="Váš email">
</fieldset>
<fieldset class="col-md-4 col-sm-12">
<input type="text" id="your-subject" placeholder="Předmět zprávy">
</fieldset>
<fieldset class="col-md-12 col-sm-12">
<textarea name="message" id="message" cols="30" rows="6" placeholder="Napište nám"></textarea>
</fieldset>
<fieldset class="col-md-12 col-sm-12">
<input type="submit" class="button big default" value="Odeslat">
</fieldset>
</form>
</div>
<!-- .contact-form -->
</div>
<hr>
<div class="row" id="footer">
<div class="col-md-12 text-center">
<p class="copyright-text">Copyright © 2021 Autoservis Jiří Baloun</p>
</div>
</div>
</div>
</div>
</div>
<script src="js/vendor/jquery-1.10.2.min.js"></script>
<script src="js/min/plugins.min.js"></script>
<script src="js/min/main.min.js"></script>
</body>
</html>

Use this:
.social-icons {
padding: 30px 40px;
position: absolute;
bottom: 0;
margin: auto;
text-align: center;
width: 100%;
left: 0;
right: 0;
}

If you give width to your social-icons you can align your items to center.
like below;
.social-icons {
padding: 30px 40px;
position: fixed;
bottom: 0;
margin: auto;
text-align: center;
width: 100%;
}

How do I make stop my nav from overflowing onto my div

I am learning front end web development and I am stuck with how to make my website responsive. I am currently trying to stop my navigation from overlapping onto the next div container. How do I do this please and if you have any other tips on how to make my website responsive that would be great thanks.
Am I using the media queries correctly? I'm now aware I should be using a mobile first approach, but at first I was just copying a mockup I saw online so I had to do it the other way around.
My code is on codepen, here: https://codepen.io/wmufunde/pen/vYYWOBy
<html>
<head>
<title>Best Bakery Company</title>
<link href="https://fonts.googleapis.com/css?family=Jomolhari|Tangerine|Work+Sans&display=swap" rel="stylesheet">
</head>
<header>
<nav>
<ul>
<li id="logo-top">Best Bakery Company</li>
<li class= "nav">WELCOME</li>
<li class= "nav">MENU</li>
<li class= "nav">RESERVATIONS</li>
<li class= "nav">NEWS</li>
<li class= "nav">CONTACT</li>
<li class= "nav"><i class="fab fa-twitter"></i></li>
<li class= "nav"><i class="fab fa-facebook-f"></i></li>
<li><i class="fab fa-instagram"></i></li>
</ul>
</nav>
<div id="headings">
<h1>Pastry with love</h1>
<h2>We're bringing you fresh ingredients<br> everyday in ways you can't resist.</h2>
<button class="btn">Menu</button>
</div>
</header>
<body>
<div class="row" id="background1">
<div class="column">
<h1>Art of cakes</h1>
<h2>We create delicious memories</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Adipiscing elit pellentesque habitant morbi. Mauris augue neque gravida in fermentum et sollicitudin ac.</p>
<h3>Chef cook</h3>
<div = id="chef"><img src="img/chef.jpg" align="middle"></div>
<p id="cursive">Unique creatives for unique reasons</p>
</div>
<div class="column" id="relative">
<div class ="row-pastry" id="padding">
<img src="http://wadzanai.co.uk/100daysofcode/Day7/img/pastry1.jpg">
<img src="http://wadzanai.co.uk/100daysofcode/Day7/img/pastry2.jpg">
</div>
<div class="row-pastry">
<img src="http://wadzanai.co.uk/100daysofcode/Day7/img/pastry3.jpg">
<img src="http://wadzanai.co.uk/100daysofcode/Day7/img/pastry4.jpg">
</div>
<div id="icon"><p>TASTES SO <br>GOOD!</p></div>
</div>
</div>
<div class="row" id="background2">
<div class="column center"id="white">
<h1>Tasty Pancakes</h1>
<h2>Season Favourites</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Adipiscing elit pellentesque habitant morbi. Mauris augue neque gravida in fermentum et sollicitudin ac.</p>
<div class="image-circle">
<img src="http://wadzanai.co.uk/100daysofcode/Day7/img/blueberry.jpg">
<img src="http://wadzanai.co.uk/100daysofcode/Day7/img/pancake.jpg">
<img src="http://wadzanai.co.uk/100daysofcode/Day7/img/pancake2.jpg">
</div>
</div>
</div>
<div class="row" id="background3">
<div class="column breakfast">
<h1>Breakfast</h1>
<p>7AM Breakfast? We're Open!</p>
<h2>Full Breakfast</h2>
<p>Lorem ipsum dolor sit amet</p>
<h3>£12.50</h3>
<h2>Toast and Jam</h2>
<p>Lorem ipsum dolor sit amet</p>
<h3>3.50</h3>
<h2>Muffins</h2>
<p>Lorem ipsum dolor sit amet</p>
<h3>£4.99</h3>
</div>
</div>
<div class="row" id="background4">
<div class="column meal">
<img src="http://wadzanai.co.uk/100daysofcode/Day7/img/page4/wheat.jpg">
<h1>Wheat</h1>
<img src="http://wadzanai.co.uk/100daysofcode/Day7/img/page4/eggs.jpg">
<h1>Eggs</h1>
<img src="http://wadzanai.co.uk/100daysofcode/Day7/img/page4/cheese.jpg">
<h1>Cheese</h1>
</div>
<div class="column sandwich">
<h1>The Jibarito Sandwich</h1>
<h2>The Best Sandwich you've Ever Tasted!</h2>
<img src="http://wadzanai.co.uk/100daysofcode/Day7/img/page4/sandwich.jpg">
</div>
</div>
<script src="https://kit.fontawesome.com/5b02610863.js" crossorigin="anonymous"></script>
</body>
<footer>
<ul>
<li>Our Menu</li>
<li>Gallery</li>
<li>Culture</li>
<li id="logo-footer">Best Bakery Company</li>
<li>Events</li>
<li>Catering</li>
<li>Visit Us</li>
</ul>
</footer>
/* ==========================================
Page 1 & Navigation
============================================ */
header {
background-image: url("http://wadzanai.co.uk/100daysofcode/Day7/img/header.jpg");
background-repeat: no-repeat;
background-size: cover;
height: 100%;
width: 100%;
}
nav {
position: fixed;
top: -20px;
z-index: 1500;
width: 100%;
/* display: block; */
}
nav ul {
display: flex;
flex-direction: row;
justify-content: space-around;
flex-wrap: wrap;
background: rgba(0,0,0, 0.5);
height: 50px;
}
a {
text-decoration: none;
color:white;
}
nav ul li {
list-style: none;
color: white;
padding-top: 1%;
font-family: 'Work Sans', sans-serif;
}
#logo-top {
font-family: 'Tangerine', cursive;
font-size: 45px;
padding-top: 0;
flex-grow: 5;
}
nav ul li {
flex-grow: 1;
}
header h1 {
font-family: 'Jomolhari', serif;
color: white;
font-size: 50px;
letter-spacing: 5px;
}
header h2 {
font-family: 'Work Sans', sans-serif;
font-size: 20px;
color: white;
letter-spacing: 5px;
}
#headings {
display: flex;
min-height: 80vh;
width: 100%;
flex-direction: column;
}
#headings h1,h2, .btn {
margin: auto;
}
.btn {
padding: 20px 80px;
background: rgba(0,0,0, 0.5);
border-radius: 50px;
border-color: black;
color:white;
}
.row {
display: flex;
justify-content: flex-start;
position: relative;
height: 100vh;
}
/* ==========================================
Page2
============================================ */
#background1 {
background-color: beige;
}
.column{
width:50vw;
}
.column h1, h2 {
font-family: 'Jomolhari', serif;
}
.column h1, h2, h3, p, #chef img {
text-align: center;
}
.column h1 {
font-size: 50px;
color: #330000;
}
.column h2 {
font-size: 25px;
color: saddlebrown;
}
.column p {
font-family: 'Work Sans', sans-serif;
}
#cursive{
font-family: 'Tangerine', cursive;
font-size:50px;
}
#chef img{
border-radius: 50%;
width: 15vw;
height: 20vh;
display: block;
margin-left: auto;
margin-right: auto;
}
.row-pastry img {
height: 25vh;
width: 150%;
}
.row-pastry {
width: 25%;
display: flex;
padding-left: 5vw;
}
#padding {
padding-top: 15vh;
}
#icon{
width: 50%;
position: absolute;
top: 27%;
right: 26.5%;
background-color: white;
height: 200px;
display: flex;
clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}
#icon p{
padding-top: 20%;
padding-left: 35%;
}
#relative {
position: relative;
}
/* ==========================================
Page 3
============================================ */
#background2 {
background-image: url(http://wadzanai.co.uk/100daysofcode/Day7/img/background2.jpg);
background-repeat: no-repeat;
background-size: cover;
}
.center {
margin: auto;
}
#white {
background: white;
height:60%;
width:50vw;
margin: auto;
padding: 2%;
}
.image-circle {
display: flex;
flex-direction: row;
justify-content: space-around;
min-height: 50vh;
}
.image-circle img {
height: 10vh;
width: 5vw;
border-radius: 50%;
}
/* ==========================================
Page 4 - Breakfast Menu
============================================ */
#background3 {
background-image: url(http://wadzanai.co.uk/100daysofcode/Day7/img/background3.jpg);
background-repeat: no-repeat;
background-size: cover;
display: flex;
min-width: 50vw;
}
.breakfast {
background:rgba(255, 255, 255, 0.75);
margin:auto;
width: 25vw;
height: 100vh;
}
/* ==========================================
Page 5 - Sandwich
============================================ */
#background4 {
background: beige;
padding: 2%;
}
.meal {
display: flex;
flex-direction: column;
justify-content: space-between;
min-width: 50vw;
}
.meal img {
width: 10vw;
border-radius: 50%;
margin: auto;
}
.meal h1 {
font-size: 25px;
text-align: left;
margin: auto;
}
.sandwich img {
width: 33vw;
}
/* ==========================================
Footer
============================================ */
footer {
background-color: saddlebrown;
}
footer ul li {
list-style: none;
color:black;
font-size: 25px;
font-family: 'Work Sans', sans-serif;
flex-grow: 1;
}
footer ul {
display: flex;
justify-content: space-between;
align-items: center;
}
#logo-footer {
font-family: 'Tangerine', cursive;
font-size: 45px;
flex-grow: 2;
}
/* ==========================================
Transitions and Transforms
============================================ */
li a:hover {
color: yellow;
}
.btn {
transition-duration: 2s;
transition-property: scale;
}
.fab {
transition-duration: 0.5s;
transition-property: scale;
}
.fab:hover, .btn:hover {
transform: scale(1.2);
}
/* Page 2 */
.image-circle img {
transition-duration: 1s;
transition-property: transform;
}
.image-circle img:hover {
transform: rotate(30deg);
}
/* ==========================================
Page 1 & Navigation Media Queries
============================================ */
#media screen and (max-width: 850px) {
nav ul {
display: flex;
flex-direction: column;
flex-wrap: nowrap;
height: 250px;
text-align: center;
}
footer ul {
flex-direction: column;
flex-wrap: nowrap
}
.breakfast {
width: 50vw;
}
.center h1 {
font-size: 30px;
}
.center h2 {
font-size: 20px;
}
.center p {
font-size: 15px;
}
}
#media screen and (max-width: 625px) {
.sandwich h1 {
font-size: 30px;
}
.sandwich h2 {
font-size: 20px;
}
}
#media screen and (max-width: 600px) {
.row-pastry {
flex-direction: column;
}
.row-pastry img {
height: auto;
}
#icon {
display: none;
}
}