Why doesnt the grid boxes size change depending on the font size because currently the text thats in the header and footer element is out of the box when i put font-size:25;?
do i need to put all of the elements into divs to do so? if you do seem to fix this for me please explain what you did to fix the issue. thank you
:root {
--light: #666666;
--dark: #000000;
}
body {
display: grid;
grid-template-areas:
"header header header"
"nav article article"
"footer footer footer";
grid-template-rows: 80px 1fr 70px;
grid-template-columns: 20% 1fr 15%;
grid-row-gap: 10px;
grid-column-gap: 10px;
height: 60em;
margin: 0px;
padding: 5px 25px 5px 25px;
background-image: url(code.jpeg);
background-size: cover;
background-attachment: fixed;
}
header, footer, article, nav, div {
padding: 1.2em;
background: var(--light);
opacity: 0.85;
color:black;
border-radius: 1.2em;
}
#pageHeader {
grid-area: header;
text-align: center;
font-size: 24px;
}
#pageFooter {
grid-area: footer;
font-size: 25px;
text-align: center;
}
#mainArticle {
grid-area: article;
}
#mainNav {
grid-area: nav;
}
/* Stack the layout on small devices/viewports. */
#media all and (max-width: 575px) {
body {
grid-template-areas:
"header"
"article"
"nav"
"footer";
grid-template-rows: 80px 1fr 70px 1fr 70px;
grid-template-columns: 1fr;
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Clodio Pontes | CV</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="style.css" />
</head>
<body>
<header id="pageHeader">
<h1>header</h1>
</header>
<article id="mainArticle">Article</article>
<nav id="mainNav">
<ul>
<li>London</li>
<li>Paris</li>
<li>Tokyo</li>
</ul>
</nav>
<footer id="pageFooter"><p>MADE BY</p>
</footer>
</body>
</html>
Simply because you used fixed value for header and footer thus you have overflow grid-template-rows: 80px 1fr 70px. Replace the fixed values with the minmax() function so the height will adjust if the content is bigger
:root {
--light: #666666;
--dark: #000000;
}
body {
display: grid;
grid-template-areas:
"header header header"
"nav article article"
"footer footer footer";
grid-template-rows: minmax(80px,max-content) 1fr minmax(70px,max-content);
grid-template-columns: 20% 1fr 15%;
grid-row-gap: 10px;
grid-column-gap: 10px;
height: 60em;
margin: 0px;
padding: 5px 25px 5px 25px;
background-image: url(code.jpeg);
background-size: cover;
background-attachment: fixed;
}
header, footer, article, nav, div {
padding: 1.2em;
background: var(--light);
opacity: 0.85;
color:black;
border-radius: 1.2em;
}
#pageHeader {
grid-area: header;
text-align: center;
font-size: 24px;
}
#pageFooter {
grid-area: footer;
font-size: 25px;
text-align: center;
}
#mainArticle {
grid-area: article;
}
#mainNav {
grid-area: nav;
}
/* Stack the layout on small devices/viewports. */
#media all and (max-width: 575px) {
body {
grid-template-areas:
"header"
"article"
"nav"
"footer";
grid-template-rows: minmax(80px,max-content) 1fr minmax(70px,max-content) 1fr minmax(70px,max-content);
grid-template-columns: 1fr;
}
}
<header id="pageHeader">
<h1>header</h1>
</header>
<article id="mainArticle">Article</article>
<nav id="mainNav">
<ul>
<li>London</li>
<li>Paris</li>
<li>Tokyo</li>
</ul>
</nav>
<footer id="pageFooter">
<p>MADE BY</p>
</footer>
Related
Hello everyone and a big thank you to everyone who tries to help us newcomers to code.
I am trying to vertically align my list items inside the navbar/grid item.
As you can see, the logo on the left stays there nicely vertically in the middle even if I resize the viewport. But the navigation buttons don't.
The logo and the list items belong to the same grid item.
they are both inline
they have the same identical instructions set to them
I would put everything inside a pen, but you can't see it there, you can only see it with inspect element and 50% zoom.
What am I missing?
Thank you!
* {
padding: 0;
box-sizing: border-box;
border-radius: 5px;
text-align: center;
}
body {
background: #F7DAD4;
}
.grid {
display: grid;
height: 98vh;
grid-template-columns: 1fr 4fr 1fr;
grid-template-rows: 0.5fr 1fr 3.5fr 1fr;
grid-gap: 2vh;
grid-template-areas: "nav nav nav" "header header header" "left main right" "footer footer footer";
}
nav {
background: #0A3409;
color: #F7DAD4;
grid-area: nav;
position: relative;
}
.logo {
float: left;
position: relative;
left: 10vw;
top: 50%;
transform: translate(0, -50%);
}
.logo a {
color: #F7DAD4;
text-decoration: none;
font-family: arial black;
font-size: 2em;
}
ul {
float: right;
list-style: none;
}
ul li {
position: relative;
display: inline;
right: 10vw;
top: 50%;
transform: translate(0, -50%);
border: 1px solid white;
}
li a {
text-decoration: none;
color: #F7DAD4;
font-family: arial;
font-weight: bold;
font-size: 1.5em;
transition: 0.2s;
border-radius: initial;
padding: 0 20px;
}
li a:hover {
color: #0A3409;
background-color: #F7DAD4;
}
header {
background: #0A3409;
color: #F7DAD4;
grid-area: header;
}
.left {
background: #FD3A0F;
color: #F7DAD4;
grid-area: left;
}
main {
background: #559E54;
color: #0A3409;
grid-area: main;
}
.right {
background: #17B814;
color: #F7DAD4;
grid-area: right;
}
footer {
background: #0A3409;
color: #F7DAD4;
grid-area: footer;
}
#media only screen and (max-width: 768px) {
.grid {
grid-template-columns: 3fr 2fr;
grid-template-rows: 0.5fr 1fr 1.75fr 1.75fr 1fr;
grid-template-areas: "nav nav" "header header" "main left" "main right" "footer footer";
}
}
#media only screen and (max-width: 500px) {
.grid {
grid-template-columns: 1fr;
grid-template-rows: 0.5fr 1fr 3.5fr 1fr 1fr 1fr;
grid-template-areas: "nav" "header" "main" "left" "right" "footer";
}
}
<div class="grid">
<nav>
<div class="logo">
danctes
</div>
<ul>
<li>Funny</li>
<li>Relatable</li>
<li>Dark</li>
<li>Latest</li>
<li>Best</li>
</ul>
</nav>
<header>Header</header>
<div class="left">Left</div>
<main>Main</main>
<div class="right">Right</div>
<footer>Footer</footer>
</div>
Consider using Flexbox instead of transforms and float when positioning UI elements, I commented out the changes in the code, it should be easy for you read through
* {
margin:0; /* New */
padding: 0;
box-sizing: border-box;
border-radius: 5px;
text-align: center;
}
body {
background: #F7DAD4;
}
.grid {
display: grid;
height: 98vh;
grid-template-columns: 1fr 4fr 1fr;
grid-template-rows: 0.5fr 1fr 3.5fr 1fr;
grid-gap: 2vh;
grid-template-areas: "nav nav nav" "header header header" "left main right" "footer footer footer";
}
nav {
background: #0A3409;
color: #F7DAD4;
grid-area: nav;
position: relative;
/* NEW */
display: flex;
height: 100%;
}
.logo {
/* NEW */
display: flex;
height: 100%;
align-items: center;
/* Removed
/* float: left;
/* position: relative;
/* left: 10vw;
/* top: 50%;
/* transform: translate(0, -50%); */
}
.logo a {
color: #F7DAD4;
text-decoration: none;
font-family: arial black;
font-size: 2em;
}
ul {
list-style: none;
/* NEW */
display: flex;
margin-left: auto;
height: 100%;
align-items: center;
/* Removed
/* float: right; */
}
ul li {
border: 1px solid white;
/* Removed
/* position: relative; */
/* display: inline; */
/* right: 10vw; */
/* top: 50%; */
/* transform: translate(0, -50%); */
}
li a {
text-decoration: none;
color: #F7DAD4;
font-family: arial;
font-weight: bold;
font-size: 1.5em;
transition: 0.2s;
border-radius: initial;
padding: 0 20px;
}
li a:hover {
color: #0A3409;
background-color: #F7DAD4;
}
header {
background: #0A3409;
color: #F7DAD4;
grid-area: header;
}
.left {
background: #FD3A0F;
color: #F7DAD4;
grid-area: left;
}
main {
background: #559E54;
color: #0A3409;
grid-area: main;
}
.right {
background: #17B814;
color: #F7DAD4;
grid-area: right;
}
footer {
background: #0A3409;
color: #F7DAD4;
grid-area: footer;
}
#media only screen and (max-width: 768px) {
.grid {
grid-template-columns: 3fr 2fr;
grid-template-rows: 0.5fr 1fr 1.75fr 1.75fr 1fr;
grid-template-areas: "nav nav" "header header" "main left" "main right" "footer footer";
}
}
#media only screen and (max-width: 500px) {
.grid {
grid-template-columns: 1fr;
grid-template-rows: 0.5fr 1fr 3.5fr 1fr 1fr 1fr;
grid-template-areas: "nav" "header" "main" "left" "right" "footer";
}
}
<div class="grid">
<nav>
<div class="logo">
danctes
</div>
<ul>
<li>Funny</li>
<li>Relatable</li>
<li>Dark</li>
<li>Latest</li>
<li>Best</li>
</ul>
</nav>
<header>Header</header>
<div class="left">Left</div>
<main>Main</main>
<div class="right">Right</div>
<footer>Footer</footer>
</div>
This is what I want to achieve:
On desktop/big screen - 30% of the left side and around 70% of the right side
On mobile/smaller screens - right side goes on top of the left side
Here's what I have so far. I have a feeling I'm using the grid in the right or at least I'm not achieving what I have above...
body {
margin: 40px;
}
.sidebar {
grid-area: sidebar;
}
.content {
grid-area: content;
}
.wrapper {
display: grid;
grid-gap: 10px;
grid-template-columns: auto;
grid-template-areas: "sidebar content content content";
background-color: #fff;
color: #444;
}
.box {
background-color: #444;
color: #fff;
border-radius: 5px;
padding: 20px;
font-size: 150%;
}
.header {
background-color: #999;
}
#media (max-width: 768px) {
grid-template-rows: repeat(auto, 1fr);
grid-template-areas:
"content"
"sidebar";
}
<div class="wrapper">
<div class="box sidebar">Sidebar</div>
<div class="box content">Content</div>
</div>
What's the best approach to this?
You forget to wrap css in .wrapper class in media query
body {
margin: 40px;
}
.sidebar {
grid-area: sidebar;
}
.content {
grid-area: content;
}
.wrapper {
display: grid;
grid-gap: 10px;
grid-template-columns: auto;
grid-template-areas: "sidebar content content content";
background-color: #fff;
color: #444;
}
.box {
background-color: #444;
color: #fff;
border-radius: 5px;
padding: 20px;
font-size: 150%;
}
.header {
background-color: #999;
}
#media (max-width: 768px) {
.wrapper {
grid-template-rows: repeat(auto, 1fr);
grid-template-areas:
"content"
"sidebar";
}
}
<div class="wrapper">
<div class="box sidebar">Sidebar</div>
<div class="box content">Content</div>
</div>
jsfiddle link
body {
margin: 40px;
}
.sidebar {
grid-area: sidebar;
}
.content {
grid-area: content;
width: 70%
}
.wrapper {
display: grid;
display: flex;
flex-wrap: wrap;
grid-gap: 10px;
grid-template-columns: auto;
grid-template-areas: "sidebar content content content";
background-color: #fff;
color: #444;
}
.box {
background-color: #444;
color: #fff;
border-radius: 5px;
padding: 20px;
font-size: 150%;
}
.header {
background-color: #999;
}
#media (max-width: 768px) {
grid-template-rows: repeat(auto, 1fr);
grid-template-areas:
"content"
"sidebar";
}
#media (max-width: 625px) {
.content {
width: 100%;
}
.sidebar {
width: 100%;
}
}
<div class="wrapper">
<div class="box sidebar">Sidebar</div>
<div class="box content">Content</div>
</div>
First i used flex-wrap to toggle between row and column as per the width of the screen. Then i used media query to change the width of the elements as you want different widths in row and column view.
I am trying out a layout using CSS grid. Inside the header I have a div with a class called logo and I want it vertical aligned.
Here is the full code (View full-screen to see the issue):
html,
body {
height: 100%;
}
.container {
display: grid;
height: 100%;
grid-template-rows: 1fr 1fr 1fr;
grid-template-columns: 1fr 1fr;
grid-template-areas: "h h" "s m" "f f";
grid-gap: 10px;
}
.header {
grid-area: h;
background-color: red;
}
.header .logo {
display: inline-grid;
padding: 5px;
border: 1px solid #ccc;
align-content: center;
}
.sidebar {
grid-area: s;
background-color: grey;
}
.main {
grid-area: m;
background-color: purple;
}
.footer {
grid-area: f;
background-color: blue;
}
<div class="container">
<div class="header">
<div class="logo">
<img src="https://via.placeholder.com/50" alt="">
</div>
</div>
<div class="sidebar">Sidebar</div>
<div class="main">Main Content</div>
<div class="footer">Footer</div>
</div>
I've tried: align-content: center and justify-self: center, but it's not moving from the top.
How can I vertical align class logo in the header using css grid?
Is this what you want to do
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<style>
html,
body {
height: 100%;
}
.container {
display: grid;
height: 100%;
grid-template-rows: 1fr 1fr 1fr;
grid-template-columns: 1fr 1fr;
grid-template-areas: "h h" "s m" "f f";
grid-gap: 10px;
}
.header {
padding: 70px 0; /* this code */
grid-area: h;
background-color: red;
}
.header .logo {
display: inline-grid;
padding: 5px;
border: 1px solid #ccc;
}
.sidebar {
grid-area: s;
background-color: grey;
}
.main {
grid-area: m;
background-color: purple;
}
.footer {
grid-area: f;
background-color: blue;
}
</style>
</head>
<body>
<div class="container">
<div class="header">
<div class="logo">
<img src="https://via.placeholder.com/150" alt="">
</div>
</div>
<div class="sidebar">Sidebar</div>
<div class="main">Main Content</div>
<div class="footer">Footer</div>
</div>
</body>
</html>
Other Opsion
.header {
display: table;
overflow: hidden;
height: 500px;
grid-area: h;
background-color: red;
}
.header .logo {
display: table-cell;
vertical-align: middle;
padding: 5px;
border: 1px solid #ccc;
}
This is all you need:
.header .logo {
display: inline-grid;
padding: 5px;
border: 1px solid #ccc; //remove this
align-content: center;
height: 100%; //This will work for responsive screens as well.
}
I am working with grid, and for some reason, using max-width in the media query seems to do nothing. code below:
Code:
body {
color: #fff;
text-align: center;
}
#content {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-auto-rows: minmax(100px, auto);
grid-gap: 1rem;
grid-template-areas: 'header header header header' 'block_1 block_1 block_2 block_2'
}
#media only screen and (max-width:700px) {
#content {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-auto-rows: minmax(100px, auto);
grid-gap: 1rem;
grid-template-areas: 'header' 'block_1' 'block_2'
}
}
#content>* {
background-color: #fff;
border: 1px solid black;
}
.header {
grid-area: header;
height: 150px;
}
.block_1 {
grid-area: block_1;
height: 150px;
}
.block_2 {
grid-area: block_2;
height: 150px;
}
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="master.css">
</head>
<body>
<div id='content'>
<div class='header'>Header</div>
<div class='block_1'>Header</div>
<div class='block_2'>Header</div>
</div>
</body>
</html>
I expect the 2 block classes to stack on top of each other at 699px and below. However, they do not seem to want to do that.
You will also need to change grid-template-columns: repeat(1, 1fr); to make that grid take full width.
body {
color: #fff;
text-align: center;
}
#content {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-auto-rows: minmax(100px, auto);
grid-gap: 1rem;
grid-template-areas: 'header header header header' 'block_1 block_1 block_2 block_2'
}
#media only screen and (max-width:700px) {
#content {
display: grid;
grid-template-columns: repeat(1, 1fr);
grid-auto-rows: minmax(100px, auto);
grid-gap: 1rem;
grid-template-areas: 'header' 'block_1' 'block_2'
}
}
#content>* {
background-color: #fff;
border: 1px solid black;
}
.header {
grid-area: header;
height: 150px;
}
.block_1 {
grid-area: block_1;
height: 150px;
}
.block_2 {
grid-area: block_2;
height: 150px;
}
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="master.css">
</head>
<body>
<div id='content'>
<div class='header'>Header</div>
<div class='block_1'>Header</div>
<div class='block_2'>Header</div>
</div>
</body>
</html>
I created a text and made a boundary around it. Later, I specified the dimensions of the box according to my needs. When I increased the size of the text, it extended outside the box. I even wrote 'text-align:center;' in it's CSS part. Still it is not giving any result.
I've tried text-align:center;
.cards {
display: grid;
grid-template-row: 1fr 2fr 1fr;
margin-right: 50px;
margin-left: 50px;
grid-row-gap: 20px;
}
.main {
grid-row: 2/3;
display: grid;
grid-template-row: 1fr 1fr;
grid-row-gap: 50px;
margin-top: 80px;
}
.upper {
grid-row: 1/2;
display: grid;
grid-template-columns: 1fr 2fr 1fr;
height: 150px;
grid-column-gap: 10px;
}
.name {
color: white;
border: solid 10px #00CED1;
border-radius: 15px;
font-size: 50px;
height: 130px;
padding: 5px;
margin-left: 100px;
grid-column: 1/3;
text-align: center;
}
<div class="cards">
<div class="main">
<div class="upper">
<div class="name">
<h1>
<f style="font-family:'Abril Fatface'">BITS</f>
<g style="font-family:'Antic Didone'">Hack</g>
</h1>
</div>
<div class="year">
<h1 style="font-family:'Asap Condensed'">2019</h1>
</div>
</div>
</div>
</div>
I expect the name BITSHack to be inside the boundry, but it is extending it.
Don't use height: 130px; inside name class.Try this code:
.name{
height: auto;
}
Don't use height at all, the default is set to auto. Also don't use f and g tags, use span. Yuo can wrap both spans with a div and then align the div to the center if you'll the give the container (.name in your case)
display: flex;
align-items: center;
justify-content: center;
.cards {
display: grid;
grid-template-row: 1fr 2fr 1fr;
margin-right: 50px;
margin-left: 50px;
grid-row-gap: 20px;
}
.main {
grid-row: 2/3;
display: grid;
grid-template-row: 1fr 1fr;
grid-row-gap: 50px;
margin-top: 80px;
}
.upper {
grid-row: 1/2;
display: grid;
grid-template-columns: 1fr 2fr 1fr;
height: 150px;
grid-column-gap: 10px;
}
.name {
color: green;
border: solid 10px #00CED1;
border-radius: 15px;
font-size: 50px;
padding: 5px;
margin-left: 100px;
grid-column: 1/3;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
}
<div class="cards">
<div class="main">
<div class="upper">
<div class="name">
<div>
<span style="font-family:'Abril Fatface'">BITS</span>
<span style="font-family:'Antic Didone'">Hack</span>
</div>
</div>
<div class="year">
<h1 style="font-family:'Asap Condensed'">2019</h1>
</div>
</div>
</div>
</div>
.cards
{
display:grid;
grid-template-row: 1fr 2fr 1fr;
margin-right:50px;
margin-left:50px;
grid-row-gap:20px;
}
.main
{
grid-row:2/3;
display:grid;
grid-template-row:1fr 1fr;
grid-row-gap:50px;
margin-top:80px;
}
.upper
{
grid-row:1/2;
display:grid;
grid-template-columns:1fr 2fr 1fr;
height:150px;
//height: auto;
grid-column-gap:10px;
}
.name
{
color:black;
border: solid 10px #00CED1;
border-radius:15px;
font-size:30px;
height:auto;
padding:5px;
margin-left:50px;
grid-column:1/3;
text-align:center;
}
<div class="cards">
<div class="main">
<div class="upper">
<div class="name">
<h1><f style="font-family:'Abril
Fatface'">BITS</f><g style="font-
family:'Antic Didone'">Hack</g></h1>
</div>
<div class="year">
<h1 style="font-family:'Asap
Condensed'">2019</h1>
</div>
</div>
now try to execute it,your expected result will come.