hi uh how do I put the footer underneath my side nav, it works for my header but I don't know how to do it for the actual footer.
also sorry uh another question, how do I make it so the wording on like a smaller screen shows? because the side nav goes to the bottom of the page but the words don't show
Right now your footer is contained within your main tag:
<main>
<section>
<article>
<h1> Homepage </h1>
<p> ......................... </p>
</article>
</section>
<div class="footer">
<footer>
<p>Copyright © 2021 My Portfolio</p>
</div>
</main>
Your main tag doesn't take the whole width of the page, which is why the footer is smaller than your header.
Putting your footer outside of the main tag will fix your issue
<main>
<section>
<article>
<h1> Homepage </h1>
<p> ......................... </p>
</article>
</section>
</main>
<div class="footer">
<footer>
<p>Copyright © 2021 My Portfolio</p>
</div>
You are missing a few matching tags so please always be weary of that, you can do the following if this is what you are referring to:
You can create a new nav-item element:
<li class="nav-item">
Copyright © 2021 My Portfolio
</li>
:root {
font-size: 17px;
font-family: 'Open Sans';
--text-primary: black;
--text-secondary: white;
--bg-primary: white;
--bg-secondary: #4F3466FF;
--transition-speed: 600ms;
}
body {
color: black;
background-color: white;
margin: 0;
padding: 0;
}
body::-webkit-scrollbar {
width: 0.25rem;
}
body::-webkit-scrollbar-track {
background: black;
}
body::-webkit-scrollbar-thumb {
background: #93385FFF;
}
main {
margin-left: 5rem;
padding: 1rem;
}
.navbar {
position: fixed;
background-color: #93385FFF;
transition: width 600ms ease;
overflow: scroll;
}
.navbar-nav {
list-style: none;
padding: 0;
margin: 10;
display: flex;
flex-direction: column;
align-items: center;
height: 100%;
}
.nav-item {
width: 100%;
}
.nav-item:last-child {
margin-top: auto;
}
.nav-link {
display: flex;
align-items: center;
height: 5rem;
color: var(--text-primary);
text-decoration: black;
transition: var(--transition-speed);
}
.nav-link:hover {
filter: grayscale(0%) opacity(1);
background: var(--bg-secondary);
color: var(--text-secondary);
}
.link-text {
display: none;
margin-left: 1rem;
}
.nav-link svg {
width: 50rem;
min-width: 2rem;
margin: 0 1.5rem;
}
.navbar:hover .logo svg {
transform: rotate(-180deg);
}
#media only screen and (max-width: 600px) {
.navbar {
bottom: 0;
width: 100vw;
height: 5rem;
}
.logo {
display: none;
}
.navbar-nav {
flex-direction: row;
}
.nav-link {
justify-content: center;
}
main {
margin: 100;
}
}
/* Large screens */
#media only screen and (min-width: 600px) {
.navbar {
top: 0;
width: 5rem;
height: 100vh;
}
.navbar:hover {
width: 20rem;
}
.navbar:hover .link-text {
display: inline;
}
.navbar:hover .logo svg
{
margin-left: 20rem;
}
.navbar:hover .logo-text
{
left: 0px;
}
}
.logo {
font-weight: bold;
text-transform: uppercase;
margin-bottom: 1rem;
text-align: center;
color: var(--text-secondary);
background: var(--bg-secondary);
font-size: 1.5rem;
letter-spacing: 0.3ch;
width: 100%;
}
.logo svg {
transform: rotate(0deg);
transition: var(--transition-speed);
}
.logo-text
{
display: inline;
position: absolute;
left: -999px;
transition: var(--transition-speed);
}
::-webkit-scrollbar {
width: 0px;
background: transparent;
}
.header {
padding: 10px;
text-align: center;
background: #4F3466FF;
color: white;
font-size: 30px;
}
a {
color: #9F6B99FF;
}
a:visited {
color: #636;
}
a:hover, a:active, a:focus {
color: black;
}
.footer {
text-align: center;
background-color: #4F3466FF;
color: white;
size: 15px
}
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script defer src="theme.js"></script>
<link rel="stylesheet" href="style.css" />
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,700&display=swap" rel="stylesheet" />
</head>
<div class="header">
<h3> Level 2 Website Development Page </h3>
<img src=http://public.media.smithsonianmag.com/legacy_blog/smiley-face-1.jpg>
</div>
<body>
<nav class="navbar">
<ul class="navbar-nav">
<li class="logo">
<a href="#" class="nav-link">
<span class="link-text logo-text">Digital Portfolio</span>
<svg aria-hidden="true" focusable="false" data-prefix="fad" data-icon="angle-double-right" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" class="svg-inline--fa fa-angle-double-right fa-w-14 fa-5x">
<g class="fa-group">
<path
fill="currentColor"
d="M224 273L88.37 409a23.78 23.78 0 0 1-33.8 0L32 386.36a23.94 23.94 0 0 1 0-33.89l96.13-96.37L32 159.73a23.94 23.94 0 0 1 0-33.89l22.44-22.79a23.78 23.78 0 0 1 33.8 0L223.88 239a23.94 23.94 0 0 1 .1 34z"
class="fa-secondary"
></path>
<path
fill="currentColor"
d="M415.89 273L280.34 409a23.77 23.77 0 0 1-33.79 0L224 386.26a23.94 23.94 0 0 1 0-33.89L320.11 256l-96-96.47a23.94 23.94 0 0 1 0-33.89l22.52-22.59a23.77 23.77 0 0 1 33.79 0L416 239a24 24 0 0 1-.11 34z"
class="fa-primary"
></path>
</g>
</svg>
</a>
</li>
<li class="nav-item">
<a href="home.html" class="active">
<span class="link-text">Home</span>
</a>
</li>
<li class="nav-item">
<a href="about.html" class="nav-link">
<span class="link-text">About Me & CV & Hobbies</span>
</a>
</li>
<li class="nav-item">
<a href="units.html" class="nav-link">
<span class="link-text">Units</span>
</a>
</li>
<li class="nav-item">
<a href="unit1.html" class="nav-link">
<span class="link-text">Unit 1: The Online World</span>
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<span class="link-text">Unit 2: Technology Systems</span>
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<span class="link-text">Unit 3 & 13: Website Development & Software Development</span>
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<span class="link-text">Unit 9: Spreadsheet Development</span>
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<span class="link-text">Unit 10: Database Development</span>
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<span class="link-text">Unit 12: Software Development</span>
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<span class="link-text">Contact Me</span>
</a>
</li>
<li class="nav-item">
Copyright © 2021 My Portfolio
</li>
</ul>
</nav>
<article>
<main>
<section>
<article>
<h1> Homepage </h1>
<p> ......................... </p>
</article>
</section>
<div class="footer">
</div>
</main>
</article>
</body>
Am unable to get what you are asking. Is this what you expecting ?
*, *:before, *:after {
box-sizing: border-box;
}
body {
margin: 40px;
background-color: #fff;
color: #444;
}
h1, p {
margin: 0 0 1em 0;
}
.wrapper {
max-width: 940px;
margin: 0 20px;
display: grid;
grid-gap: 10px;
}
#media screen and (min-width: 500px) {
/* no grid support? */
.sidebar {
float: left;
width: 19.1489%;
}
.content {
float: right;
width: 79.7872%;
}
.wrapper {
margin: 0 auto;
grid-template-columns: 1fr 3fr;
}
.header, .footer {
grid-column: 1 / -1;
/* needed for the floated layout */
clear: both;
}
}
.wrapper > * {
background-color: #444;
color: #fff;
border-radius: 5px;
padding: 20px;
font-size: 150%;
/* needed for the floated layout*/
margin-bottom: 10px;
}
/* We need to set the widths used on floated items back to auto, and remove the bottom margin as when we have grid we have gaps. */
#supports (display: grid) {
.wrapper > * {
width: auto;
margin: 0;
}
}
<div class="wrapper">
<header class="header">My header</header>
<aside class="sidebar">Sidebar</aside>
<article class="content">
<h1>2 column, header and footer</h1>
<p>This example uses line-based positioning, to position the header and footer, stretching them across the grid.</p>
</article>
<footer class="footer">My footer</footer>
</div>
Related
For some reason, the bottom border on my button disappears on hover, and I have no idea why. It works perfectly locally, but when I check my site live it disappears.
Here is my Codepen https://codepen.io/ecanada138/pen/ExXRXoW, which is the exact code on my repo.
Here is the site https://8thvisionmedia.netlify.app/, where you can see the problem but it does not show up on CodePen or locally
#font-face {
font-family: cocogoose-regular;
src: url('../fonts/Cocogoose-Classic-Medium-trial.ttf');
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: 'Montserrat', sans-serif;
}
body {
font-family: 'Open Sans', sans-serif;
line-height: 1.5;
}
.navbar-nav a {
list-style-type: none;
text-align: center;
display: inline-block;
margin: 0px;
padding: 0px 10px 0px 10px;
border-right: 1px solid rgb(255, 255, 255);
height: 20px;
}
.vimeo-wrapper {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
/* pointer-events: none; */
overflow: hidden;
}
.vimeo-wrapper iframe {
width: 100vw;
height: 56.25vw;
/* Given a 16:9 aspect ratio, 9/16*100 = 56.25 */
min-height: 100vh;
min-width: 177.77vh;
/* Given a 16:9 aspect ratio, 16/9*100 = 177.77 */
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
/* z-index: -1; */
}
.phone-nav {
display: none;
}
.navbar-nav {
display: flex;
flex-direction: column;
margin-top: 1rem;
color: rgb(255, 255, 255);
font-size: 1rem;
}
.navbar-toggler:focus {
text-decoration: none;
outline: 0;
box-shadow: 0 0 0 0.1rem;
border: 1px solid rgb(255, 255, 255);
}
.custom-toggler .navbar-toggler-icon {
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255,255,255, 1.0)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
}
.navbar-toggler:focus {
box-shadow: none;
}
.desktop-nav-container {
flex-direction: row;
justify-content: center;
}
/* .nav-link-desktop::after{
content: ' |';
} */
#media screen and (max-width: 992px) {
.phone-nav {
display: block;
}
}
.home-container {
height: 100vh;
z-index: 1000;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
color: rgb(255, 255, 255);
}
.home-row {
padding: 0 10rem 0 10rem;
z-index: 1000;
}
.home-text {
text-align: center;
font-size: 1.2rem;
letter-spacing: 3px;
}
.home-col {
width: 100%;
}
.col-logo {
position: absolute;
left: 2rem;
bottom: 1rem;
margin-bottom: 0.5rem;
padding: 0;
}
.row-copyright {
position: absolute;
right: 2rem;
bottom: 1rem;
font-family: 'Montserrat', sans-serif;
}
.vision-media-logo {
width: 3rem;
}
a {
color: rgb(255, 255, 255) !important;
font-size: 14px;
}
.fa {
font-size: 2rem;
}
ul {
text-align: center;
}
#media screen and (min-width: 1399px) {
.home-row {
padding: 0 20rem 0 20rem;
}
}
#media screen and (min-width: 1800px) {
.home-row {
padding: 0 35rem 0 35rem;
}
}
#media screen and (min-width: 2200px) {
.home-row {
padding: 0 50rem 0 50rem;
}
}
#media screen and (max-width: 767px) {
.navbar-nav {
margin-right: 0;
}
.home-row {
padding: 0 3rem 0 3rem;
}
}
#media screen and (max-width: 575px) {
.home-row {
padding: 0 1rem 0 1rem;
margin-top: -8rem;
}
.home-text {
font-size: 1rem;
}
.vision-media-logo {
width: 2rem;
}
.col-logo {
position: absolute;
left: 1rem;
bottom: 1rem;
}
.row-copyright {
position: absolute;
right: 1rem;
bottom: 0rem;
font-family: 'Montserrat', sans-serif;
font-size: 12px;
}
}
/* .myIcon {
margin-left: 3rem;
margin-right: 3rem;
}
.hide {
visibility: hidden;
font-size: 1rem;
margin-top: 10px;
opacity: 0;
text-transform: uppercase;
text-align: center;
transition: 0.8s;
}
.myIcon:hover .hide {
visibility: visible;
opacity: 1;
}
.myIcon {
z-index: 1000;
}
*/
#media screen and (max-width: 576px) {
.vimeo-wrapper {
background-image: url('../images/home-screen-bg.jpg');
background-position: center;
background-size: cover;
}
.vimeo-wrapper iframe {
display: none;
}
.phone-container {
position: relative;
}
}
#media screen and (max-width: 515px) {
.fa-col {
display: flex;
flex-direction: row;
}
}
#media screen and (min-width: 992px) {
.navbar-expand-lg .navbar-nav .nav-link {
padding-right: 0.75rem;
padding-left: 0.75rem;
}
.desktop-nav-container {
display: none !important;
}
}
.col-copyright {
margin-bottom: 1rem;
}
#media screen and (max-width: 992px) {
.navbar-nav a {
list-style-type: none;
text-align: center;
display: inline-block;
margin: 0px;
padding: 0.5rem 1rem;
border: none;
height: 100%;
font-size: 1rem;
}
}
.create-button {
background-color: rgba(255, 255, 255, 0);
color: rgb(255, 255, 255);
outline: 0;
border: 1px solid rgb(255, 255, 255) !important;
border-bottom: 1px solid rgb(255, 255, 255) !important;
font-family: 'cocogoose-regular';
letter-spacing: 2px;
margin: auto;
padding: 1rem 2rem;
text-align: center;
text-decoration: none;
transition: 0.5s ease;
}
.create-button a {
text-decoration: none;
}
.create-button:hover {
background-color: rgba(255, 255, 255, 0.3);
/* color: rgb(255, 255, 255); */
/* outline: 0; */
/* border: 1px solid rgb(255, 255, 255); */
/* font-family: 'cocogoose-regular'; */
/* letter-spacing: 2px; */
/* width: 100%; */
/* padding: 1rem 2rem; */
transform: scale(1.1);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous" />
<!-- Font Awesome -->
<script src="https://kit.fontawesome.com/5826f42d14.js" crossorigin="anonymous"></script>
<!-- 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=Montserrat:wght#400&display=swap" rel="stylesheet" />
<!-- CSS SHEETS -->
<link rel="stylesheet" href="css/index.css" />
<title>8th Vision Media | Real Estate Video and Photo Production</title>
<link rel="shortcut icon" type="image/png" href="./images/8-vision-logo-favicon.ico" />
</head>
<body>
<!--------------------------------------- NAV BAR --------------------------------------------------->
<div class="phone-container">
<nav class="navbar navbar-expand-xxxxxxl phone-nav">
<div class="container-fluid">
<button class="navbar-toggler custom-toggler ms-auto" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse flex-column align-items-end" id="navbarNav">
<ul class="navbar-nav flex-column">
<!-- <li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li> -->
<li class="nav-item">
<a class="nav-link" href="./gallery.html">Video Gallery</a>
</li>
<li class="nav-item">
<a class="nav-link" href="./core-values.html">Core Values </a>
</li>
<li class="nav-item">
<a class="nav-link" href="./contact.html">Get In Touch</a>
</li>
<!-- <li class="nav-item">
<a class="nav-link" href="./our-people.html">Our People</a>
</li> -->
<li class="nav-item">
<a class="nav-link" target="_blank" href="https://www.instagram.com/8thvisionmedia/">Our Work</a
>
</li>
</ul>
</div>
</div>
</nav>
<nav class="navbar navbar-expand-lg desktop-nav">
<div class="container-fluid">
<div
class="collapse navbar-collapse desktop-nav-container"
id="navbarNavAltMarkup"
>
<div class="navbar-nav">
<a
class="nav-link nav-link-desktop"
aria-current="page"
href="./contact.html"
>Get In Touch</a
>
<a class="nav-link nav-link-desktop" href="./core-values.html"
>Core Values
</a>
<a class="nav-link nav-link-desktop" href="./gallery.html">Video Gallery</a
>
<a
style="border-right: none; text-decoration: none"
target="_blank"
href="https://www.instagram.com/8thvisionmedia/"
>Our Work</a
>
</div>
</div>
</div>
</nav>
<div class="vimeo-wrapper">
<iframe
src="https://player.vimeo.com/video/570788340?background=1&autoplay=1&loop=1&byline=0&title=0"
frameborder="0"
webkitallowfullscreen
mozallowfullscreen
allowfullscreen
></iframe>
<div>
<div class="container-fluid home-container">
<div class="row home-row">
<div class="col home-col">
<!-- <p class="home-text">
We create powerful visual content for brands that help drive
sales, growth and engagement.
</p> -->
<button
onClick="window.open('https://www.8thvisionmedia.com/contact');"
class="create-button"
>
<a
href="./contact.html
"
>CREATE WITH US
</a>
</button>
</div>
</div>
<!-- <div class="row fa-row text-center">
<div class="col fa-col">
<span>
<a
href="https://www.instagram.com/8thvisionmedia/"
target="_blank"
><i class="myIcon fab fa-instagram fa-2x"
><p class="hide">What We Do</p></i
></a
></span
><span
><a href="mailto:create#8thvisionmedia.com"
><i class="myIcon far fa-envelope fa-2x"
><p class="hide">Take Your Next Step</p></i
></a
>
</span>
</div>
</div> -->
<div class="row row-logo">
<div class="col col-logo">
<img class="vision-media-logo" src="./images/8th-vision-logo.png" />
</div>
</div>
<div class="row row-copyright">
<div class="col col-copyright">
<a>© 2021 8th Vision Media</a>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>
</body>
</html>
remove transform: scale(1.1);
it worked
It worked fine on firefox. But I saw the issue on edge. and solved it by adding padding to .home-col class.
add the following and it should work fine:
.home-col {
padding: 10px;
}
I dont know exactly the reason, but changing "scale" value will solve the problem :
transform: scale(1.2); for example
I am trying to convert a left sidebar to be compatible on the right.
I tried a few things but nothing worked for me.
basically, I need a right-to-left direction, because all my site is from right-to-left.
anyone can help me? here is my code (to be honest it is not really mine):
Thank you very much
/*===== GOOGLE FONTS =====*/
#import url("https://fonts.googleapis.com/css2?family=Nunito:wght#400;600;700&display=swap");
/*===== VARIABLES CSS =====*/
:root{
--header-height: 3rem;
--nav-width: 68px;
/*===== Colors =====*/
--first-color: #4723D9;
--first-color-light: #AFA5D9;
--white-color: #F7F6FB;
/*===== Font and typography =====*/
--body-font: 'Nunito', sans-serif;
--normal-font-size: 1rem;
/*===== z index =====*/
--z-fixed: 100;
}
/*===== BASE =====*/
*,::before,::after{
box-sizing: border-box;
}
body{
position: relative;
margin: var(--header-height) 0 0 0;
padding: 0 1rem;
font-family: var(--body-font);
font-size: var(--normal-font-size);
transition: .5s;
}
a{
text-decoration: none;
}
/*===== HEADER =====*/
.header{
width: 100%;
height: var(--header-height);
position: fixed;
top: 0;
left: 0;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 1rem;
background-color: var(--white-color);
z-index: var(--z-fixed);
transition: .5s;
}
.header__toggle{
color: var(--first-color);
font-size: 1.5rem;
cursor: pointer;
}
.header__img{
width: 35px;
height: 35px;
display: flex;
justify-content: center;
border-radius: 50%;
overflow: hidden;
}
.header__img img{
width: 40px;
}
/*===== NAV =====*/
.l-navbar{
position: fixed;
top: 0;
left: -30%;
width: var(--nav-width);
height: 100vh;
background-color: var(--first-color);
padding: .5rem 1rem 0 0;
transition: .5s;
z-index: var(--z-fixed);
}
.nav{
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
overflow: hidden;
}
.nav__logo, .nav__link{
display: grid;
grid-template-columns: max-content max-content;
align-items: center;
column-gap: 1rem;
padding: .5rem 0 .5rem 1.5rem;
}
.nav__logo{
margin-bottom: 2rem;
}
.nav__logo-icon{
font-size: 1.25rem;
color: var(--white-color);
}
.nav__logo-name{
color: var(--white-color);
font-weight: 700;
}
.nav__link{
position: relative;
color: var(--first-color-light);
margin-bottom: 1.5rem;
transition: .3s;
}
.nav__link:hover{
color: var(--white-color);
}
.nav__icon{
font-size: 1.25rem;
}
/*Show navbar movil*/
.show{
left: 0;
}
/*Add padding body movil*/
.body-pd{
padding-left: calc(var(--nav-width) + 1rem);
}
/*Active links*/
.active{
color: var(--white-color);
}
.active::before{
content: '';
position: absolute;
left: 0;
width: 2px;
height: 32px;
background-color: var(--white-color);
}
/* ===== MEDIA QUERIES=====*/
#media screen and (min-width: 768px){
body{
margin: calc(var(--header-height) + 1rem) 0 0 0;
padding-left: calc(var(--nav-width) + 2rem);
}
.header{
height: calc(var(--header-height) + 1rem);
padding: 0 2rem 0 calc(var(--nav-width) + 2rem);
}
.header__img{
width: 40px;
height: 40px;
}
.header__img img{
width: 45px;
}
.l-navbar{
left: 0;
padding: 1rem 1rem 0 0;
}
/*Show navbar desktop*/
.show{
width: calc(var(--nav-width) + 156px);
}
/*Add padding body desktop*/
.body-pd{
padding-left: calc(var(--nav-width) + 188px);
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- ===== BOX ICONS ===== -->
<link href='https://cdn.jsdelivr.net/npm/boxicons#2.0.5/css/boxicons.min.css' rel='stylesheet'>
<!-- ===== CSS ===== -->
<link rel="stylesheet" href="assets/css/styles.css">
<title>Sidebar menu responsive</title>
</head>
<body id="body-pd">
<header class="header" id="header">
<div class="header__toggle">
<i class='bx bx-menu' id="header-toggle"></i>
</div>
<div class="header__img">
<img src="assets/img/perfil.jpg" alt="">
</div>
</header>
<div class="l-navbar" id="nav-bar">
<nav class="nav">
<div>
<a href="#" class="nav__logo">
<i class='bx bx-layer nav__logo-icon'></i>
<span class="nav__logo-name">Bedimcode</span>
</a>
<div class="nav__list">
<a href="#" class="nav__link active">
<i class='bx bx-grid-alt nav__icon'></i>
<span class="nav__name">Dashboard</span>
</a>
<a href="#" class="nav__link">
<i class='bx bx-user nav__icon'></i>
<span class="nav__name">Users</span>
</a>
<a href="#" class="nav__link">
<i class='bx bx-message-square-detail nav__icon'></i>
<span class="nav__name">Messages</span>
</a>
<a href="#" class="nav__link">
<i class='bx bx-bookmark nav__icon'></i>
<span class="nav__name">Favorites</span>
</a>
<a href="#" class="nav__link">
<i class='bx bx-folder nav__icon'></i>
<span class="nav__name">Data</span>
</a>
<a href="#" class="nav__link">
<i class='bx bx-bar-chart-alt-2 nav__icon'></i>
<span class="nav__name">Analytics</span>
</a>
</div>
</div>
<a href="#" class="nav__link">
<i class='bx bx-log-out nav__icon'></i>
<span class="nav__name">Log Out</span>
</a>
</nav>
</div>
<h1>Components</h1>
<!--===== MAIN JS =====-->
<script>
/*===== SHOW NAVBAR =====*/
const showNavbar = (toggleId, navId, bodyId, headerId) => {
const toggle = document.getElementById(toggleId),
nav = document.getElementById(navId),
bodypd = document.getElementById(bodyId),
headerpd = document.getElementById(headerId)
// Validate that all variables exist
if (toggle && nav && bodypd && headerpd) {
toggle.addEventListener('click', () => {
// show navbar
nav.classList.toggle('show')
// change icon
toggle.classList.toggle('bx-x')
// add padding to body
bodypd.classList.toggle('body-pd')
// add padding to header
headerpd.classList.toggle('body-pd')
})
}
}
showNavbar('header-toggle', 'nav-bar', 'body-pd', 'header')
/*===== LINK ACTIVE =====*/
const linkColor = document.querySelectorAll('.nav__link')
function colorLink() {
if (linkColor) {
linkColor.forEach(l => l.classList.remove('active'))
this.classList.add('active')
}
}
linkColor.forEach(l => l.addEventListener('click', colorLink))
</script>
</body>
</html>
Thank you
I am currently doing the Freecodecamp course, but I got a little stuck on one of the projects. This is the current state of my project: https://codepen.io/otapadar/full/JjRaoex (I am trying to copy this website: https://codepen.io/freeCodeCamp/full/zNBOYG). The second section (My Projects) has images within a grid. I am trying to resize the images, such that each image covers about 80-90% of the parent element, just like the site I am trying to copy.
When you look at my website, you see that the images are not resizing. I have tried fixing this by using the following property on my images: object-fit: cover. This doesn't fix it, sadly.
Any help on fixing this would be greatly appreciated. Thanks in advance!
HTML:
<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
<nav id="navbar">
<ul>
<li><a class="nav-link" href="#welcome-section">About</a></li>
<li><a class="nav-link" href="#projects">Work</a></li>
<li><a class="nav-link" href="#contact">Contact</a></li>
</ul>
</nav>
<main>
<section id="welcome-section">
<h1>Hey, I am Brad</h1>
<p>Web Developer</p>
</section>
<section id="projects">
<h2 class="projects-header">My Projects</h2>
<container class="project-grid">
<a class="project-tile" target="_blank">
<img class="project-image" src="https://raw.githubusercontent.com/freeCodeCamp/cdn/master/build/testable-projects-fcc/images/tribute.jpg">
<p class="project-title">Tribute Page</p>
</a>
<a class="project-tile" target="_blank">
<img class="project-image" src="https://raw.githubusercontent.com/freeCodeCamp/cdn/master/build/testable-projects-fcc/images/random-quote-machine.png">
<p class="project-title">Random Quote Machine</p>
</a>
<a class="project-tile" target="_blank">
<img class="project-image" src="https://raw.githubusercontent.com/freeCodeCamp/cdn/master/build/testable-projects-fcc/images/calc.png">
<p class="project-title">JavaScript Calculator</p>
</a>
<a class="project-tile" target="_blank">
<img class="project-image" src="https://raw.githubusercontent.com/freeCodeCamp/cdn/master/build/testable-projects-fcc/images/map.jpg">
<p class="project-title">Map Data</p>
</a>
<a class="project-tile" target="_blank">
<img class="project-image" src="https://raw.githubusercontent.com/freeCodeCamp/cdn/master/build/testable-projects-fcc/images/wiki.png">
<p class="project-title">Wikipedia Viewer</p>
</a>
<a class="project-tile" target="_blank">
<img class="project-image" src="https://raw.githubusercontent.com/freeCodeCamp/cdn/master/build/testable-projects-fcc/images/tic-tac-toe.png">
<p class="project-title">Tic Tac Toe</p>
</a>
</container>
<a class="button" href="https://codepen.io/otapadar" target="_blank">Show All</a>
</section>
<section id="contact">
<h1>Let's Work Together</h1>
<p>How do you take your coffee?</p>
<container class="social-icons">
<a class="profile-link" target="_blank"></a>
<a class="profile-link" target="_blank"></a>
<a class="profile-link" target="_blank"></a>
<a class="profile-link" target="_blank"></a>
<a class="profile-link" target="_blank"></a>
</container>
</section>
</main>
CSS
#import url('https://fonts.googleapis.com/css2?family=Raleway&display=swap');
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html, body {
font-family: 'Raleway';
scroll-behavior: smooth;
}
#navbar {
position: fixed;
display: flex;
justify-content: flex-end;
top: 0;
left: 0;
right: 0;
width: 100%;
background-color: #be3144;
}
#navbar ul {
display: flex;
list-style: none;
margin-right: 2rem;
}
a {
text-decoration: none;
color: #f0f0f0;
}
.nav-link {
display: block;
padding: 1.5rem;
font-size: 1.3rem;
font-weight: bold;
}
#welcome-section {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #000;
background-image: linear-gradient(62deg, #3a3d40 0%, #181719 100%)
}
#welcome-section > h1 {
font-size: 4rem;
color: #f0f0f0;
font-weight: 700;
margin-bottom: 1.5rem;
}
#welcome-section > p {
color: #be3144;
font-size: 2rem;
}
#projects {
background-color: #45567d;
padding: 6rem 2rem;
text-align: center;
}
.projects-header {
font-size: 3rem;
color: #f0f0f0;
margin: 0 auto 2rem auto;
}
.project-grid {
display: grid;
width: 100%;
grid-gap: 1rem;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
margin-bottom: 4rem;
}
.project-tile {
background-color: #303841;
}
.project-image {
height: calc(100%-6rem);
width: 100%;
object-fit: cover;
}
.project-title {
font-size: 1.5rem;
padding: 1.5rem 0.5rem;
font-weight: bold;
}
.button {
padding: 0.5rem 1rem;
font-size: 1.5rem;
background-color: #303841;
}
The problem in your css is this line height: calc(100%-6rem); just add spaces around the operator to be height: calc(100% - 6rem);
you should take white space after and befor minis like that
height:calc(100% - 6rem)
add max-width:100%; to project-image class in css and also you can set a custom width or height in img element
project-image{
height: 300px;
width: 600px;
max-width:100%;
object-fit: cover;
}
In my project I have footer with image as background.
I set it inside css. You can see it below. It looks nice only in big screen devices but ugly in mobile screen. How to make image responsive?
I don't have much experience in frontend and I would like to know what are the options?
I use bootstrap 4 by the way.
Here the link to jsfiddle.
/*
* START: Footer
*/
footer {
background: url('http://enjoyjumping.kz/static/img//footer.png') no-repeat;
background-size: 100% 100%;
width: 100%;
height: 500px;
bottom: 0;
position: absolute;
}
footer .row {
align-items: flex-end;
}
.flex-container {
display: flex;
flex-direction: column;
}
.flex-container > div {
width: 100px;
margin: 10px;
text-align: center;
line-height: 75px;
font-size: 30px;
}
.social {
display: flex;
justify-content: center;
flex-wrap: wrap;
}
.social__button {
display: block;
width: 70px;
height: 70px;
border-radius: 100%;
border-color: #fff;
position: relative;
cursor: pointer;
margin: 5px;
text-align: center;
}
.social__button i {
display: inline-block;
position: absolute;
left: 0;
top: 0;
height: 70px;
line-height: 70px;
width: 70px;
font-size: 30px;
z-index: 2;
transition: 0.3s;
color: black;
border: 2px solid;
border-radius: 100%;
}
.social__button i:hover {
color: white;
}
.copyright {
margin-bottom: 2.1rem !important;
font-size: 18px;
font-weight: bold;
}
.menu-link {
color: black !important;
font-weight: bold;
}
.menu-link-li {
margin: 10px;
}
.footer-menu {
margin-bottom: 0.7rem !important;
}
/*
* END: Footer
*/
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<footer>
<div class="container-fluid h-100">
<div class="row h-100">
<div class="col-sm text-center footer-menu">
<ul class="list-unstyled">
<li class="menu-link-li">
<a class="menu-link no-underline text-uppercase" href="/about/">About Us</a>
</li>
<li class="menu-link-li">
<a class="menu-link no-underline text-uppercase" data-toggle="modal" data-target="#citiesModel" style="cursor: pointer;">Our clubs</a>
</li>
<li class="menu-link-li">
<a class="menu-link no-underline text-uppercase" href="/coaches/">News</a>
</li>
<li class="menu-link-li">
<a class="menu-link no-underline text-uppercase" href="/bonus/">Events</a>
</li>
</ul>
</div>
<div class="col-sm text-center">
<div class="flex-container">
<div class="w-100">
<div class="social">
<a href="#" class="social__button facebook">
<i class="fa fa-facebook"></i>
</a>
<a href="#" class="social__button instagram">
<i class="fa fa-instagram"></i>
</a>
<a href="#" class="social__button vk">
<i class="fa fa-vk"></i>
</a>
<a href="#" class="social__button youtube">
<i class="fa fa-youtube-play"></i>
</a>
</div>
</div>
<div class="w-100">
<span>+7(701)</span><strong>262-47-50</strong>
</div>
</div>
</div>
<div class="col-sm text-center">
<p class="copyright">Copyright © 2018 example.com</p>
</div>
</div>
</div>
</footer>
You need to change the background-size and background-position attributes of <footer>:
footer {
background: url('http://enjoyjumping.kz/static/img/footer.png') no-repeat top center /cover;
}
See it working: https://jsfiddle.net/7mejchb8/11/
Edit, based on comments: See this example on how to keep footer glued to the bottom of the page on all devices, while allowing it to have a variable height, without using position:absolute: https://jsfiddle.net/websiter/d4n1sxop/
CSS behind it is:
body {
min-height: 100vh;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
}
header {
flex-grow: 0;
}
main {
flex-grow: 1;
}
footer {
flex-grow: 0;
display: flex;
flex-direction: column;
justify-content: flex-end;
min-height: 500px;
}
I would like to center the text on my homepage vertical in the middel of the page. Right now i tried to do this with a percentage, but this isn't the right way because when i open the webpage on my phone or an ipad the text doesn't center. Does anyone know how i can center it the right way?
#charset "UTF-8";
/* CSS Document */
body {
background: white;
}
html, body{
width: 100%;
margin: 0;
padding: 0;
height:100%;
}
/* wrapper */
#wrapper {
min-height: 100%;
position: relative;
}
/* menu */
#header {
height: 80px;
width: 100%;
background: #000000;
}
li {
display: block;
float: left;
margin-left: 10px;
margin-top: 20px;
margin-right: 10px;
}
a {
position: reletive;
text-decoration: none;
color: #ffffff;
font-size: 24px;
font-family: 'Open Sans Condensed';
}
li:hover{
border-bottom: 1px solid white;
padding-bottom: 0px;
}
.home {
margin-left: 30px;
}
.contact {
float: right;
margin-right: 30px;
}
/*content*/
#content {
padding-bottom:80px;
}
/* homepage */
.anouk {
font-family: 'Oswald';
color: #000000;
font-size: 80px;
text-align: center;
margin-top: 15%;
}
/* footer */
#footer {
background: #000000;
width: 100%;
height: 80px;
position: absolute;
bottom: 0;
left: 0;
text-align: center;
}
.icoontjes {
margin-top: 15px;
margin-left: 10px;
margin-right: 10px;
height: 50px;
}
.icoontjes:hover {
opacity: 0.8;
}
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Anouk</title>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
<link href="https://fonts.googleapis.com/css?family=Oswald|Open+Sans+Condensed:300" rel="stylesheet" type="text/css">
</head>
<body>
<div id="wrapper">
<div id="header">
<div class="menu">
<!--Home-->
<li class="home">
<a href="index.html">
Home
</a>
</li>
<!--Over Mij-->
<li class="over">
<a href="over.html">
Over Mij
</a>
</li>
<!--Portfolio-->
<li class="portfolio">
<a href="portfolio.html">
Portfolio
</a>
</li>
<!--Contact-->
<li class="contact">
<a href="contact.html">
Contact
</a>
</li>
</div>
</div>
<div id="content">
<p class="anouk">
Anouk Den Haag
</p>
</div>
<div id="footer">
<a href="mailto:#">
<img class="icoontjes" src="icoontjes/email.png" alt="email">
</a>
<a href="#" target="_blank">
<img class="#" src="icoontjes/facebook.png" alt="facebook">
</a>
<a href="#" target="_blank">
<img class="icoontjes" src="icoontjes/instagram.png" alt="instagram">
</a>
</div>
</div>
</body>
</html>
display offers you 2 options : the table layout or the flex model ( both will push footer down if content grows)
test snippets in full page mode and resize window
1) display:table/table-row/table-cell (should include IE8 and older browsers CSS 2.1)
#charset "UTF-8";
/* CSS Document */
body {
background: white;
}
html,
body,
#wrapper {
width: 100%;
margin: 0;
padding: 0;
height: 100%;
}
/* wrapper */
#wrapper {
display: table;
position: relative;
}
/* menu */
#header {
height: 80px;
display: table-row;
background: #000000;
}
li {
display: block;
float: left;
margin-left: 10px;
margin-top: 20px;
margin-right: 10px;
}
a {
position: reletive;
text-decoration: none;
color: #ffffff;
font-size: 24px;
font-family: 'Open Sans Condensed';
}
li:hover {
border-bottom: 1px solid white;
padding-bottom: 0px;
}
.home {
margin-left: 30px;
}
.contact {
float: right;
margin-right: 30px;
}
/*content*/
#content {
vertical-align: middle;
display: table-cell;
}
/* homepage */
.anouk {
font-family: 'Oswald';
color: #000000;
font-size: 80px;
text-align: center;
}
/* footer */
#footer {
background: #000000;
width: 100%;
height: 80px;
display: table-row;
text-align: center;
}
.icoontjes {
margin-top: 15px;
margin-left: 10px;
margin-right: 10px;
height: 50px;
}
.icoontjes:hover {
opacity: 0.8;
}
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Anouk</title>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
<link href="https://fonts.googleapis.com/css?family=Oswald|Open+Sans+Condensed:300" rel="stylesheet" type="text/css">
</head>
<body>
<div id="wrapper">
<div id="header">
<div class="menu">
<!--Home-->
<li class="home">
<a href="index.html">
Home
</a>
</li>
<!--Over Mij-->
<li class="over">
<a href="over.html">
Over Mij
</a>
</li>
<!--Portfolio-->
<li class="portfolio">
<a href="portfolio.html">
Portfolio
</a>
</li>
<!--Contact-->
<li class="contact">
<a href="contact.html">
Contact
</a>
</li>
</div>
</div>
<div id="content">
<p class="anouk">
Anouk Den Haag
</p>
</div>
<div id="footer">
<a href="mailto:#">
<img class="icoontjes" src="icoontjes/email.png" alt="email">
</a>
<a href="#" target="_blank">
<img class="#" src="icoontjes/facebook.png" alt="facebook">
</a>
<a href="#" target="_blank">
<img class="icoontjes" src="icoontjes/instagram.png" alt="instagram">
</a>
</div>
</div>
</body>
</html>
2) the flex model (latest browsers)
#charset "UTF-8";
/* CSS Document */
body {
background: white;
}
html,
body,
#wrapper {
width: 100%;
margin: 0;
padding: 0;
height: 100%;
}
/* wrapper */
#wrapper, #content {
display: flex;/* triiger flex model prefixed might be needed for not so old browsers */
flex-direction:column /* here we need to stack elements */
}
/* menu */
#header {
height: 80px;
background: #000000;
}
li {
display: block;
float: left;
margin-left: 10px;
margin-top: 20px;
margin-right: 10px;
}
a {
position: reletive;
text-decoration: none;
color: #ffffff;
font-size: 24px;
font-family: 'Open Sans Condensed';
}
li:hover {
border-bottom: 1px solid white;
padding-bottom: 0px;
}
.home {
margin-left: 30px;
}
.contact {
float: right;
margin-right: 30px;
}
/*content*/
#content {
flex:1;/* take as much space avalaible */
justify-content:center;/* because it is display:flex too, you can horizontally center its contents */
align-items:center;/* because it is display:flex too, you can vertically center its contents */
}
/* homepage */
.anouk {
font-family: 'Oswald';
color: #000000;
font-size: 80px;
text-align: center;
}
/* footer */
#footer {
background: #000000;
height: 80px;
text-align:center;
}
.icoontjes {
margin-top: 15px;
margin-left: 10px;
margin-right: 10px;
height: 50px;
}
.icoontjes:hover {
opacity: 0.8;
}
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Anouk</title>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
<link href="https://fonts.googleapis.com/css?family=Oswald|Open+Sans+Condensed:300" rel="stylesheet" type="text/css">
</head>
<body>
<div id="wrapper">
<div id="header">
<div class="menu">
<!--Home-->
<li class="home">
<a href="index.html">
Home
</a>
</li>
<!--Over Mij-->
<li class="over">
<a href="over.html">
Over Mij
</a>
</li>
<!--Portfolio-->
<li class="portfolio">
<a href="portfolio.html">
Portfolio
</a>
</li>
<!--Contact-->
<li class="contact">
<a href="contact.html">
Contact
</a>
</li>
</div>
</div>
<div id="content">
<p class="anouk">
Anouk Den Haag
</p>
</div>
<div id="footer">
<a href="mailto:#">
<img class="icoontjes" src="icoontjes/email.png" alt="email">
</a>
<a href="#" target="_blank">
<img class="#" src="icoontjes/facebook.png" alt="facebook">
</a>
<a href="#" target="_blank">
<img class="icoontjes" src="icoontjes/instagram.png" alt="instagram">
</a>
</div>
</div>
</body>
</html>
add overflow:auto to #content and it will show a scrollbar if needed , so footer is not pushed down.
Try adding this CSS to the text you want centered:
.your_centered_element {
position: absolute;
top:50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
}
This will keep the element centered.
Read about the transform: translateX(-50%) translateY(-50%); in the MDN docs
Hope this helps!
One solution here is to use viewport-width and viewport-height units:
.anouk {
position: absolute;
top: 0;
left: 0;
width: 100vw;
line-height: 100vh;
margin: 0;
padding: 0;
text-align: center;
}
for centering the text you have to use **margin auto**
css file--
* {
border: 1px dashed black;
}
div >p {
height: 50px;
width: 100px;
border: 2px solid black;
border-radius: 5px;
background-color: #FFD700;
margin: auto;
}
html code
<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="stylesheet3.css"/>
<title>Result</title>
</head>
<body>
<div><p >
Anouk Den Haag
</p></div>
</body>
</html>
SEE THE SNAPSHOT