I tried to add the changes I've made to a web page for the navigation bar, but the layout is messed up. For some reason, the columns have all been moved over by 1 fraction, and the menu burger "buns" are now out of place. Here is some of the code for the navigation elements:
HTML Code
<!doctype html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="design.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=Comfortaa&display=swap" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="item logo">
<h3><a class="myName" href="/index.html">BALLOONS</a></h3>
</div>
<div class="item links">
<ul class="navigation">
<li>Home</li>
<li>About
</li>
<li>Maps</li>
<li>Tours</li>
<li>Contact</li>
</ul>
</div>
<div class="item menu">
<div class="menu-btn">
<div id="middle" class="btn-mid"></div>
</div>
<script src="response.js"></script>
</div>
<div class="item content"></div>
<div class="item footer">
<div>
<br><br>
<ul class="nav_footer">
<li>Home</li>
<li>About
</li>
<li>Maps</li>
<li>Tours</li>
<li>Contact
</li>
</ul>
</div>
</div>
</div>
</body>
CSS Code
.container {
display: grid;
grid-template-columns: repeat(8, 1fr);
grid-template-rows: repeat(5, 1fr);
}
.logo {
grid-area: logo;
display: flex;
grid-row: span 1;
grid-column: span 2;
margin: 2px;
background-color: black;
justify-content: center;
align-items: center;
}
.myName {
font-family: "Comfortaa";
text-decoration: none;
color: white;
}
.myName:hover {
cursor: pointer;
}
.links {
grid-area: links;
grid-column: span 5;
grid-row: span 1;
display: flex;
overflow: hidden;
justify-content: center;
align-items: center;
margin: 2px;
background-color: black;
}
.navigation {
display: flex;
direction: row;
justify-content: space-around;
padding: 0; //By default, padding is set
list-style-type: none;
width: 80%; //Adds more spacing
}
.navigation a {
color: white;
text-decoration: none;
}
.navigation a:hover {
text-decoration: underline;
}
.navigation li {
display: inline-block;
}
.menu {
grid-area: menu;
grid-column: span 1;
grid-row: span 1;
display: flex;
padding: 0;
margin: 2px;
background-color: black;
justify-content: center;
align-items: center;
}
.menu-btn {
display: flex;
justify-content: center;
align-items: center;
width: 80%;
height: 80%;
transition: all .5s ease-in-out;
}
.btn-mid {
position: relative;
width: 25px;
height: 3px;
background: #fff;
border-radius: 2px;
transition: all .5s ease-in-out;
}
.btn-mid::before,
.btn-mid::after {
position: absolute;
/*Necessary for 3 bars*/
content: '';
width: 25px;
height: 3px;
background: #fff;
border-radius: 2px;
transition: all .5s ease-in-out;
}
.btn-mid::before {
transform: translateY(-300%);
}
.btn-mid::after {
transform: translateY(300%);
}
/*BUTTON ANIMATION*/
.menu-btn.open .btn-mid {
transform: translateX(-175%);
background: transparent;
}
.menu-btn.open .btn-mid::before {
transform: rotate(45deg) translate(125%, -1050%);
}
.menu-btn.open .btn-mid::after {
transform: rotate(-45deg) translate(125%, 1050%);
}
/*END*/
.content {
grid-area: content;
grid-column: span 8;
grid-row: span 3;
padding-top: 15%;
background-image: url("https://i.stack.imgur.com/xkpSw.jpg");
background-repeat: no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
height: 25vh;
}
.footer {
grid-area: footer;
grid-column: span 8;
grid-row: span 1;
padding-top: 15%;
}
h1 {
font-family: "Comfortaa";
text-align: center;
}
h3, h4, p, label {
font-family: "Comfortaa";
}
.navigation {
padding: 5%;
overflow: hidden;
background-color: black;
display: flex;
direction: row;
justify-content: space-around;
font-family: "Comfortaa";
}
#media screen and (max-width: 600px) {
.links {
display: none;
}
.logo {
grid-column: span 7;
grid-row: span 1;
}
.navigation a {
display: none;
}
}
#media screen and (min-width: 601px) {
.navigation li {
font-family: "Comfortaa";
}
.navigation a {
color: white;
}
}
div {
text-align: center;
}
.nav_footer {
margin: 0;
padding: 0;
overflow: hidden;
text-align: center;
}
.nav_footer li {
display: inline;
font-family: "Comfortaa";
}
.nav_footer a {
color: black;
}
ul {
list-style-type: none;
}
li {
font-family: "Comfortaa";
}
But aside from navigation, everything else displays fine, and the animation works as expected. I've included two screenshots.
The first is from a mobile view:
The second is from a desktop view:
I entered my code in codepen, and while the menu burger is still messed up, all of the areas fit in the same row like they're supposed to. What am I doing wrong?
You can use display:flex instead of display:grid. Just add this lines to your CSS.
.container {
display: flex;
background:black;
justify-content:space-between;
}
Related
Basically the navbar works but before when hovering over the links the full width would get highlighted (the 100%). I have made some adjustments after that and now i cant get the links to highlight 100% when i hover over them, what am i missing?
my code:
Let me know or hint me, i have tried giving 100% width to the ul, li, the anchor, the container divs, but no luck.
html:
<!DOCTYPE html>
<html lang="en">
<head></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">
<script src="https://kit.fontawesome.com/ae0153af6c.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="/stylesheets/style.css" />
<link rel="stylesheet" href="/stylesheets/header.css" />
<script src="/javascripts/header.js"></script>
<title>Header</title>
</head>
<body>
<div class="navbar-flexbox" id="navbar">
<div class="hamburger">
<!-- <a href="#" class="toggle-button "> -->
<span class="bar"> </span>
<span class="bar"> </span>
<span class="bar"> </span>
<!-- </a> -->
</div>
<div id="logo">
<h1>The g<span class="title-span">oo</span>d Kitchen</h1>
</div>
<div class="search-wrapper">
<form class="search-form" action="/recipes/search" method="POST">
<div class="search-bar-container">
<label class="search-label" for="search"></label>
<input class="search-input" type="search" name="search" id="search" placeholder="What would you like to cook?">
</div>
<div class="search-icon-container">
<i class="search-icon fa-lg fa-solid fa-magnifying-glass"></i>
</div>
<div class="search-btn-container">
<input class="search-submit" type="submit" value="Search">
</div>
</form>
</div>
<div class="navigation-list-dropdown noDisplay">
<div class="navbar-links">
<ul>
<li>Upload a recipe</li>
<li>All recipes</li>
<li>Home</li>
</div>
<% if(locals.islogged) { %>
<div class="userLogged-links dropdown">
<button class="dropdown-btn">
<% if(locals.userLogged) { %>
<img class="user-image-miniature" src="../../images/userImages/<%=userLogged.image %>">
Hey user
</button>
<% } %>
<div class="dropdown-content navbar-links">
<li>My profile</li>
<li>Logout</li>
</div>
</div>
<% } else { %>
<div class="user-links dropdown navbar-links">
<li>Login</li>
<li>Register</li>
</div>
<% } %>
</ul>
</div>
</div>
</body>
</html>
CSS:
* {
box-sizing: border-box;
}
#navbar {
/* background-color: #121214; cool black option */
background-color: rgb(47, 84, 88);
position: fixed;
width: 100%;
z-index: 2;
}
.menu li {
/* font-size: 16px; */
/* padding: 15px 5px; */
white-space: nowrap;
}
/* ul {
width: 100%;
} */
/* li {
width: 100vw;
} */
.navbar-links {
width: 100% !important;
}
.navigation-list-dropdown ul {
display: flex;
flex-flow: wrap column;
width: 100%;
}
.navigation-list-dropdown ul li {
list-style: none;
}
.navigation-list-dropdown li a {
padding: 1rem;
text-decoration: none;
display: block;
font-size: 0.8rem;
}
.navigation-list-dropdown li:hover {
background-color: #555;
}
.navigation-list-dropdown li:hover a {
color: rgb(207, 181, 181);
}
.noDisplay {
display: none;
}
.noVisible {
visibility: hidden;
}
body i {
color: black;
}
/* here the hambu menu */
.hamburger {
position: absolute;
top: 0.8rem;
right: 1rem;
/* display: flex;
flex-direction: column; */
/* justify-content: space-between; */
/* height: 20px;
width: 21px; */
}
.hamburger.active .bar:nth-child(1) {
transform: translateY(8px) rotate(45deg)
}
.hamburger.active .bar:nth-child(2) {
opacity: 0;
}
.hamburger.active .bar:nth-child(3) {
transform: translateY(-8px) rotate(-45deg)
}
.bar {
display: block;
width: 25px;
height: 3px;
margin: 5px auto;
-webkit-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
background-color: white;
}
.navbar h1 {
display: flex;
justify-content: center;
}
.title-span {
color: rgb(255, 255, 255) !important;
}
#logo h1 {
font-family: Brush Script MT !important;
position: relative;
font-size: 1.7rem;
margin: .5rem;
}
ul {
margin: 0;
}
#navbar .hambMenu,
.login-register-container i,
#logo h1 {
color: rgb(199, 176, 176);
}
.dropdown {
float: left;
overflow: initial;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.dropdown-btn {
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
/* Important for vertical align on mobile phones */
margin: 0;
/* Important for vertical align on mobile phones */
}
.dropdown-btn {
color: white !important;
padding: 0px;
display: flex;
align-items: center;
}
.dropdown-btn>* {
padding: 0px 5px;
}
.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown:hover .dropdown-content {
display: block;
}
.user-image-miniature {
width: 35px;
border-radius: 15px;
}
/* End of user links navbar */
.navbar-flexbox {
display: flex;
flex-direction: column;
align-items: flex-start;
height: auto;
}
/* Search bar*/
.search-input {
font-size: 0.8rem !important;
width: 100%;
height: 35px;
border: 1px solid rgb(188, 180, 180);
border-top-left-radius: 3px;
border-top-right-radius: 3px;
text-align: center;
position: relative;
}
.search-icon-container {
position: relative;
display: flex;
justify-content: flex-end;
}
.search-icon {
right: 5vw;
position: absolute;
z-index: 2;
color: rgb(139, 147, 146);
align-self: center;
}
.search-wrapper {
width: 100%;
}
.search-form {
display: flex;
justify-content: space-evenly;
}
.search-label {
display: none;
}
.search-bar-container {
width: 100%;
}
.search-btn-container {
display: none;
}
/* End of Search bar*/
#media (min-width:480px) {
li {
width: 20vw;
}
.hamburger {
display: none;
}
.navbar-flexbox {
display: flex;
justify-content: space-between;
align-items: center;
}
.navigation-list-dropdown {
display: initial;
}
.navigation-list-dropdown ul {
flex-direction: row;
justify-content: space-evenly;
}
.navigation-list-dropdown ul {
border-top: 3px solid rgb(144, 208, 221);
}
.user-links,
.userLogged-links {
display: flex !important;
border-left: 0.1px solid rgb(144, 208, 221);
}
#logo h1 {
font-size: 2rem;
}
}
/* #media (min-width: 600px) {
li {
padding: 0px 10px;
}
} */
So, I'm making a web portfolio as my project and I managed to find a problem. When I use min-height in my "About me" section, the section doesn't seem to adjust its height according to the content. It might be because I use float in my navbar, but I'm not too sure. I would appreciate if someone can help me. Thanks in advance.
This is my HTML and CSS code:
/* global */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Montserrat", sans-serif;
scroll-behavior: smooth;
}
a {
text-decoration: none;
}
/* animations */
#keyframes bounce {
0% {
transform: translateY(0px);
}
50% {
transform: translateY(15px);
}
100% {
transform: translateY(0px);
}
}
#keyframes appear {
0% {
opacity: 0;
}
50% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#keyframes popup {
0% {
transform: translateY(200px);
opacity: 0;
}
100% {
transform: translateY(0);
opacity: 1;
}
}
/* Navbar */
header {
width: 100%;
height: 64px;
text-align: center;
background-color: #1a374d;
display: flex;
justify-content: space-between;
padding: 0 80px;
font-weight: bold;
position: fixed;
z-index: 1;
}
header li {
list-style: none;
font-weight: bold;
}
header a {
color: #b1d0e0;
}
header .brandLong {
width: auto;
height: 64px;
float: left;
display: flex;
align-items: center;
justify-content: center;
color: #b1d0e0;
}
header .brandShort {
width: auto;
height: 64px;
float: left;
display: none;
align-items: center;
justify-content: center;
color: #b1d0e0;
}
header .menu {
width: 50%;
min-width: 350px;
height: 100%;
float: right;
}
header .menu ul {
width: 100%;
height: inherit;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
}
header .menu li {
height: inherit;
display: flex;
align-items: center;
justify-content: center;
}
header .menu ul a {
width: 25%;
height: inherit;
display: inline-block;
transition: 0.3s;
font-weight: 400;
}
header .menu ul a:hover {
background-color: #b1d0e0;
color: #1a374d;
transition: 0.3s;
font-weight: 400;
}
header #menuToggle {
display: none;
}
header .menu-icon {
display: none;
}
/* Home Section */
.home {
min-height: 100vh;
}
.home .container {
height: 100%;
width: 100%;
display: flex;
justify-content: center;
align-content: center;
}
.home .container img {
height: 100%;
animation: popup 0.8s ease-in-out;
}
.home .container .text {
display: flex;
flex-direction: column;
width: 50%;
height: 100%;
justify-content: center;
animation: appear 1.6s;
}
.home .container .text h1 {
font-size: 72px;
font-weight: bold;
line-height: auto;
}
.home .container .text h1 span {
color: #1a374d;
}
.home .container .text p {
font-size: 24px;
margin-top: 20px;
letter-spacing: 2px;
line-height: 35px;
}
.home .container .arrow {
font-size: 24px;
animation: bounce 2s ease-in-out infinite, appear 1.6s;
position: absolute;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
top: 77%;
margin: 0 0 0 35%;
width: 50%;
font-weight: bold;
}
.home .container .arrow a {
color: #1a374d;
}
.home .container .arrow a i {
font-size: 48px;
margin-top: 5px;
}
/* About */
.about {
min-height: 100vh;
background-color: #406882;
color: white;
padding: 0 80px;
}
.about .container {
height: 100%;
width: 100%;
display: flex;
flex-direction: column;
justify-items: center;
align-items: center;
}
.about .container h1 {
font-size: 64px;
text-align: center;
margin: 150px 0 100px 0;
}
.about .container h2 {
font-size: 40px;
}
.about .container h3 {
font-weight: 400;
margin-bottom: 50px;
font-size: 24px;
}
.about .container .aboutContainer {
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.about .container .aboutContainer .desc1 {
width: 25%;
text-align: justify;
padding: 30px;
display: flex;
flex-direction: column;
height: 100%;
justify-content: space-evenly;
}
.about .container .aboutContainer .desc1 .top {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.about .container .aboutContainer .desc1 .top p {
line-height: 28px;
margin-top: 12px;
font-size: 20px;
font-weight: normal;
}
.about .container .aboutContainer .desc1 .bottom {
display: flex;
flex-direction: column;
align-items: center;
}
.about .container .aboutContainer .desc2 {
width: 30%;
background-image: url(asset/me2.jpg);
background-position: center;
background-size: cover;
background-repeat: no-repeat;
height: 700px;
border-radius: 40px;
margin: 20px;
}
.about .container .aboutContainer .desc2 img {
height: 100%;
}
.about .container .aboutContainer .desc3 {
width: 25%;
padding-left: 50px;
}
.about .container .aboutContainer .desc3 h2 {
margin-bottom: 12px;
}
.about .container .aboutContainer .desc3 ul li {
font-size: 20px;
margin-bottom: 8px;
margin-left: 20px;
}
/* social media */
.socialMedia {
display: flex;
margin-top: 12px;
justify-content: space-evenly;
width: 80%;
}
.socialMedia .instagram {
background-color: white;
width: 50px;
height: 50px;
display: flex;
align-items: center;
justify-content: center;
color: #dd2a7b;
border-radius: 50%;
transition: 0.5s;
font-size: 24px;
}
.socialMedia .email {
background-color: white;
width: 50px;
height: 50px;
display: flex;
align-items: center;
justify-content: center;
color: #ea4335;
border-radius: 50%;
transition: 0.5s;
font-size: 24px;
}
.socialMedia .email:hover {
background-color: #ea4335;
color: white;
transition: 0.5s;
}
.socialMedia .instagram:hover {
background-color: #dd2a7b;
color: white;
transition: 0.5s;
}
.socialMedia .linkedin {
background-color: white;
width: 50px;
height: 50px;
display: flex;
align-items: center;
justify-content: center;
color: #0077b5;
border-radius: 50%;
transition: 0.5s;
font-size: 24px;
}
.socialMedia .linkedin:hover {
background-color: #0077b5;
color: white;
transition: 0.5s;
}
.socialMedia .spotify {
background-color: white;
width: 50px;
height: 50px;
display: flex;
align-items: center;
justify-content: center;
color: #1ed761;
border-radius: 50%;
transition: 0.5s;
font-size: 24px;
}
.socialMedia .spotify:hover {
background-color: #1ed761;
color: white;
transition: 0.5s;
}
.socialMedia .github {
background-color: white;
width: 50px;
height: 50px;
display: flex;
align-items: center;
justify-content: center;
color: #171515;
border-radius: 50%;
transition: 0.5s;
font-size: 24px;
}
.socialMedia .github:hover {
background-color: #171515;
color: white;
transition: 0.5s;
}
/* Education background */
.about .container .edu {
margin: 50px 0 100px 0;
}
.about .container .edu h2 {
margin-bottom: 24px;
}
.about .container .edu table {
font-size: 24px;
border-collapse: collapse;
}
.about .container .edu table td {
padding: 15px;
padding-right: 100px;
}
.about .container .edu table thead {
background-color: #6998ab;
font-weight: 600;
}
.about .container .edu table tbody {
background-color: #b1d0e0;
}
.about .container .edu table tbody tr:nth-child(2) {
background-color: #a0c4d6;
}
/* Media Query */
#media screen and (max-width: 1200px) {
.home .container img {
display: none;
}
.home .container .text {
text-align: center;
display: flex;
flex-direction: column;
width: 80%;
height: 100%;
justify-content: center;
animation: appear 1.6s;
}
.home .container .arrow {
width: 100%;
margin: 0;
}
}
#media screen and (max-width: 768px) {
/* NavBar */
header {
display: block;
padding: 0;
}
.brandLong {
display: none;
}
.brandShort {
display: flex;
margin-left: 80px;
}
.menu {
width: 100%;
height: auto;
}
.menu ul {
display: block;
max-height: 0;
overflow: hidden;
transition: max-height 0.3s;
}
.menu ul a {
text-align: left;
width: 100%;
height: 50px;
background-color: #1a374d;
}
.menu-icon {
width: 200px;
height: inherit;
display: block;
position: absolute;
top: 18px;
right: 0;
color: #b1d0e0;
}
#menuToggle:checked~ul {
max-height: 350px;
}
.menu-icon i {
font-size: 1.7em;
}
.home .container .text h1 {
font-size: 48px;
}
}
#media screen and (max-width: 480px) {
.brandShort {
display: flex;
margin-left: 40px;
}
.menu-icon {
width: 100px;
}
.home .container .text h1 {
font-size: 36px;
}
.home .container .arrow a {
display: none;
}
}
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css" integrity="sha384-DyZ88mC6Up2uqS4h/KRgHuoeGwBcD4Ng9SiP4dIRy0EXTlnuz47vAwmeGwVChigm" crossorigin="anonymous">
<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:ital,wght#0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
<link rel="stylesheet" href="landingPage.css">
<title>Christopher's Portfolio</title>
</head>
<body>
<!-- Nav Bar -->
<header>
<a href="#homeSection">
<figure class="brandLong">Christopher Nathanael Tessy</figure>
</a>
<a href="#homeSection">
<figure class="brandShort">Christopher N. T.</figure>
</a>
<nav class="menu">
<input type="checkbox" id="menuToggle">
<label for="menuToggle" class="menu-icon"><i class="fa fa-bars"></i></label>
<ul>
<a href="#homeSection">
<li>Home</li>
</a>
<a href="#aboutSection">
<li>About Me</li>
</a>
<a href="#">
<li>Portfolio</li>
</a>
<a href="#">
<li>Contact</li>
</a>
</ul>
</nav>
</header>
<!-- Home Section -->
<section class="home" id="homeSection">
<div class="container">
<img src="asset/me1.png" alt="Christopher NT">
<div class="text">
<h1>
Hey there! I'm <span>Christopher Nathanael Tessy</span>
</h1>
<p>Welcome to my personal web portfolio where I will showcase my best of the best works</p>
</div>
<div class="arrow">
About me
<i class="fas fa-angle-double-down"></i>
</div>
</div>
</section>
<!-- About Me Section -->
<section class="about" id="aboutSection">
<div class="container">
<h1>About Me</h1>
<h2>Christopher Nathanael Tessy</h2>
<h3>Front-End Web Developer</h3>
<div class="aboutContainer">
<div class="desc1">
<div class="top">
<h2>Who am I?</h2>
<p>My name is Christopher Nathanael Tessy. I am a dedicated and hardworking computer science student with a strong passion in front-end web development equipped with strong designing abilities with proven successes in designing posters, banners,
backdrops, social media, and merchandise for multiple years. Committed to working as a collaborative and positive team member. Bilingual, communicative, and ready to join my next team.
</p>
</div>
<div class="bottom">
<h2>Social Media</h2>
<div class="socialMedia">
<a href="mailto:christopher.nathanael1217#gmail.com">
<div class="email">
<span class="far fa-envelope"></span>
</div>
</a>
<a href="https://www.instagram.com/christophertessy_/">
<div class="instagram">
<span class="fab fa-instagram"></span>
</div>
</a>
<a href="https://www.linkedin.com/in/christopher-nathanael-tessy-b30339220/">
<div class="linkedin">
<span class="fab fa-linkedin-in"></span>
</div>
</a>
<a href="https://open.spotify.com/user/21z7frm7cr3jctz2c6zv6nafa?si=bd8ea929cc274a96">
<div class="spotify">
<span class="fab fa-spotify"></span>
</div>
</a>
<a href="https://github.com/TessyJr">
<div class=" github">
<span class="fab fa-github"></span>
</div>
</a>
</div>
</div>
</div>
<div class="desc2">
</div>
<div class="desc3">
<h2>Software and Programming Languages</h2>
<p>
<ul>
<li>Photoshop</li>
<li>Visual Studio Code</li>
<li>Figma</li>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
<li>C++</li>
</ul>
</p>
</div>
</div>
<div class="edu">
<h2>Education Background</h2>
<table>
<thead>
<tr>
<td>Year</td>
<td>Level of Education</td>
<td>Description</td>
</tr>
</thead>
<tbody>
<tr>
<td>2009-2015</td>
<td>Primary School</td>
<td>Sekolah Bina Gita Gemilang</td>
</tr>
<tr>
<td>2015-2021</td>
<td>High School</td>
<td>Penabur Secondary Kelapa Gading</td>
</tr>
<tr>
<td>2021-2025</td>
<td>University</td>
<td>Bina Nusantara University</td>
</tr>
</tbody>
</table>
</div>
</div>
</section>
</body>
</html>
This is the problem I'm facing:
The background color doesn't cover the bottom area
Remove the height property
.about .container {
width: 100%;
display: flex;
flex-direction: column;
justify-items: center;
align-items: center;
}
min-height: 100vh to the body element should do the trick. Here, 100vh means that the initial body height will take 100% of the viewport height,
its better to use :
height : 100vh;
/* GLOBAL */
#import url('https://fonts.googleapis.com/css2?family=Poppins:wght#200;400;600&display=swap');
:root {
--nav-hue: #2300d1;
--background-color: #100e1a;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: var(--background-color);
font-family: 'Poppins', sans-serif;
overflow-x: hidden;
}
h1, h2, h3, h4 {
font-weight: 300;
}
ul {
list-style: none;
}
a {
text-decoration: none;
color: white;
}
i {
margin-right: 0.3rem;
}
/* NAV */
.nav {
height: 60px;
width: 100vw;
background-color: black;
color: white;
border-bottom: 0.15rem solid var(--nav-hue);
}
.logo {
display: inline;
padding: 0.1rem 1.5rem;
}
.nav .left-menu, .nav .right-menu {
display: flex;
align-items: center;
margin-top: 0.4rem;
}
.nav .left-menu {
flex: 2;
margin-left: 1rem;
}
.nav .right-menu {
flex: 1;
margin-left: 10rem;
}
.nav ul li {
padding: 0 0.8rem;
}
.nav-search {
border: 1px solid white;
padding: 0.4rem 0.6rem;
border-radius: 2px;
outline: none;
text-align: center;
}
.nav-search:focus {
transition: letter-spacing 200ms ease-in-out;
letter-spacing: 0.05rem;
border: 1px solid var(--nav-hue);
}
.nav .nav-hover:hover, .nav .nav-hover:hover a, i:hover {
transition: all 100ms ease-in-out;
color: var(--nav-hue);
cursor: pointer;
}
.small-hover:hover {
transition: all 100ms ease-in-out;
transform: scale(1.5) translateY(-0.2rem);
}
/* MAIN */
.container {
max-width: 1100px;
margin: auto;
padding: 0.5rem;
}
/* SHOWCASE */
.showcase {
place-items: center;
margin-top: 1rem;
z-index: 2;
}
.showcase-img {
width: 960px;
height: 400px;
background-color: blue; /* For testing */
border-radius: 4px;
}
.showcase-img img {
width: 100%;
height: 100%;
opacity: 0.1;
}
.showcase ul {
display: flex;
bottom: 13.73rem;
position: relative;
justify-content: space-between;
}
.showcase ul li {
font-size: 2rem;
float: left;
}
/* UTILS */
/* GRID & FLEX */
.flex {
display: flex;
text-align: center;
}
.grid {
display: grid;
grid-template-columns: 1fr;
}
.grid-center {
place-items: center;
}
.nav-hue {
color: var(--nav-hue);
}
.bold {
font-weight: 400;
}
<!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">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="all.css">
<title>GameBuy.com</title>
</head>
<body>
<!-- NAVBAR -->
<div class="nav">
<div class="flex">
<h1 class="logo">Game<span class="nav-hue bold">Buy.com</span></h1>
<ul class="left-menu">
<li><span class="nav-hover"><i class="fas fa-home"></i>Home</i></span></li>
<li><span class="nav-hover"><i class="fas fa-question"></i>About</i></span></li>
</ul>
<ul class="right-menu">
<li><input class="nav-search" type="search" placeholder="SEARCH"></li>
<li><i class="fas fa-shopping-cart small-hover"></i></li>
<li><i class="fas fa-search small-hover"></i></li>
</ul>
</div>
</div>
<div class="container">
<!-- SLIDER SHOWCASE -->
<div class="showcase grid">
<div class="showcase-img">
<img src="images/#" alt="">
</div>
<ul>
<li class="left-flash"><i class="fas fa-chevron-left"></i></li>
<li class="right-flash"><i class="fas fa-chevron-right"></i></li>
</ul>
</div>
</div>
</body>
</html>
// I want the left arrow to stick to the left side of the showcase-img container and the right arrow to the right side... I tried justify-content: space-between; but it didn't work, I can of course add margins but that's annoying and would make the site less responsive, any help is greatly appreciated!
 
it is very useful for your question
I want "THE NAV" to be displayed in the center of the navbar for mobile view and want the hamburger menu icon on the far right side.
how do i do this?
I tried .logo justify-content: center but nothing changed
If anyone would care to explain this to me I would be super grateful, I have tried finding a solution myself by using google but as I'm quite new to this I haven't been able to find a fix for my problem because I'm really not sure what to search for to fix my problem
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
nav {
display: flex;
justify-content: space-around;
align-items: center;
min-height: 8vh;
background-color: #5d4954;
font-family: "Poppins", sans-serif;
}
.logo {
color: rgb(226, 226, 226);
text-transform: uppercase;
letter-spacing: 5px;
font-size: 20px;
}
.nav-links {
display: flex;
justify-content: space-around;
width: 40%;
}
.nav-links li {
list-style: none;
}
.nav-links a {
color: rgb(226, 226, 226);
text-decoration: none;
letter-spacing: 3px;
font-weight: bold;
font-size: 14px;
}
.burger {
display: none;
cursor: pointer;
}
.burger div {
width: 25px;
height: 3px;
background-color: rgb(226, 226, 226);
margin: 5px;
transition: all 0.3s ease;
}
#media screen and (max-width: 1024px) {
.nav-links {
width: 60%;
}
}
#media screen and (max-width: 768px) {
body {
overflow: hidden;
}
.nav-links {
position: absolute;
right: 0px;
height: 92vh;
top: 8vh;
background-color: #5d4954;
display: flex;
flex-direction: column;
align-items: center;
width: 50%;
transform: translateX(100%);
transition: transform 0.4s ease-in;
}
.nav-links li {
opacity: 0;
}
.burger {
display: block;
}
}
.nav-active {
transform: translateX(0%);
}
<nav>
<div class="logo">
<h4>The Nav</h4>
</div>
<ul class="nav-links">
<li>Home</li>
<li>About</li>
<li>Work</li>
<li>Projects</li>
</ul>
<div class="burger">
<div class="line1"></div>
<div class="line2"></div>
<div class="line3"></div>
</div>
</nav>
So thing is: Display Flex distributes space between divs evenly. This means your logo and your burger bove geht the same space and justify-content then placees them next to each other with 50% width.
What you need to do is: Take the burger out of the equation for the flexbox. You can do this by placing it absolute (with position: absolute) and then you just have to tell it a right-value of e.g. 40px
//CSS
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
nav {
display: flex;
justify-content: space-around;
align-items: center;
min-height: 8vh;
background-color: #5d4954;
font-family: "Poppins", sans-serif;
}
.logo {
color: rgb(226, 226, 226);
text-transform: uppercase;
letter-spacing: 5px;
font-size: 20px;
}
.nav-links {
display: flex;
justify-content: space-around;
width: 40%;
}
.nav-links li {
list-style: none;
}
.nav-links a {
color: rgb(226, 226, 226);
text-decoration: none;
letter-spacing: 3px;
font-weight: bold;
font-size: 14px;
}
.burger {
display: none;
cursor: pointer;
}
.burger div {
width: 25px;
height: 3px;
background-color: rgb(226, 226, 226);
margin: 5px;
transition: all 0.3s ease;
}
#media screen and (max-width: 1024px) {
.nav-links {
width: 60%;
}
}
#media screen and (max-width: 768px) {
body {
overflow: hidden;
}
.nav-links {
position: absolute;
right: 0px;
height: 92vh;
top: 8vh;
background-color: #5d4954;
display: flex;
flex-direction: column;
align-items: center;
width: 50%;
transform: translateX(100%);
transition: transform 0.4s ease-in;
}
.nav-links li {
opacity: 0;
}
.burger {
display: block;
position: absolute;
right: 40px;
}
}
.nav-active {
transform: translateX(0%);
}
//HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="nav.css" />
<link
href="https://fonts.googleapis.com/css2?family=Poppins:wght#400;500&display=swap"
rel="stylesheet"
/>
<title>NAVIGATION</title>
</head>
<body>
<nav>
<div class="logo">
<h4>The Nav</h4>
</div>
<ul class="nav-links">
<li>Home</li>
<li>About</li>
<li>Work</li>
<li>Projects</li>
</ul>
<div class="burger">
<div class="line1"></div>
<div class="line2"></div>
<div class="line3"></div>
</div>
</nav>
<script src="nav.js"></script>
</body>
</html>
I am having some issues reducing the space on my footer using CSS grid. I've gotten to the point where my list items are on one line but I cannot find a way to reduce the gap in between. This may be because of my centering of it but I cannot figure it out after googling/playing.
https://codepen.io/DanielPeterHill/pen/pxjpzM
html,
body {
width: 100%;
height: 100%;
margin: 0;
}
body {
font-family: 'Oswald', sans-serif;
color: #FEDCD2;
}
.nav-container {
width: 100%;
background: #DF744A;
margin: 0;
}
nav {
max-width: 1720px;
margin: 0 auto;
display: grid;
grid-template-columns: 1fr auto 1fr;
}
.left-menu {
grid-column: 1;
align-self: center;
}
.logo {
grid-column: 2;
}
#nav-toggle,
.burger-menu {
display: none;
}
nav a {
color: white;
text-decoration: none;
text-transform: uppercase;
transition: .3s all ease-in-out;
}
nav a:hover {
opacity: .7;
color: blue;
}
.left-menu a {
padding: 10px 0;
margin-left: 15px;
font-size: 14px;
font-weight: 300;
letter-spacing: 0.5px;
}
.logo {
font-size: 40px;
padding: 1rem;
}
.burger-menu {
grid-column: 1;
align-self: center;
margin-left: 20px;
}
.footer {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
background-color: #DF744A;
color: white;
text-align: center;
}
footer {
display: grid;
grid-template-rows: auto 3fr auto;
}
.footer-left {
grid-column: 1;
align-self: center;
}
.footer-right {
grid-column: 3;
align-self: center;
list-style-type: none;
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-row-gap: 50px;
}
.footer-right li {
text-decoration: none;
}
.footer-right li a {
color: white;
}
.footer-right li a:hover {
opacity: .7;
color: blue;
}
.underlineremove {
text-decoration: none;
text-decoration-style: none;
}
#media only screen and (max-width: 1025px) {
.burger-menu {
display: inline-block;
width: 40px;
}
.left-menu {
display: none;
}
#nav-toggle:checked~.left-menu {
display: grid;
grid-row: 2;
}
}
<link href="https://fonts.googleapis.com/css?family=Oswald:600" rel="stylesheet">
<div class="nav-container">
<nav>
<input type="checkbox" id="nav-toggle">
<label for="nav-toggle" class="burger-menu">
<img src="images/hamburger.png" alt="">
</label>
<div class="left-menu">
Shop
Blog
About
Contact
</div>
Dill's Delight's
</nav>
</div>
<div class="footer">
<footer>
<p class="footer-left"> © FarHill Deisgns </p>
<ul class="footer-right">
<li>TEST</li>
<li>TEST</li>
<li>TEST</li>
<li>TEST</li>
</ul>
</footer>
</div>
My example is above and any help would be amazing! My outcome would be to be able to reduce the gap beween the 4 TESTS in the bottom right to make it look a bit cleaner.
Thank you,
Dan
You can try this:
.footer-right
{
grid-column: 3;
align-self: center;
list-style-type: none;
display: grid;
grid-template-columns: repeat(4, 50px);
grid-row-gap: 50px;
}
I changed grid template columns to this grid-template-columns: repeat(4, 50px); to give to the columns 50px width. But, if this does not suite you, you can always use some other width in % or in some other measure.
One option...don't use CSS-Grid at all on the footer. Flexbox would be simpler.
html,
body {
width: 100%;
height: 100%;
margin: 0;
}
body {
font-family: 'Oswald', sans-serif;
color: #FEDCD2;
}
.footer {
/* not required for demo
position: fixed;
left: 0;
bottom: 0;
width: 100%;
*/
background-color: #DF744A;
color: white;
text-align: center;
}
footer {
display: flex;
}
.footer-left {
grid-column: 1;
align-self: center;
}
.footer-right {
margin-left: auto;
list-style-type: none;
display: flex;
}
.footer-right li {
text-decoration: none;
margin: .25em;
/* manages spacing */
}
.footer-right li a {
color: white;
}
.footer-right li a:hover {
opacity: .7;
color: blue;
}
.underlineremove {
text-decoration: none;
text-decoration-style: none;
}
<div class="footer">
<footer>
<p class="footer-left"> © FarHill Deisgns </p>
<ul class="footer-right">
<li>TEST</li>
<li>TEST</li>
<li>TEST</li>
<li>TEST</li>
</ul>
</footer>
</div>
Alternatively, if you must use CSS-Grid, then consider a two column grid and flex the ul...
footer {
display: grid;
grid-template-columns:1fr auto;
}
html,
body {
width: 100%;
height: 100%;
margin: 0;
}
body {
font-family: 'Oswald', sans-serif;
color: #FEDCD2;
}
.footer {
/* not required for demo
position: fixed;
left: 0;
bottom: 0;
width: 100%;
*/
background-color: #DF744A;
color: white;
text-align: center;
}
footer {
display: grid;
grid-template-columns: 1fr auto;
}
.footer-left {
grid-column: 1;
align-self: center;
}
.footer-right {
margin-left: auto;
list-style-type: none;
display: flex;
}
.footer-right li {
text-decoration: none;
margin: .25em;
}
.footer-right li a {
color: white;
}
.footer-right li a:hover {
opacity: .7;
color: blue;
}
.underlineremove {
text-decoration: none;
text-decoration-style: none;
}
<div class="footer">
<footer>
<p class="footer-left"> © FarHill Deisgns </p>
<ul class="footer-right">
<li>TEST</li>
<li>TEST</li>
<li>TEST</li>
<li>TEST</li>
</ul>
</footer>
</div>