The website is designed to have 6 big squares, 3 per row, in a grid layout.
I am trying to make it responsive, so if someone zooms the website would adapt... and it kind of does, but in a bad way.
I want the squares to lay different when zooming; If now they are 3 per row I want them to go 2 per row and finally 1 per row if zooming enough. Instead of that the squares narrow themselves in their width in order to fit.
/*///////////GENERAL//////////*/
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
/*///////////HEADER//////////*/
header {
text-align: center;
padding: 10px;
margin-bottom: 20px;
border-bottom: 1px solid black;
}
#HeaderContainer {
max-width: 1334px;
margin-left: auto;
margin-right: auto;
display: grid;
grid-template-columns: repeat(1, 1fr 2fr 1fr);
grid-auto-rows: minmax(20px, auto);
}
header > div > p {
padding: 15px;
font-size: 20px;
font-weight: lighter;
font-family: Helvetica, Arial, Sans-serif;
grid-column: 2/3;
max-width: 980px;
}
/*///////////MAINSECTION//////////*/
#MainSectionContainer {
margin-left: auto;
margin-right: auto;
max-width: 1000px;
background: white;
}
section {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: minmax(150px, auto);
gap: 10px;
}
.SectionBox {
min-width: 324px, auto;
display: grid;
align-content: center;
justify-content: center;
border-radius: 30px;
border: 2px solid black;
font-family: Helvetica, Arial, Sans-serif;
}
#photo {
grid-row: 1/3;
}
#web {
grid-row: 1/3;
}
#coding {
grid-row: 1/3;
}
#cv {
grid-row: 3/5;
}
#about {
grid-row: 3/5;
}
#contact {
grid-row: 3/5;
}
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="MyPortfolio" content="MyPortfolio" />
<link rel="stylesheet" href="StylesMainPage.css" />
</head>
<body>
<header>
<div id="HeaderContainer">
<p>WELCOME TO MY PORTFOLIO</p>
</div>
</header>
<div id="MainSectionContainer">
<section>
<p id="photo" class="SectionBox">PHOTOGRAPHY</p>
<p id="web" class="SectionBox">WEB DESIGN</p>
<p id="coding" class="SectionBox">CODING</p>
<p id="cv" class="SectionBox">CURRICULUM VITAE</p>
<p id="about" class="SectionBox">ABOUT ME</p>
<p id="contact" class="SectionBox">CONTACT</p>
</section>
</div>
</body>
</html>
You might need auto-fit and auto-flow
Possible example below,
or https://codepen.io/gc-nomade/pen/mdeYpWK with a max numbers of columns set to 3
/*///////////GENERAL//////////*/
*{
margin: 0px;
padding: 0px;
box-sizing: border-box ;
}
/*///////////HEADER//////////*/
header{
text-align: center;
padding: 10px;
margin-bottom: 20px;
border-bottom:1px solid black;
}
#HeaderContainer{
max-width: 1334px;
margin-left: auto;
margin-right: auto;
display: grid;
grid-template-columns: repeat(1, 1fr 2fr 1fr);
grid-auto-rows: minmax(20px, auto);
}
header > div > p {
padding: 15px;
font-size: 20px;
font-weight: lighter;
font-family: Helvetica, Arial, Sans-serif;
grid-column: 2/3;
max-width: 980px;
}
/*///////////MAINSECTION//////////*/
#MainSectionContainer{
margin-left: auto;
margin-right: auto;
max-width: 1000px;
background: white;
}
section{
display: grid;
grid-template-columns: repeat(auto-fit,minmax(200px,1fr));
grid-auto-rows: minmax(150px, auto);
gap: 10px;
}
.SectionBox{
min-width: 324px, auto;
display: grid;
align-content: center;
justify-content: center;
border-radius: 30px;
border: 2px solid black;
font-family: Helvetica, Arial, Sans-serif;
}
#photo{
}
#web{
}
#coding{
}
#cv{
}
#about{
}
#contact{
}
/* ///////// IE11 alternative ////////////////////////*/
section{
display: -ms-grid;
-ms-grid-columns:1fr 10px 1fr 10px 1fr;
-ms-grid-rows: auto 10px auto;
}
.SectionBox{
min-height:150px;
display: -ms-flexbox;
flex-direction:column;
align-items:center;
}
#photo{
-ms-grid-row: 1;
-ms-grid-column: 1;
}
#web{
-ms-grid-row: 1;
-ms-grid-column: 3;
}
#coding{
-ms-grid-row: 1;
-ms-grid-column: 5;
}
#cv{
-ms-grid-row: 3;
-ms-grid-column: 1;
}
#about{
-ms-grid-row: 3;
-ms-grid-column: 3;
}
#contact{
-ms-grid-row: 3;
-ms-grid-column: 5;
}
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="MyPortfolio" content="MyPortfolio">
<link rel="stylesheet" href="StylesMainPage.css">
</head>
<body>
<header>
<div id="HeaderContainer">
<p>WELCOME TO MY PORTFOLIO</p>
</div>
</header>
<div id="MainSectionContainer">
<section>
<p id="photo" class="SectionBox">PHOTOGRAPHY</p>
<p id="web" class="SectionBox">WEB DESIGN</p>
<p id="coding" class="SectionBox">CODING</p>
<p id="cv" class="SectionBox">CURRICULUM VITAE</p>
<p id="about" class="SectionBox">ABOUT ME</p>
<p id="contact" class="SectionBox">CONTACT</p>
</section>
</div>
</body>
</html>
jsbin for IE11 testing : https://jsbin.com/sifozaduso/1/edit?css,output
Related
So I am trying to wrap my head around css grid. What confuses me is the 'fr' unit on the row as I inspect the grid on the browser, '1fr . 834px'. I set on the main container, 'grid-template-rows: 1fr 1fr 1fr 1fr'. The grid just overblown. When I tried to put the 'height: 250px' in the header container , the column did change, but the row still hold the value 834px. Thus, there will be a huge white gap to the second row. I want it to be when I put the 'height: 250px' on the main container, the next bottom item will follow and stick to become the next column. How do I fix this ? Please help.
P.S : it has to be done only in grid, no flexbox.
Update : Solution found. Have to put height: 100vh on the container and thats it.
Below is my code:
<!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>Holy Grail Mockup</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="header">
<div class="logo">Header Logo</div>
<div class="menu">
<ul>
<li>header link one</li>
<li>header link two</li>
<li>header link three</li>
<li>header link four</li>
</ul>
</div>
</div>
<div class="sidebar">
<div class="photo">
<p>placeholder for image</p>
</div>
<div class="side-content">Box 1
</div>
<div class="side-content">Box 2
</div>
<div class="side-content">Box 3
</div>
</div>
<div class="nav">
<ul>
<li>Latest Articles</li>
<li>Most Views</li>
<li>Featured</li>
</ul>
</div>
</div>
</body>
</html>
* {
margin: 0;
padding: 0;
}
.container {
display: grid;
text-align: center;
grid-template-columns: 1fr 4fr;
grid-template-rows: 1fr 1fr 1fr 1fr;
gap: 4px;
overflow: hidden;
}
.container div {
padding: 15px;
font-size: 32px;
font-family: Helvetica;
font-weight: bold;
color: white;
}
.header {
display: grid;
background-color: #393f4d;
grid-template-columns: 20% 80%;
grid-column: 1/3;
height: 200px;
}
.logo {
display: grid;
justify-content: flex-start;
}
.menu ul,
.menu li {
display: grid;
white-space: nowrap;
align-items: flex-start;
grid-template-columns: repeat(4, 1fr);
font-size: 16px;
list-style: none;
margin-top: 8px;
margin-inline: 115px;
}
.sidebar {
display: grid;
grid-template-rows: repeat(4, 1fr);
background-color: #FF7755;
grid-column: 1/2;
grid-row: 2/4;
gap: 50px;
text-align: center;
}
.sidebar .photo {
display: grid;
align-items: center;
justify-items: center;
background-color: white;
color: black;
font-size: 12px;
font-weight: normal;
border-radius: 10px;
}
.sidebar .side-content {
display: grid;
align-items: center;
justify-items: center;
background-color: white;
color: black;
font-size: 16px;
font-weight: normal;
}
.nav {
display: grid;
background-color: #FF7755;
grid-template-columns: 100%;
grid-column: 2/3;
grid-row: 2/3;
height: 2vh;
}
.nav ul,
.nav li {
display: grid;
grid-auto-flow: column;
font-size: 16px;
text-transform: uppercase;
list-style: none;
}
.article {
display: grid;
background-color: #bccbde;
grid-column: 2/3;
grid-row: 3/4;
}
.article p {
font-size: 18px;
font-family: sans-serif;
color: white;
text-align: left;
}
.article .card {
background-color: #FFFFFF;
color: black;
text-align: center;
}
.card p {
color: black;
font-weight: normal;
font-size: 14px;
}
.card .title {
font-size: 18px;
text-align: center;
}
.footer {
background-color: #393f4d;
}
.footer p {
font-size: 13px;
font-weight: normal;
}
my design looks correct in firefox or chrome but wrong in safari. I don't understand why this is so. If I remove the 'align-items:center' it looks correct but why? I don't have a mac device so I can't try fixing it.
If you want to see what the real website looks like, link here:https://earslanyunus-statspreviewcard.netlify.app
And all codes
#import url("https://fonts.googleapis.com/css2?family=Inter:wght#400;700&family=Lexend+Deca&display=swap");
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
.soft-violet {
color: hsl(277, 64%, 61%);
}
.lexendDeca {
font-family: "Lexend Deca", "sans-serif";
font-weight: 400;
}
p,
a {
font-size: 15px;
}
html {
font-size: 62.5%;
}
body {
background-color: hsl(233, 47%, 7%);
font-family: "sans-serif", "Inter";
}
main {
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
padding: 2rem;
flex-direction: column;
}
.card {
max-width: 120rem;
background-color: hsl(244, 38%, 16%);
border-radius: 10px;
display: -ms-grid;
display: grid;
-ms-grid-columns: 1fr 1fr;
grid-template-columns: 1fr 1fr;
overflow: hidden;
-webkit-box-align: center;
-ms-flex-align: center;
/*problem here*/
align-items: center;
}
.img-box {
height: 100%;
background-color: rgb(170, 92, 219);
background-image: url("stats-preview-card-component-main/images/image-header-desktop.jpg");
background-blend-mode: multiply;
background-size: cover;
}
.card-img {
width: 100%;
height: 100%;
opacity: 0.7;
}
.text-box {
padding: 7rem 9rem 7rem 7rem;
}
.title {
font-size: 4rem;
color: white;
}
.text-desc {
margin-top: 3rem;
color: hsla(0, 0%, 100%, 0.75);
line-height: 1.8;
font-size: 1.6rem;
}
.stat-box {
margin-top: 8rem;
display: -ms-grid;
display: grid;
grid-template-columns: repeat(3, 1fr);
}
.stats-num {
font-weight: 700;
color: white;
font-size: 2.5rem;
}
.stats-text {
font-size: 1.4rem;
color: hsla(0, 0%, 100%, 0.6);
margin-top: 0.2rem;
}
.footer,
.footer a {
font-size: 1.3rem;
color: white;
}
.footer a:link,
.footer a:visited {
color: white;
}
.footer a:hover,
.footer a:active {
color: hsl(277, 64%, 61%);
text-decoration: none;
}
.footer-box {
margin-top: 3rem;
}
#media all and (max-width: 59.6em) {
.text-box {
padding: 4rem 5rem 4rem 4rem;
}
}
#media all and (max-width: 50.7em) {
html {
font-size: 50%;
}
.card {
-ms-grid-columns: 1fr;
grid-template-columns: 1fr;
-ms-grid-rows: 1fr 2fr;
grid-template-rows: 1fr 2fr;
}
.img-box {
grid-row-start: 1;
}
.text-box {
padding: 3rem 5rem 3rem 3rem;
}
.stat-box {
grid-template-columns: 1fr;
grid-template-rows: repeat(3, 1fr);
justify-items: center;
row-gap: 2rem;
}
p {
text-align: center;
}
h1 {
text-align: center;
}
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
<link rel="shortcut icon" href="stats-preview-card-component-main/images/favicon-32x32.png" type="image/x-icon">
<title>Stats Preview Card</title>
</head>
<body>
<main>
<div class="card">
<div class="text-box">
<h1 class="title">Get <span class="soft-violet">insights</span> that help your business grow.</h1>
<p class="text-desc lexendDeca">Discover the benefits of data analytics and make better decisions regarding revenue, customer experience, and overall efficiency.</p>
<div class="stat-box">
<div class="">
<p class="stats-num">10k+</p>
<p class="stats-text lexendDeca">COMPANIES</p>
</div>
<div class="">
<p class="stats-num">314</p>
<p class="stats-text lexendDeca">TEMPLATES</p>
</div>
<div class="">
<p class="stats-num">12M+</p>
<p class="stats-text lexendDeca">QUERIES</p>
</div>
</div>
</div>
<div class="img-box">
<!-- <img class="card-img" src="stats-preview-card-component-main/images/image-header-desktop.jpg" alt=""> -->
</div>
</div>
<div class="footer-box">
<p class="footer text-align-center">Challenge by Frontend Mentor</p>
<p class="footer text-align-center">Coded by Yunus Emre Arslan</p>
</div>
</main>
</body>
</html>
To get the consistency between Chrome / Firefox and Safari :
Remove align-items: center; on the .card element
Remove height:100%; on .img-box element
CSS noob here, running into an issue that I can't seem to figure out, my CSS in creating blank space at the bottom of the document, I'd say about 60% of it. Is there something wrong with the parent parameters or the children?
My HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Redacted</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<div class="grid-container">
<ul>
<li>About</li>
<li>Portfolio</li>
<li>Contact</li>
<li><a id="asides" href="asides.asp">Asides</a></li>
</ul>
<p class="intro">
Bacon Ipsum
</p>
<p class="projects">
Lorem Ipsum
</p>
<footer>Footer placeholder</footer>
</div>
<script src="script.js"></script>
</body>
</html>
CSS:
* {
border: 1px solid gold;
}
.grid-container {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr 1fr;
gap: 10px 10px;
grid-auto-flow: row;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
li {
float: left;
}
a {
display: block;
padding: 8px;
background-color: #ffffff;
}
.intro {
grid-column: 1 / span 4;
grid-row: 2;
}
.projects {
grid-column: 1 / span 4;
grid-row: 3;
}
footer {
grid-column: 1 / span 4;
grid-row: 4;
}
body {
background-color: rgb(124, 252, 188);
margin: 0;
padding: 0;
}
Please excuse the terrible formatting, for now, apologies, and thank you in advance!
You forget to add height on body and grid-container
html,
body {
height: 100%;
}
and add height on the grid-container
.grid-container {
height: 100%;
...
}
CODEPEN
* {
border: 1px solid gold;
}
html,
body {
height: 100%;
}
body {
background-color: rgb(124, 252, 188);
margin: 0;
padding: 0;
}
.grid-container {
height: 100%;
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr 1fr;
gap: 10px 10px;
grid-auto-flow: row;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
li {
float: left;
}
a {
display: block;
padding: 8px;
background-color: #ffffff;
}
.intro {
grid-column: 1 / span 4;
grid-row: 2;
}
.projects {
grid-column: 1 / span 4;
grid-row: 3;
}
footer {
grid-column: 1 / span 4;
grid-row: 4;
}
<div class="grid-container">
<ul>
<li>About</li>
<li>Portfolio</li>
<li>Contact</li>
<li><a id="asides" href="asides.asp">Asides</a></li>
</ul>
<p class="intro">
Bacon Ipsum
</p>
<p class="projects">
Lorem Ipsum
</p>
<footer>Footer placeholder</footer>
</div>
Hope you are all doing great.
I have this code, the header menu sort of work but for some reasons the space between each title is off, I quite tried everything, align-center,self,content , justify-content ... but nothing seems to work, where I am failing ?
I have no idea if it's either Home or Contacts that spacing is completely off
thank you for helping
#import url('https://fonts.googleapis.com/css2?family=Ubuntu:wght#500&display=swap');
body {
margin: 0;
padding: 0;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
a, u {
text-decoration: none;
}
.wrapper {
min-height: 100vh;
display: grid;
grid-template-columns: repeat(3, auto);
grid-template-rows: auto;
grid-template-areas:
"header"
"main"
"footer";
}
.page-header {
grid-area: header;
height: 12.5vh;
width: 100vw;
background-color: rgb(214, 214, 214);
}
.grid-header {
display: grid;
grid-template-columns: repeat(3, 50px);
grid-template-rows: 2.5em;
display: grid;
justify-content: center;
}
#ph-home {
grid-column: 1/3;
grid-row: 2/3;
}
#ph-blog {
grid-column: 2/3;
grid-row: 2/3;
}
#ph-contacts {
grid-column: 3/3;
grid-row: 2/3;
}
#ph-home>a, #ph-blog>a, #ph-contacts>a {
font-family: 'Ubuntu', sans-serif;
font-size: 120%
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="./css/home.css">
</head>
<body>
<div class="wrapper">
<header class="page-header">
<ul class="grid-header">
<li id="ph-home">
Home
</li>
<li id="ph-blog">
Blog
</li>
<li id="ph-contacts">
Contacts
</li>
</ul>
</header>
</div>
</body>
</html>
You can specify your columns and rows in fractions and force them to take up that percentage of the width of their parents along with grid-template-areas: "#ph-home #ph-blog #ph-contacts" and grid-area on the children. Then add a display: flex on the children of the grid to give them a justify-content property. This will ensure everything is spaced out nicely with no need to add a gap statically in pixels.
On your grid parent:
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
grid-template-areas: "#ph-home #ph-blog #ph-contacts";
On your grids children:
#ph-home {
display: flex;
justify-content: center;
grid-area: #ph-home;
}
#import url('https://fonts.googleapis.com/css2?family=Ubuntu:wght#500&display=swap');
body {
margin: 0;
padding: 0;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
a,
u {
text-decoration: none;
}
.wrapper {
min-height: 100vh;
display: grid;
gap: 50px;
grid-template-columns: repeat(3, auto);
grid-template-rows: auto;
grid-template-areas: "header" "main" "footer";
}
.page-header {
grid-area: header;
height: 12.5vh;
width: 100vw;
background-color: rgb(214, 214, 214);
}
.grid-header {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
grid-template-areas: "#ph-home #ph-blog #ph-contacts";
}
#ph-home {
display: flex;
justify-content: center;
grid-area: #ph-home;
}
#ph-blog {
display: flex;
justify-content: center;
grid-area: #ph-blog;
}
#ph-contacts {
display: flex;
justify-content: center;
grid-area: #ph-contacts;
}
#ph-home>a,
#ph-blog>a,
#ph-contacts>a {
font-family: 'Ubuntu', sans-serif;
font-size: 120%
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="./css/home.css">
</head>
<body>
<div class="wrapper">
<header class="page-header">
<ul class="grid-header">
<li id="ph-home">
Home
</li>
<li id="ph-blog">
Blog
</li>
<li id="ph-contacts">
Contacts
</li>
</ul>
</header>
</div>
</body>
</html>
Try this in the 'header'
display:flex;
justify-content: center;
Trying my best to learn CSS Grid...
I have made a nav menu but cannot get it to collapse for mobile view ('hamburger' menu style). I have tried using the 'checkbox hack' seen in several videos and online tutorials.
I also can't seem to get all of the links to list (list begins at 'Products' in my mobile view, but should begin at 'About Us').
Been working on this for days with no luck.
If anyone could help me out in getting this to work I would be very grateful.
Here's the HTML & CSS:
html, body{
margin: 0;
padding: 0;
font-family: Roboto, sans-serif;
font-size: 100%;
}
header{
/* grid-column-start: 1;
grid-column-end: 3;
grid-row:1;
*/
grid-area: header;
background-image:linear-gradient(rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.25)), url(../img/rockspiral.jpg);
display: grid;
grid-template-columns: repeat (4, 1fr);
/* 100px, 1fr 1fr 1fr;
*/
/**** Change to 10% and 90% otherwise it takes up the full viewport ****/
grid-template-rows: 100px auto;
grid-template-areas: "logo topbar-nav topbar-nav topbar-nav" ". hero-text hero-text . ";
}
.logo{
grid-area: logo;
background-image:url(../img/logo-mobile.png);
background-repeat: no-repeat;
margin-left: 10px;
}
.topbar-nav{
grid-area: topbar-nav;
color:white;
background-color: lightblue;
justify-self: end;
align-self: center;
}
.topbar-nav, ul, li{
list-style-type: none;
float: left;
padding: 0px 5px 0px 5px;
}
.hero-text{
grid-area: hero-text;
color:white;
justify-self: center;
align-self: center;
}
.hero-text h1{
font-size: 600%;
}
.hero-text p{
font-size: 200%;
text-align: center;
}
nav{
grid-area: nav;
}
.grid-about{
/* grid-column-start: 1;
grid-column-end: 4;
grid-row:2;
*/
grid-area: about;
}
.grid-products{
/* grid-column-start: 1;
grid-column-end: 4;
grid-row:3;
*/
grid-area: products;
}
.grid-services{
/* grid-column-start: 1;
grid-column-end: 4;
grid-row:4;
*/
grid-area: services;
}
.grid-contact{
grid-area: contact;
}
.grid-location{
grid-area: location;
}
.grid-phone-social{
grid-area: phone;
}
footer{
/* grid-column-start: 1;
grid-column-end: 4;
grid-row:6;
*/
grid-area: footer;
}
/****Grid for mobile screens****/
#media (max-width: 767px){
.grid-container{
display: grid;
background-color: aqua;
grid-auto-rows: 50vh;
grid-gap: 10px;
grid-template-areas: "header"
/* "nav"*/
"about" "products" "services" "contact" "location" "phone" "footer";
}
header{
background-image:linear-gradient(rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.25)), url(../img/rockspiral-mobile.jpg);
background-repeat: no-repeat;
/* Change to: grid-template-columns: 110px auto;
*/
grid-template-columns: 110px auto;
grid-template-rows: 50px auto;
grid-template-areas: "logo topbar-nav" "hero-text hero-text";
}
.topbar-nav ul, li{
display: grid;
grid-template-rows: 10px;
grid-gap: 5px;
font-size:75%;
float:left;
}
.hero-text h1{
font-size: 300%;
text-align: center;
}
.hero-text p{
font-size: 150%;
text-align: center;
}
}
/****Grid for tablet screens****/
#media (min-width: 768px){
.grid-container{
display: grid;
grid-auto-rows: 100vh;
grid-gap: 10px;
background-color: red;
grid-template-areas: "header"
/* "nav" */
"about" "products" "services" "contact" "location" "phone" "footer";
}
header{
grid-area: header;
background-image:linear-gradient(rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.25)), url(../img/rockspiral.jpg);
display: grid;
/* changed: column size 260px 1fr 1fr 1fr*/
grid-template-columns: 260px 1fr 1fr 1fr;
grid-template-rows: 100px auto;
grid-template-areas: "logo topbar-nav topbar-nav topbar-nav" "hero-text hero-text hero-text hero-text";
}
.logo{
grid-area: logo;
background-image:url(../img/logo.png);
background-repeat: no-repeat;
margin-left: 10px;
}
}
<!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="css/layout.css">
<link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">
<title>CSS Grid Sandbox</title>
</head>
<body>
<div class="grid-container">
<header>
<div class="logo"></div>
<div class="topbar-nav">
<ul>
<li>About</li>
<li>Products</li>
<li>Services</li>
<li>Contact</li>
<li>Location & Hours</li>
<li>Phone & Social Media</li>
</ul>
</div>
<div class="hero-text">
<h1>Big Rock Sale</h1>
<p>All rocks 50% off. Offer ends soon!</p>
</div>
</header>
<!-- <nav>Nav</nav> -->
<section class="grid-about">About Us</section>
<section class="grid-products">Products</section>
<section class="grid-services">Services</section>
<section class="grid-contact">Contact</section>
<section class="grid-location">Location & Hours</section>
<section class="grid-phone-social">Phone & Social Media</section>
<footer>Footer</footer>
</div>
</body>
</html>
While I personally recommend using Javascript for this a pure CSS version can be achieved through multiple methods, one of which is by using a checkbox paired with the :checked selector.
.hamburger-menu-content {
display: none;
}
#hamburger-menu-trigger:checked+.hamburger-menu-content {
/* '+' means all elements that have the first element preceding it */
display: block;
}
<input type="checkbox" id="hamburger-menu-trigger">
<div class="hamburger-menu-content">
<p>Foo</p>
<p>Foo</p>
<p>Foo</p>
</div>
The downside of this approach is that you need to click the input again to close it.
To mitigate this we could use a pair of radio button.
.hamburger-menu-content {
display: none;
}
#hamburger-menu-trigger:checked {
display: none;
}
#hamburger-menu-trigger:checked+.hamburger-menu-content {
/* '+' means all elements that have the first element preceding it */
display: block;
}
<input type="radio" name="menuToggle" id="hamburger-menu-trigger">
<div class="hamburger-menu-content">
<input type="radio" name="menuToggle">
<p>Foo</p>
<p>Foo</p>
<p>Foo</p>
</div>
edit: In case you want to change the looks of the buttons you can reference this guide https://www.w3schools.com/howto/howto_css_custom_checkbox.asp