I'm trying to create my website as follow:
In here, the logo image overlaps the grid of the navigation bar.
I have also used CSS grid layout to create the navigation bar, but I'm having trouble making the image expand outside of the border.
This is currently what I have:
Basically, I want the background orange image (border) to shrink in the size vertically so I can have the same design as the above.
#main {
display: grid;
height: 100vh;
grid-template-columns: 1fr 1fr 1fr 1.5fr;
grid-template-rows: 0.02fr 0.2fr 0.1fr 0.25fr 0.45fr;
grid-template-areas:
"nav nav nav nav"
"main-heading main-heading main-heading main-heading"
"sub-heading sub-heading sub-heading sub-heading"
"icons icons icons icons"
"images images images contents";
grid-gap: 0.2rem;
}
#navbar {
border-top: 1px solid black;
}
#navbar {
display: inline-block;
grid-area: nav;
background: orange;
border-radius:var(--main-radius);
padding-top: var(--main-padding);
}
#navbar img, header, ul, li {
display: inline-block;
vertical-align: middle;
}
#navbar img {
border-radius: 50%;
margin-left: 20px;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
/*display: inline-block;*/
float: right;
margin-top: 25px;
margin-right: 20px;
}
li {
display: inline-block;
padding: 12px;
}
#main-heading {
grid-area: main-heading;
background: yellow;
}
#sub-heading {
grid-area: sub-heading;
background: pink;
}
#icons {
grid-area: icons;
background: lightblue;
}
#images {
grid-area: images;
background: orange;
}
#contents {
grid-area: contents:
background: brown;
}
/*#media only screen and (max-width: 600px) {
#main {
grid-template-columns: 1fr;
grid-template-rows: 0.4fr 0.4fr 2.2fr 1.2 0.5;
grid-template-areas:
"nav"
"sidebar"
"main"
"content1"
"content2"
"content3";
}
}*/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive J Web</title>
<link rel="stylesheet" href="Lab04.css">
</head>
<body>
<div id = "main">
<div id = "navbar">
<img src="lens.jpg" alt=lens width=90px height=90px>
<header>
<h3>
Art of Photography
</h3>
</header>
<ul>
<li>Photography</li>
<li>History</li>
<li>Samples</li>
<li>About</li>
</ul>
</div>
<div id = "main-heading">Main-heading</div>
<div id = "sub-heading">Sub-heading</div>
<div id = "icons">Icon</div>
<div id = "images">Images</div>
<div id ="contents">Contents</div>
</div>
</body>
</html>
In order to do the same design, you need to change the position of the logo img as absolute, and give some space to put the logo.
#navbar img {
border-radius: 50%;
margin-left: 20px;
top: -13px;
position:absolute;
}
#main {
display: grid;
height: 100vh;
grid-template-columns: 1fr 1fr 1fr 1.5fr;
grid-template-rows: 0.02fr 0.2fr 0.1fr 0.25fr 0.45fr;
grid-template-areas:
"nav nav nav nav"
"main-heading main-heading main-heading main-heading"
"sub-heading sub-heading sub-heading sub-heading"
"icons icons icons icons"
"images images images contents";
grid-gap: 0.2rem;
}
#navbar {
border-top: 1px solid black;
}
#navbar {
display: inline-block;
grid-area: nav;
background: orange;
border-radius:var(--main-radius);
padding-top: var(--main-padding);
position: relative;
}
#navbar img, header, ul, li {
display: inline-block;
vertical-align: middle;
}
#navbar img {
border-radius: 50%;
margin-left: 20px;
top: -13px;
position:absolute;
}
h3 {
margin-left:120px;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
/*display: inline-block;*/
float: right;
margin-top: 25px;
margin-right: 20px;
}
li {
display: inline-block;
padding: 12px;
}
#main-heading {
grid-area: main-heading;
background: yellow;
}
#sub-heading {
grid-area: sub-heading;
background: pink;
}
#icons {
grid-area: icons;
background: lightblue;
}
#images {
grid-area: images;
background: orange;
}
#contents {
grid-area: contents:
background: brown;
}
/*#media only screen and (max-width: 600px) {
#main {
grid-template-columns: 1fr;
grid-template-rows: 0.4fr 0.4fr 2.2fr 1.2 0.5;
grid-template-areas:
"nav"
"sidebar"
"main"
"content1"
"content2"
"content3";
}
}*/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive J Web</title>
<link rel="stylesheet" href="Lab04.css">
</head>
<body>
<div id = "main">
<div id = "navbar">
<img src="https://www.allintheloop.com/assets/img/logo-sample.jpg" alt=lens width=90px height=90px>
<header>
<h3>
Art of Photography
</h3>
</header>
<ul>
<li>Photography</li>
<li>History</li>
<li>Samples</li>
<li>About</li>
</ul>
</div>
<div id = "main-heading">Main-heading</div>
<div id = "sub-heading">Sub-heading</div>
<div id = "icons">Icon</div>
<div id = "images">Images</div>
<div id ="contents">Contents</div>
</div>
</body>
</html>
You can also try this solution, u should give your navbar fixed height and change display to flex with align items: center.
https://codepen.io/boutahlilsoufiane/pen/NWbPgra
Related
Goal:
Make the content to have fixed width 700px in desktop only and the left-content and right-content width should adapt to desktop's width.
Problem:
I don't know how to solve it in a good way.
Info:
*The layout needs to take account to responsive design.
*Desktop width size start att min-width 901px
*Stil newbie in css layout
Jsbin:
https://jsbin.com/wegebemoqe/edit?html,css,output
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="UTF-8" />
</head>
<body>
<div id="container">
<div id="top-content" class="palette-1">
top
</div>
<div id="content" class="palette-2">
content
</div>
<div id="footer" class="palette-4">
footer
</div>
<div id="left-content" class="palette-5">
</div>
<div id="right-content" class="palette-5">
</div>
</div>
</body>
</html>
body {
color: white;
text-align: center;
box-sizing: content-box;
margin: 20px;
}
.palette-1 {
background-color: #83B2FF;
}
.palette-2 {
background-color: #8BF18B;
}
.palette-4 {
background-color: #FF8650;
}
.palette-5 {
background-color: #FF555E;
}
#container {
margin: 2.5rem;
padding: 0.625rem;
background-color: #FFE981;
height: 37.5rem;
width: calc(100vw - 10rem);
display: grid;
grid-template-areas:
"header header header header"
"left-content content content right-content"
"footer footer footer footer";
row-gap: 1rem;
}
#media screen and (min-width: 901px) {
#content {
width: 700px;
}
}
#media screen and (max-width: 900px) {
#container {
grid-template-areas:
"header header"
"content content"
"footer footer"
}
#left-content, #right-content {
display: none;
}
}
.item {
padding: 1.5rem;
}
#top-content {
grid-area: header;
}
#content {
grid-area: content;
}
#footer {
grid-area: footer;
}
Why you don't set for #content that size when you need or example 700px, and when you don't need just set width: auto.
https://jsbin.com/tubodokusa/edit?html,output
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="UTF-8" />
</head>
<body>
<div id="container">
<div id="top-content" class="palette-1">
<div id="testtest">
<img src="https://i2.wp.com/vanillicon.com/9d348569b83638e8dea4e9ef05a828b4_200.png" width="100px" height="45px" />
</div>
<div id="asdfasdf">
<span onclick="myFunction2()">Menu</span>
<img onclick="myFunction()" src="https://i2.wp.com/vanillicon.com/9d348569b83638e8dea4e9ef05a828b4_200.png" width="100px" height="45px" />
</div>
<ul id="iconmenu" class="nav-menu">
<li class="title">Coffee</li>
<li class="title">Tea</li>
<li class="title">Milk</li>
</ul>
</div>
<div id="content" class="palette-2">
content
</div>
<div id="footer" class="palette-4">
footer
</div>
</div>
</body>
</html>
body {
color: white;
text-align: center;
box-sizing: content-box;
margin: 0;
}
.palette-1 {
background-color: #83B2FF;
}
.palette-2 {
background-color: #8BF18B;
}
.palette-4 {
background-color: #FF8650;
}
.palette-5 {
background-color: #FF555E;
}
#container {
}
#content {
grid-area: content;
}
#footer {
grid-area: footer;
}
#media only screen and (min-width: 1030px) {
#container {
background-color: #FFE981;
width: 100%;
display: grid;
grid-template-areas:
"left-header header right-header"
"left-content content right-content"
"left-footer footer right-footer";
row-gap: 1rem;
display: grid;
/*
grid-template-columns: 1fr fit-content(500px) 1fr;
grid-template-columns: 1fr auto 1fr; */
grid-gap: 5px;
box-sizing: border-box;
height: 200px;
background-color: #8cffa0;
padding: 10px;
grid-template-columns: 1fr 1000px 1fr;
grid-template-rows: auto auto auto;
}
#top-content {
grid-area: header;
display: flex;
align-items: center;
justify-content: center;
border-top: 3px solid #425c62;
}
#asdfasdf {
display: none;
}
ul.nav-menu {
margin: 0;
}
ul.nav-menu > li {
display: inline-block;
padding: 0 10px 0 10px;
margin: 0;
line-height: 70px;
border-top: 1px solid #83B2FF;
}
ul.nav-menu > li:hover {
background-color: #2779BF;
border-top: 1px solid #425c62;
}
#content {
}
}
#media only screen and (max-width: 1029px) {
#container {
grid-template-areas:
"header"
"content"
"footer"
}
#top-content {
grid-area: header;
align-items: center;
}
#left-content, #right-content {
display: none;
}
.mystyle {
display: none;
transition: all 1s ease-in;
padding: 0 0 0 0;
line-height: 0;
}
#testtest {
background-color: blue;
}
#asdfasdf {
/**/
grid-area: header;
display: flex;
align-items: center;
justify-content: space-between;
background-color: grey;
}
ul.nav-menu {
margin: 0;
}
ul.nav-menu > li {
display: inline-block;
padding: 0 10px 0 10px;
margin: 0;
line-height: 70px;
border-top: 1px solid #83B2FF;
}
ul.nav-menu > li:hover {
background-color: #2779BF;
border-top: 1px solid #425c62;
}
#content {
}
}
function myFunction() {
var element = document.getElementById("iconmenu");
element.classList.add("mystyle");
}
function myFunction2() {
var element = document.getElementById("iconmenu");
element.classList.remove("mystyle");
}
my page contains a grid layout.
I need to display a non permanent element (cookie consent element )
I placed it outside the document flow using position: absolute to not effect the grid layout.
I need every bit of space so I dont want to allocate extra space to a temporary element by adding a extra row
How can I fixate the starting Position of the element even when the page width and height changes ?
.cookie-consent {
background: red;
width: 200px;
height: 100px;
position: absolute;
bottom: 30px;
right: 150px;
z-index: 20;
}
:root {
padding-left: 10%;
padding-right: 10%;
}
.container {
display: grid;
height: 100vh;
margin: auto;
max-width: 80%;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-template-rows: 0.2fr 1.2fr 1.8fr 0.3fr;
grid-template-areas:
"nav nav nav nav"
"component1 component1 component1 component1"
"component2 component2 component2 component2"
"footer footer footer footer";
grid-gap: 0.5rem;
font-weight: 800;
text-transform: uppercase;
text-align: center;
}
nav {
text-align: center;
background: #a7ffeb;
grid-area: nav;
border-radius: var(--main-radius);
padding-top: var(--main-padding);
}
#component1 {
background: #6fffd2;
grid-area: component1;
border-radius: var(--main-radius);
padding-top: var(--main-padding);
}
#component2 {
background: #64ffda;
grid-area: component2;
border-radius: var(--main-radius);
padding-top: var(--main-padding);
}
footer {
background: #1de9b6;
grid-area: footer;
border-radius: var(--main-radius);
padding-top: var(--main-padding);
}
.cookie-consent {
background: red;
width: 200px;
height: 100px;
/* transform: translateX(-80%); */
/* /* margin-top: 50%; */
/* border-radius: var(--main-radius); */
/* margin-top: 30%; */
/* margin-left: 50%; */
/* top: 300px;
left: 30px;
bottom: 100px; */
position: absolute;
bottom: 30px;
right: 150px;
/* top: 5; */
/* right: 20; */
/* left: 2; */
/* bottom: 20; */
z-index: 20;
}
/* place the element cookie on top of the gird layout */
/* */
<!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" />
<!-- add style css to page -->
<link rel="stylesheet" href="./style.css" />
<title>Document</title>
</head>
<body>
<div class="cookie-consent">
</div>
<div class="container">
<nav>Navbar</nav>
<div id="component1">component1</div>
<div id="component2">component2</div>
<footer>Footer</footer>
</div>
</body>
</html>
Use percentages instead of pixels in bottom and right property of .cookie-consent class. I also added overflow: hidden; to the body selector.
Also, consider setting the width and height (red div) not rigidly.
It should be better ;-)
I hope You will be content . Best regards !
:root {
padding-left: 10%;
padding-right: 10%;
}
body {
overflow: hidden;
}
.container {
display: grid;
height: 100vh;
margin: auto;
max-width: 80%;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-template-rows: 0.2fr 1.2fr 1.8fr 0.3fr;
grid-template-areas: "nav nav nav nav" "component1 component1 component1 component1" "component2 component2 component2 component2" "footer footer footer footer";
grid-gap: 0.5rem;
font-weight: 800;
text-transform: uppercase;
text-align: center;
}
nav {
text-align: center;
background: #a7ffeb;
grid-area: nav;
border-radius: var(--main-radius);
padding-top: var(--main-padding);
}
#component1 {
background: #6fffd2;
grid-area: component1;
border-radius: var(--main-radius);
padding-top: var(--main-padding);
}
#component2 {
background: #64ffda;
grid-area: component2;
border-radius: var(--main-radius);
padding-top: var(--main-padding);
}
footer {
background: #1de9b6;
grid-area: footer;
border-radius: var(--main-radius);
padding-top: var(--main-padding);
}
.cookie-consent {
background: red;
width: 200px;
height: 100px;
position: absolute;
bottom: 5%;
right: 9%;
z-index: 20;
}
<!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" />
<!-- add style css to page -->
<link rel="stylesheet" href="./style.css" />
<title>Document</title>
</head>
<body>
<div class="cookie-consent">
</div>
<div class="container">
<nav>Navbar</nav>
<div id="component1">component1</div>
<div id="component2">component2</div>
<footer>Footer</footer>
</div>
</body>
</html>
So I've been trying to overlap grid 2 over grid 1 without using negative margins but I'm unable to do so please help
Here's my code
index.html
<!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" />
<title>Document</title>
<link rel="stylesheet" href="./styles/styles.css" />
</head>
<body>
<div class="HeaderContainerGrid">
<img src="./svg/background.svg" />
<header>
<h1>Guideline</h1>
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
</header>
</div>
</body>
</html>
styles.scss
#import './variables';
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: sans-serif;
}
img {
width: 100%;
}
header {
grid-template-columns: 1fr 1fr;
display: grid;
align-items: end;
justify-content: end;
h1 {
display: grid;
height: 100%;
align-items: center;
margin-left: 1em;
}
nav {
height: 100%;
display: grid;
align-items: center;
grid-template-columns: 1fr;
}
ul {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
text-decoration: none;
list-style: none;
}
li {
margin-left: 10px;
margin-right: 10px;
padding: 20px;
text-align: center;
&:hover {
cursor: pointer;
background-color: $secondaryColor;
transition: 0.5s;
color: $onHoverTextColor;
}
}
}
.HeaderContainerGrid {
display: grid;
&:nth-child(1) {
background-color: red;
grid-row: 1 / 2;
z-index: 1
}
&:nth-child(0) {
grid-row: 1 / 2;
z-index: -1
}
}
CodeSandbox URL
Make header position absolute so that it will come out from its normal flow and come over the nearest relative position.
DEMO
header{
position: absolute;
}
.HeaderContainerGrid {
position: relative;
}
I currently have this navigation bar in 1280 pixel resolution as follows:
To make it responsive, I want to have the title at the bottom of the logo image when it reaches 1080 pixels. Below is the sample I want it to have it exactly:
I have been using CSS Grid to divided the columns and rows. I am using media queries to have my website responsive, but for some reason nothing works when I try to increase the size of the grid-template-rows elements in CSS.
So far, this is what I got:
I can only assume that the title is hiding behind the image since the row is not large enough to fit below it. I'm not exactly sure how to fix my code.
HTML
#media only screen and (max-width: 1280px) {
.main {
display: grid;
height: 100vh;
grid-template-columns: 1fr 1fr 1fr 1.2fr;
grid-template-rows: 0.2fr 0.4fr 0.2fr 0.70fr 0.45fr;
grid-template-areas:
"nav nav nav nav"
"main-heading main-heading main-heading main-heading"
"sub-heading sub-heading sub-heading sub-heading"
"icons icons icons icons"
"images images images contents";
grid-gap: 0.2rem;
}
#navbar {
display: inline-block;
grid-area: nav;
background: orange;
border-radius:var(--main-radius);
padding-top: var(--main-padding);
}
#navbar img, header, ul, li {
display: inline-block;
vertical-align: middle;
}
#navbar img {
border-radius: 50%;
margin-left: 20px;
top: -13px;
position: absolute;
}
h3 {
margin-left: 120px;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
/*display: inline-block;*/
float: right;
margin-top: 10px;
margin-right: 20px;
}
li {
display: inline-block;
padding: 12px;
}
#main-heading {
grid-area: main-heading;
background: yellow;
font-weight: bold;
font-size: 30px;
display: flex;
align-items: center;
justify-content: center;
}
#sub-heading {
grid-area: sub-heading;
background: pink;
font-weight: bold;
font-size: 20px;
display: flex;
align-items: center;
justify-content: center;
}
#icons {
grid-area: icons;
background: lightblue;
display: flex;
align-items: center;
justify-content: center;
}
#icons img {
padding: 30px;
}
#images {
grid-area: images;
background: orange;
}
#images_heading {
margin-left: 20px;
}
#images img {
margin-left: 30px;
padding: 15px;
}
#contents {
grid-area: contents;
background: brown;
}
#contents_first img {
float:left;
}
#contents_first h5 {
font-size: 15px;
}
/*#contents_first {
display: flex;
margin-left: 10px;
}*/
/*#contents_first h5 {
float: right;
margin-left: 20px;
}/*
/*#contents_first h5 {
margin-top: 3px;
margin-left: 10px;
font-size: 15px;
}*/
#contents_second img {
float:left;
}
#contents_second h5 {
font-size: 15px;
}
#contents_third img {
float: left;
}
#contents_third h5 {
font-size: 15px;
}
#contents_fourth img {
float: left;
}
#contents_fourth #name {
font-size: 17px;
}
footer {
text-align: right;
}
}
#media only screen and (max-width: 1080px)
{
.main {
display: grid;
height: 100vh;
grid-template-columns: 1fr 1fr 1fr 1.2fr;
grid-template-rows: 0.2fr 0.4fr 0.2fr 0.70fr 0.45fr 0.1fr;
grid-template-areas:
"nav nav nav nav"
"main-heading main-heading main-heading main-heading"
"sub-heading sub-heading sub-heading sub-heading"
"icons icons icons icons"
"images images images images"
"contents contents contents contents";
grid-gap: 0.2rem;
}
#navbar {
display: inline-block;
grid-area: nav;
background: ;
border-radius:var(--main-radius);
padding-top: var(--main-padding);
}
#navbar img, header, ul, li {
display: inline-block;
vertical-align: middle;
}
#navbar img {
border-radius: 50%;
margin-left: 500px;
top: -13px;
position: absolute;
}
h3 {
margin-left: 450px;
margin-bottom: -900px;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
/*display: inline-block;*/
float: right;
margin-top: 10px;
margin-right: 20px;
}
li {
display: inline-block;
padding: 12px;
}
#main-heading {
grid-area: main-heading;
background: yellow;
font-weight: bold;
font-size: 30px;
display: flex;
align-items: center;
justify-content: center;
}
#sub-heading {
grid-area: sub-heading;
background: pink;
font-weight: bold;
font-size: 20px;
display: flex;
align-items: center;
justify-content: center;
}
#icons {
grid-area: icons;
background: lightblue;
display: flex;
align-items: center;
justify-content: center;
}
#icons img {
padding: 30px;
}
#images {
grid-area: images;
background: orange;
}
#images_heading {
margin-left: 20px;
}
#images img {
margin-left: 30px;
padding: 15px;
}
#contents {
grid-area: contents;
background: brown;
}
#contents_first img {
float:left;
}
#contents_first h5 {
font-size: 15px;
}
/*#contents_first {
display: flex;
margin-left: 10px;
}*/
/*#contents_first h5 {
float: right;
margin-left: 20px;
}/*
/*#contents_first h5 {
margin-top: 3px;
margin-left: 10px;
font-size: 15px;
}*/
#contents_second img {
float:left;
}
#contents_second h5 {
font-size: 15px;
}
#contents_third img {
float: left;
}
#contents_third h5 {
font-size: 15px;
}
#contents_fourth img {
float: left;
}
#contents_fourth #name {
font-size: 17px;
}
footer {
text-align: right;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive J Web</title>
<link rel="stylesheet" href="Lab04.css">
</head>
<body>
<div class = "main">
<section id = "navbar">
<img src="lens.jpg" alt=lens width=90px height=90px>
<header>
<h3>
Art of Photography
</h3>
</header>
<ul>
<li><div class="navbar_left">Photography</div></li>
<li><div class="navbar_left">History</div></li>
<li><div class="navbar_right">Samples</div></li>
<li><div class="navbar_right">About</div></li>
</ul>
</section>
<section id = "main-heading">SELF-PORTRAIT & STREET PHOTOGRAPHY
</section>
<div id = "sub-heading">FROM VANCOUVER, BC</div>
<div id = "icons">
<img src="first_circle.png" alt="first_circle" width=70px height=70px>
<img src="second_circle.png" alt="second_circle" width=70px height=70px>
<img src="third_circle.png" alt="third_circle" width=70px height=70px>
<img src="fourth_circle.png" alt="fourth_circle" width=70px height=70px>
</div>
<div id = "images">
<p id = "images_heading">Navigation page</p>
<img src="camera_atmosphere.jpg" alt="camera_atmosphere" width=250px height=140px>
<img src="camera_guy.jpg" alt="camera_guy" width=250px height=140px>
<img src="graph.jpg" alt="graph" width=250px height=140px>
<img src="rolliflex.jpg" alt="graph" width=250px height=140px>
</div>
<div id="contents">
<p id = "contents_heading">
News
</p>
<section id = "contents_first">
<img src="camera_atmosphere.jpg" alt="camera_atmosphere" width=50px height=50px>
<h5>PHOTO CAPTURED IN VANCOUVER, STANLEY PARK.</h5>
</section>
<section id ="contents_second">
<img src="camera_guy.jpg" alt="camera_guy" width=50px height=50px>
<h5>CAMERA GUY WHO ALWAYS LOOK FOR ADVENTURE.</h5>
</section>
<section id = "contents_third">
<img src="first_circle.png" alt="first_circle" width=50px height=50px>
<h5>CIRCLE CAPTURED IN SOMEWHERE IN THE WORLD.</h5>
</section>
<br/>
<section id = "contents_fourth">
<img src="mail_icon.jpg" alt="mail_icon" width= 20px height=20px>
<p id="name">J<span style="font-weight:bold">A</span></p>
<p id="name_info">Please reach out to J A for more information.</p>
<footer>© J A</footer>
</section>
</div>
</div>
</body>
instead of using '1fr' use 'auto'
you can do this
grid-template: auto 1fr auto/ auto 1fr auto;
I have looked at other tutorials on how to make the footer stick to the bottom with css grid when there is little content. But i can't figure it out.
If you could help, that would be great. I'm learning css grid and i've spent days on and off trying to figure it out.
* {
margin: 0;
padding: 0;
color: #ffffff;
font-family: helvetica;
}
body {
background-color: #191919;
}
html body {
height: 100%;
width: 100%;
}
.grid {
min-height: 100%;
display: grid;
grid-template-columns: 10% 40% 40% 10%;
grid-template-rows: 50px 1fr auto;
grid-row-gap: 10px;
grid-template-areas:
"header header header header"
". main main ."
"footer footer footer footer";
}
/*Header*/
.header {
grid-area: header;
background-color: red;
display: grid;
position: fixed;
width: 100%;
grid-template-columns: 40% 60%;
grid-template-areas:
"title navigation"
}
.title {
grid-area: title;
text-align: center;
}
.navigation {
grid-area: navigation;
}
.title .navigation {
}
/*Main*/
.main {
margin-top: 50px;
grid-area: main;
background-color: #323232;
border-radius: 10px;
}
/*Footer*/
.footer {
grid-area: footer;
background-color: black;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<link rel="stylesheet" type="text/css" href="./css/style.css">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Mortrix</title>
</head>
<body>
<div class="grid">
<!-- Header -->
<div class="header">
<div class="title"> <h1>Mortrix</h1></div>
<div class="navigation">Navigation</div>
</div>
<!-- Main -->
<div class="main">
This is some content
</div>
<!-- Footer -->
<div class="footer">Footer
</div>
</div>
</body>
</html>
I know this question have already been asked, but i am looking a for a fix for my own code. Sorry if i missed something obvious.
You can fixed the footer at the bottom of the window simply by using the Viewport Height (vh) . This unit is based on the height of the viewport. A value of 1vh is equal to 1% of the viewport height. So here I just set the .grid's min-height: 100vh rather than min-height: 100%
* {
margin: 0;
padding: 0;
color: #ffffff;
font-family: helvetica;
}
body {
background-color: #191919;
}
html body {
height: 100%;
width: 100%;
}
.grid {
min-height: 100vh;
display: grid;
grid-template-columns: 10% 40% 40% 10%;
grid-template-rows: 50px 1fr auto;
grid-row-gap: 10px;
grid-template-areas:
"header header header header"
". main main ."
"footer footer footer footer";
}
/*Header*/
.header {
grid-area: header;
background-color: red;
display: grid;
position: fixed;
width: 100%;
grid-template-columns: 40% 60%;
grid-template-areas:
"title navigation"
}
.title {
grid-area: title;
text-align: center;
}
.navigation {
grid-area: navigation;
}
.title .navigation {
}
/*Main*/
.main {
margin-top: 50px;
grid-area: main;
background-color: #323232;
border-radius: 10px;
}
/*Footer*/
.footer {
grid-area: footer;
background-color: black;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<link rel="stylesheet" type="text/css" href="./css/style.css">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Mortrix</title>
</head>
<body>
<div class="grid">
<!-- Header -->
<div class="header">
<div class="title"> <h1>Mortrix</h1></div>
<div class="navigation">Navigation</div>
</div>
<!-- Main -->
<div class="main">
This is some content
</div>
<!-- Footer -->
<div class="footer">Footer
</div>
</div>
</body>
</html>
It's an old question but here is my solution anyway...
Use css variables for the footer height and header height.
:root {
--header-height: 56px;
--footer-height: 56px;
}
Set the min-height of the main element using the css calc function unit by subtracting the footer and header height from the full viewport height.
main {
min-height: calc(100vh - (var(--footer-height) + var(--header-height)));
}
Super simple solution:
Add the following code to your .footer class:
position:absolute;
bottom:0;
left:0;
right:0;
The full footer class will look like:
.footer {
grid-area: footer;
background-color: black;
position:absolute;
bottom:0;
left:0;
right:0;
}
That is litterally all you have to do!
Here is how it renders:
* {
margin: 0;
padding: 0;
color: #ffffff;
font-family: helvetica;
}
body {
background-color: #191919;
}
html body {
height: 100%;
width: 100%;
}
.grid {
min-height: 100%;
display: grid;
grid-template-columns: 10% 40% 40% 10%;
grid-template-rows: 50px 1fr auto;
grid-row-gap: 10px;
grid-template-areas:
"header header header header"
". main main ."
"footer footer footer footer";
}
/*Header*/
.header {
grid-area: header;
background-color: red;
display: grid;
position: fixed;
width: 100%;
grid-template-columns: 40% 60%;
grid-template-areas:
"title navigation"
}
.title {
grid-area: title;
text-align: center;
}
.navigation {
grid-area: navigation;
}
.title .navigation {
}
/*Main*/
.main {
margin-top: 50px;
grid-area: main;
background-color: #323232;
border-radius: 10px;
}
/*Footer*/
.footer {
grid-area: footer;
background-color: black;
position:absolute;
bottom:0;
left:0;
right:0;
}
<div class="grid">
<!-- Header -->
<div class="header">
<div class="title"> <h1>Mortrix</h1></div>
<div class="navigation">Navigation</div>
</div>
<!-- Main -->
<div class="main">
This is some content
</div>
<!-- Footer -->
<div class="footer">Footer
</div>
</div>
Here's an example with the code below.
CSS
html {
/* min-height on body doesn't work unless it's parent (html) has an explicit height */
height: 100%;
}
body {
/* min-height because content larger than 100% of the view height should scroll */
min-height: 100%;
display: grid;
/* we have 3 rows: header, main and footer. We want the main content to fill the empty space when the content doesn't fill the viewport */
grid-template-rows: auto 1fr auto;
}
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
</head>
<body>
<div>
<p>Header</p>
</div>
<div>
<p>Main</p>
</div>
<div>
<p>Footer</p>
</div>
</body>
</html>
See BoltClock's excellent answer for more explanation about height usage with html and body.