How to make a fixed size content - html
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");
}
Related
How do I get a form element that is 600px when the window is wider than 600px?
I need to complete an html/css assessment as part of the admissions process of getting into a coding bootcamp. I submitted this code but I got feedback saying that I didn't have "a 'form' element that is 600px when the window is wider than 600px". I'm very confused as I clearly specified within the code that no element will exceed 600px regardless of screen size. I'm in a bit of a time crunch and have a limited amount of attempts at this assessment so any help would be appreciated.
form {
width: auto;
}
#media screen and (min-width: 600px) {
/* big */
.form {
max-width: 600px;
display: block;
/* display: block; is a maybe */
grid-template-columns: 1fr;
/* grid-template-columns: 1fr; is also a maybe */
}
label {
display: block;
margin: 0;
text-align: left;
width: auto;
}
input,
select,
textarea {
width: 100%;
}
.center {
margin: auto;
width: 50%;
border: 3px;
}
.wrapper {
display: grid;
grid-template-columns: repeat(1fr);
gap: 12px;
}
.one {
grid-row: 1;
max-width: 600px;
}
.two {
grid-row: 2;
max-width: 600px;
}
.three {
grid-row: 3;
max-width: 600px; /*added later*/
}
.four {
grid-row: 4;
max-width: 600px;
}
.five {
grid-row: 5;
max-width: 600px;
}
.card {
width: 344px;
background-color: #E0E0E0;
padding: 5px;
margin: 0;
}
.desertIm {
height: 194px;
width: 100%;
}
.title {
color: #000;
font-size: 22px;
}
.secondarytxt {
color: #232F34;
}
.bodytxt {
font-size: 11px;
color: #232F34;
margin: 16px;
}
.avatar {
height: 40px;
width: 40px;
border-radius: 50%;
position: relative;
top: 20%;
left: 15%;
}
}
/* divider */
.item1 {
grid-area: header;
}
.item2 {
grid-area: avatar;
}
.item3 {
grid-area: sec;
}
.item4 {
grid-area: title;
}
.item5 {
grid-area: body;
}
.card {
display: grid;
grid-template-areas:
"header header header header header header"
"avatar title title title title title"
"avatar sec sec sec sec sec"
"body body body body body body";
}
.card > div {
text-align: left;
background-color: white;
}
.card:hover {
box-shadow: 0 2px 4px rgba(0, 0, 0, .3);
}
/* divider */
#media screen and (max-width: 600px) {
form {
width: 100%;
}
label {
display: block;
margin: 0;
text-align: left;
width: auto;
}
input,
select,
textarea {
width: 100%;
}
.card {
width: 344px;
background-color: #E0E0E0;
padding: 5px;
margin: 0;
}
.desertIm {
height: 194px;
width: 100%;
}
.title {
color: #000;
font-size: 22px;
}
.secondarytxt {
color: #232f34;
}
.bodytxt {
font-size: 11px;
color: #232f34;
margin: 16px;
}
.avatar {
height: 40px;
width: 40px;
border-radius: 50%;
position: relative;
top: 20%;
left: 15%;
}
.item1 {
grid-area: header;
}
.item2 {
grid-area: avatar;
}
.item3 {
grid-area: sec;
}
.item4 {
grid-area: title;
}
.item5 {
grid-area: body;
}
.card {
display: grid;
grid-template-areas:
"header header header header header header"
"avatar title title title title title"
"avatar sec sec sec sec sec"
"body body body body body body";
}
.card > div {
text-align: left;
background-color: white;
}
.card:hover {
box-shadow: 0 2px 4px rgba(0, 0, 0, .3);
}
}
<html>
<body>
<div class="center wrapper form">
<form action="/pets" method="post">
</form>
<div class="one">
<label for="name">Name</label>
<input type="text" id="name" name="pet_name">
</div>
<div class="two">
<label for="type">Type
<select name="pet_type" id="type">
<option value="cat">Cat</option>
<option value="dog">Dog</option>
<option value="hamster">Hamster</option>
<option value="other">Other</option>
<option value="zebra">Zebra</option>
</select>
</label>
</div>
<div class="three">
<label for="biography">Biography</label>
<textarea id="bio" name="pet_bio" rows="4" cols="50">
</textarea>
</div>
<div class="four">
<label for="email">Owner's Email</label>
<input type="email" id="owner-email" name="pet_owner_email">
</div>
<div class="five">
<button type="submit" id="new-pet-submit-button">Create new pet</button>
<button type="reset">Reset</button>
</div>
<!-- divider -->
<div class="card">
<div class="item1"><img src="images/desert.jpg" class ="desertIm"></div>
<div class="item2"><img src="images/person-avatar.jpg" class="avatar"></div>
<div class="item3"><body><p class="secondarytxt">Secondary text</p></body></div>
<div class="item4"><h4><b class="title">Title goes here</b></h4></div>
<div class="item5"><body><p class="bodytxt">Greyhound divisively hello coldly
wonderfully marginally far upon excluding.</p></body></div>
</div>
</div>
</body>
</html>
what you coded should be correct, when the screen exceeds 600px, the form stays at 600px
form {
width: 100%;
}
#media screen and (min-width: 600px) {
/* big */
.form {
max-width: 600px;
display: block;
/* display: block; is a maybe */
grid-template-columns: 1fr;
/* grid-template-columns: 1fr; is also a maybe */
}
label {
display: block;
margin: 0;
text-align: left;
width: auto;
}
input,
select,
textarea {
width: 100%;
}
.center {
margin: auto;
width: 50%;
border: 3px;
}
.wrapper {
display: grid;
grid-template-columns: repeat(1fr);
gap: 12px;
}
.one {
grid-row: 1;
max-width: 600px;
}
.two {
grid-row: 2;
max-width: 600px;
}
.three {
grid-row: 3;
max-width: 600px; /*added later*/
}
.four {
grid-row: 4;
max-width: 600px;
}
.five {
grid-row: 5;
max-width: 600px;
}
.card {
width: 344px;
background-color: #E0E0E0;
padding: 5px;
margin: 0;
}
.desertIm {
height: 194px;
width: 100%;
}
.title {
color: #000;
font-size: 22px;
}
.secondarytxt {
color: #232F34;
}
.bodytxt {
font-size: 11px;
color: #232F34;
margin: 16px;
}
.avatar {
height: 40px;
width: 40px;
border-radius: 50%;
position: relative;
top: 20%;
left: 15%;
}
}
/* divider */
.item1 {
grid-area: header;
}
.item2 {
grid-area: avatar;
}
.item3 {
grid-area: sec;
}
.item4 {
grid-area: title;
}
.item5 {
grid-area: body;
}
.card {
display: grid;
grid-template-areas:
"header header header header header header"
"avatar title title title title title"
"avatar sec sec sec sec sec"
"body body body body body body";
}
.card > div {
text-align: left;
background-color: white;
}
.card:hover {
box-shadow: 0 2px 4px rgba(0, 0, 0, .3);
}
/* divider */
#media screen and (max-width: 600px) {
form {
width: 100%;
}
label {
display: block;
margin: 0;
text-align: left;
width: auto;
}
input,
select,
textarea {
width: 100%;
}
.card {
width: 344px;
background-color: #E0E0E0;
padding: 5px;
margin: 0;
}
.desertIm {
height: 194px;
width: 100%;
}
.title {
color: #000;
font-size: 22px;
}
.secondarytxt {
color: #232f34;
}
.bodytxt {
font-size: 11px;
color: #232f34;
margin: 16px;
}
.avatar {
height: 40px;
width: 40px;
border-radius: 50%;
position: relative;
top: 20%;
left: 15%;
}
.item1 {
grid-area: header;
}
.item2 {
grid-area: avatar;
}
.item3 {
grid-area: sec;
}
.item4 {
grid-area: title;
}
.item5 {
grid-area: body;
}
.card {
display: grid;
grid-template-areas:
"header header header header header header"
"avatar title title title title title"
"avatar sec sec sec sec sec"
"body body body body body body";
}
.card > div {
text-align: left;
background-color: white;
}
.card:hover {
box-shadow: 0 2px 4px rgba(0, 0, 0, .3);
}
}
<body>
<div class="center wrapper form">
<form action="/pets" method="post">
</form>
<div class="one">
<label for="name">Name</label>
<input type="text" id="name" name="pet_name">
</div>
<div class="two">
<label for="type">Type
<select name="pet_type" id="type">
<option value="cat">Cat</option>
<option value="dog">Dog</option>
<option value="hamster">Hamster</option>
<option value="other">Other</option>
<option value="zebra">Zebra</option>
</select>
</label>
</div>
<div class="three">
<label for="biography">Biography</label>
<textarea id="bio" name="pet_bio" rows="4" cols="50">
</textarea>
</div>
<div class="four">
<label for="email">Owner's Email</label>
<input type="email" id="owner-email" name="pet_owner_email">
</div>
<div class="five">
<button type="submit" id="new-pet-submit-button">Create new pet</button>
<button type="reset">Reset</button>
</div>
<!-- divider -->
<div class="card">
<div class="item1"><img src="images/desert.jpg" class ="desertIm"></div>
<div class="item2"><img src="images/person-avatar.jpg" class="avatar"></div>
<div class="item3"><body><p class="secondarytxt">Secondary text</p></body></div>
<div class="item4"><h4><b class="title">Title goes here</b></h4></div>
<div class="item5"><body><p class="bodytxt">Greyhound divisively hello coldly
wonderfully marginally far upon excluding.</p></body></div>
</div>
</div>
</body>
</html>
CSS Grid Layout to fill the parent container with a position fixed div
In the following snippet I have a position: fixed div which is not part of the grid layout and I have a row-1 and main grid rows.
I would like the main to expand to the available space which I thought grid-template-rows: 6rem 1fr would do but it is not.
I'd also like there to be less of gap between the rows but grid-row-gap is not working in this example.
html {
scroll-behavior: smooth;
height: 100%;
}
body {
text-rendering: optimizeSpeed;
height: 100%;
}
#root {
height: 100%;
}
.container {
border: 10px solid green;
background: #f1f1f1;
display: grid;
align-items: center;
grid-template-areas:
"row-1"
"main";
grid-template-rows: 6rem 1fr;
grid-row-gap: 0;
}
.fixed {
position: fixed;
width: 100%;
left: 0;
right: 0;
top: 0;
z-index: 10;
background: yellow;
height: 3rem;
}
.row-1 {
border: 10px solid blue;
grid-area: row-1;
}
.main {
border: 10px solid orange;
grid-area: main;
}
<!DOCTYPE html>
<html>
<head>
<title>Hello</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<main id="root">
<div class="fixed">Fixed</div>
<div class="container">
<div class="row-1">Row 1</div>
<div class="main">main</div>
</div>
</main>
</body>
</html>
You could do it as below, and if you want .row-1 not covered by the fixed element, you could add for example padding-top:3rem to .container or to .row-1 itself.
body {
text-rendering: optimizeSpeed;
margin:0;
}
.fixed {
position: fixed;
width: 100%;
left: 0;
right: 0;
top: 0;
z-index: 10;
background: yellow;
height: 3rem;
}
.container {
min-height: 100vh;
border: 10px solid green;
display: grid;
grid-template-rows: 6rem 1fr;
}
.row-1 {
border: 10px solid blue;
}
.main {
border: 10px solid orange;
}
<main id="root">
<div class="fixed">Fixed</div>
<div class="container">
<div class="row-1">Row 1</div>
<div class="main">main</div>
</div>
</main>
Having trouble expanding grid template row vertically with CSS grid
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;
random padding around entire page? [duplicate]
This question already has answers here:
How wide is the default `<body>` margin?
(4 answers)
Closed 3 years ago.
I built a homepage for my portfolio and there seems to be a blank invisible square acting as a border. I've tried making many adjustments to css but nothing I do seems to be controlling this. I was under the impression is would be something to do with padding or margin but nothing seems to change it. Has anyone ever experienced this? I'm sure its a super simple fix.
Any idea how to remove and make full screen? Thank you for your help.
#import url('https://fonts.googleapis.com/css?family=Nunito:300,400,700');
body {
font-family: "Nunito", sans-serif;
background: #eff1f7;
}
.content {
grid-area: content;
background: url(images/shapes.png);
}
.sidebar {
grid-area: sidebar;
background: linear-gradient(to right, rgba(249,107,142,1),
rgba(218,103,230,1),
rgba(130,125,253,1));
justify-content: center;
}
.footer {
grid-area: footer;
background: white;
}
.container {
font-size: 1.5em;
width: 100%;
height: 100vh;
display: grid;
grid-template-areas:
"sidebar"
"content"
"footer";
grid-template-columns: 1fr;
grid-template-rows: 130px 800px 250px;
}
.content,
.sidebar,
.footer {
padding: 1em;
}
nav ul {
margin: 0;
padding: 0;
display: flex;
justify-content: space-between;
text-align: center;
}
nav li {
list-style: none;
padding: 1em 0;
}
nav li a {
color: white;
font-weight: 700;
opacity: 0.6;
text-decoration: none;
transition: 0.3s;
}
nav li a:hover {
opacity: 1;
}
.hero {
max-width: 960px;
margin: 0 auto;
text-align: center;
}
.hero img {
width: 200px;
margin-right: 50px;
}
.hero h1 {
font-size: 2em;
font-weight: 300;
color: #373d46;
}
.hero p {
font-weight: 300;
line-height: 1.8em;
color: #98a0ad;
}
.action-btn {
display: inline-block;
text-decoration: none;
color: white;
font-weight: 700;
background: #867bfb;
padding: 1em 2em;
border-radius: 40px;
margin: 1em 0;
transition: 0.3s;
}
.action-btn:hover {
box-shadow: 0 10px 50px rgba(188,197,216,1);
}
footer ul {
max-width: 640px;
margin: 2em auto;
padding: 0;
text-align: center;
display: flex;
flex-direction: row;
}
footer ul li {
list-style: none;
align-self: flex-end;
}
footer ul li a {
text-decoration: none;
color: #c1c6ce;
}
svg {
width: 40%;
}
footer p {
font-size: 0.8em;
}
#media (min-width: 1040px) {
.container {
grid-template-areas:
"sidebar content"
"sidebar footer";
grid-template-columns: 300px 1fr;
grid-template-rows: 1fr auto;
}
nav ul {
display: flex;
justify-content: space-between;
flex-direction: column;
}
.sidebar {
background: linear-gradient(rgba(249,107,142,1),
rgba(218,103,230,1),
rgba(130,125,254,1));
padding-top: 3em;
}
.hero {
text-align: left;
margin: 2em auto;
}
.hero img {
width: 250px;
float: right;
}
.hero h1 {
font-size: 3em;
}
.hero p {
width: 60%;
}
footer ul {
max-width: 960px;
margin: 0 auto;
padding: 2em 0;
}
svg {
width: 20%;
}
}
<!DOCTYPE html>
<html>
<head>
<title>Matt Mullins Designs</title>
<link rel="stylesheet" href="styles.css" type="text/css">
<link rel="stylesheet" href="normalize.css" type="text/css">
</head>
<body>
<div class="container">
<div class="sidebar">
<nav>
<ul>
<li>About</li>
<li>Portfolio</li>
<li>Blog</li>
<li>Contact</li>
</ul>
</nav>
</div>
<div class="content">
<section class="hero">
<img src="images/mm1.png"/>
<div class="hero-content">
<h1>Passionate<br>UX Designer</h1>
<p>Carlsbad, CA based designer who's worked with prominent startups as well as established businesses. I find the ability to prototype creative concepts plus code the initial template to be a huge advantage.</p>
<a class="action-btn" href="#">Hire me</a>
</div>
</section>
</div>
<div class="footer">
<footer>
<ul>
<li><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 43.068 43.068"><defs><style>.a{fill:#b3b4b8;}</style></defs><path class="a" d="M0,21.534a21.1,21.1,0,0,1,2.886-10.81,21.381,21.381,0,0,1,7.838-7.838A21.094,21.094,0,0,1,21.534,0a21.094,21.094,0,0,1,10.81,2.886,21.38,21.38,0,0,1,7.838,7.838,21.094,21.094,0,0,1,2.886,10.81,21.094,21.094,0,0,1-2.886,10.81,21.38,21.38,0,0,1-7.838,7.838,21.094,21.094,0,0,1-10.81,2.886,21.094,21.094,0,0,1-10.81-2.886,21.381,21.381,0,0,1-7.838-7.838A21.1,21.1,0,0,1,0,21.534Zm3.575,0A17.365,17.365,0,0,0,8.1,33.377a24.646,24.646,0,0,1,6.546-7.709,21.41,21.41,0,0,1,8.743-4.608q-.646-1.507-1.249-2.713A52.328,52.328,0,0,1,6.116,20.715q-1.68,0-2.5-.043,0,.172-.022.431T3.575,21.534Zm.56-4.436q.948.086,2.8.086a47.266,47.266,0,0,0,13.652-1.938,43.609,43.609,0,0,0-7.192-9.69,17.484,17.484,0,0,0-5.836,4.78A18.387,18.387,0,0,0,4.134,17.1ZM10.552,35.7a17.6,17.6,0,0,0,17.313,2.584,63.239,63.239,0,0,0-3.359-14.255,18.368,18.368,0,0,0-7.989,4.35A24.43,24.43,0,0,0,10.552,35.7ZM17.141,4.178a45.767,45.767,0,0,1,7.02,9.776A21.449,21.449,0,0,0,32.99,7.709,17.458,17.458,0,0,0,21.534,3.575,16.531,16.531,0,0,0,17.141,4.178Zm8.57,12.834q.646,1.378,1.464,3.488,3.187-.3,6.934-.3,2.67,0,5.3.129A17.291,17.291,0,0,0,35.186,9.906Q32.387,14.083,25.711,17.012Zm2.541,6.5a61.816,61.816,0,0,1,2.972,13.093,17.969,17.969,0,0,0,5.556-5.642,17.4,17.4,0,0,0,2.584-7.451Q36.22,23.3,33.636,23.3,31.267,23.3,28.252,23.515Z" transform="translate(0)"/></svg></li>
<li><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 63.104 39.265"><defs><style>.a{fill:#b3b4b8;}</style></defs><g transform="translate(0)"><path class="a" d="M56.988,86.8H41.176V82.876H56.989V86.8ZM30.65,102.909a10.383,10.383,0,0,1,1.53,5.752,11.455,11.455,0,0,1-1.744,6.265,10.864,10.864,0,0,1-2.778,3.084,10.733,10.733,0,0,1-4.431,1.971,27.4,27.4,0,0,1-5.544.531H0V81.247H18.963c4.78.078,8.168,1.463,10.169,4.182a9.991,9.991,0,0,1,1.8,6,8.74,8.74,0,0,1-1.815,5.781,9.257,9.257,0,0,1-2.99,2.234A8.718,8.718,0,0,1,30.65,102.909ZM9.055,96.727h8.309a7.873,7.873,0,0,0,4.151-.973A3.711,3.711,0,0,0,23.107,92.3,3.514,3.514,0,0,0,21,88.679a14.832,14.832,0,0,0-4.635-.614H9.055ZM23.907,108.1a4.211,4.211,0,0,0-2.5-4.206,9.839,9.839,0,0,0-3.926-.665H9.055v10.464h8.3A9.219,9.219,0,0,0,21.329,113C23.046,112.147,23.907,110.518,23.907,108.1Zm38.947-6.388A36.934,36.934,0,0,1,63.1,107.3H42.619q.169,4.24,2.939,5.934a7.4,7.4,0,0,0,4.054,1.056,5.711,5.711,0,0,0,5.591-3.22h7.506a9.142,9.142,0,0,1-2.724,5.083q-3.774,4.1-10.578,4.106a15.351,15.351,0,0,1-9.908-3.461q-4.282-3.469-4.288-11.267,0-7.319,3.87-11.213a13.564,13.564,0,0,1,10.062-3.9,16.036,16.036,0,0,1,6.614,1.315,11.39,11.39,0,0,1,4.855,4.165A13.882,13.882,0,0,1,62.854,101.712Zm-7.388.733A6.142,6.142,0,0,0,53.5,98a6.41,6.41,0,0,0-4.358-1.523,5.831,5.831,0,0,0-4.388,1.613,7.58,7.58,0,0,0-1.96,4.354H55.466Z" transform="translate(0 -81.247)"/></g></svg></li>
<li><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 25.414 48.937"><defs><style>.a{fill:#b3b4b8;}</style></defs><path class="a" d="M104.924,61.766V39.443h7.493l1.122-8.7h-8.615V25.189c0-2.519.7-4.235,4.312-4.235l4.607,0V13.171a61.74,61.74,0,0,0-6.713-.342c-6.642,0-11.189,4.054-11.189,11.5v6.416H88.428v8.7H95.94V61.766Z" transform="translate(-88.428 -12.829)"/></svg></li>
<li><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 49.332 40.173"><defs><style>.a{fill:#b3b4b8;stroke:#5da8dc;}.a,.b{stroke-width:0.5px;}.b{fill:#fff;stroke:#fff;}</style></defs><g transform="translate(0.25 0.25)"><path class="a" d="M32.628.009V0h2.29l.837.167a8.949,8.949,0,0,1,1.519.427,10.805,10.805,0,0,1,1.321.616,12.562,12.562,0,0,1,1.158.718,7.127,7.127,0,0,1,.925.766,1.282,1.282,0,0,0,1.264.211,16.9,16.9,0,0,0,1.849-.55Q44.781,2,45.75,1.563T46.93,1l.22-.132.009-.013L47.2.837l.044-.022.044-.022.044-.022.009-.013.013-.009L47.37.74l.009-.013.044-.013L47.467.7l-.009.066-.013.066L47.423.9,47.4.969l-.022.044-.022.044-.022.066a1.532,1.532,0,0,0-.044.176,7.388,7.388,0,0,1-.418.881,11.014,11.014,0,0,1-.991,1.563,7.686,7.686,0,0,1-1.066,1.2q-.476.41-.63.572a1.89,1.89,0,0,1-.374.308l-.22.145-.044.022L43.5,6.01l-.009.013-.013.009-.013.009-.009.013-.044.022-.044.022-.009.013-.013.009-.013.009-.009.013-.009.013-.013.009-.013.009-.009.013h.22l1.233-.264a22.063,22.063,0,0,0,2.356-.638l1.189-.4.132-.044.066-.022.044-.022.044-.022.044-.022.044-.022.088-.013.088-.009V4.8l-.022.009-.022.013-.009.013-.013.009-.013.009-.009.013-.009.013-.013.009-.013.009L48.7,4.91l-.009.013-.013.009-.022.044-.022.044-.013.009-.559.749a6.188,6.188,0,0,1-.594.749q-.044.013-.123.132a12.618,12.618,0,0,1-.933.982,22.163,22.163,0,0,1-1.682,1.528,2.085,2.085,0,0,0-.837,1.656q-.013.978-.1,2.21T43.46,15.7a31.76,31.76,0,0,1-.749,3.236,29.426,29.426,0,0,1-1.233,3.523,27.445,27.445,0,0,1-1.519,3.082q-.793,1.365-1.453,2.312t-1.343,1.783q-.682.837-1.726,1.885t-1.145,1.145q-.1.1-.863.722T31.8,34.645a18.845,18.845,0,0,1-1.594,1.044q-.727.418-1.753.956a20.849,20.849,0,0,1-2.21,1q-1.189.462-2.51.859a22.927,22.927,0,0,1-2.554.616q-1.233.22-2.8.374l-1.563.154v.022H13.958v-.022l-.374-.022q-.374-.022-.616-.044t-1.827-.242q-1.585-.22-2.488-.44t-2.686-.837A26.134,26.134,0,0,1,2.915,36.82q-1.264-.625-1.585-.793t-.713-.405l-.4-.242-.009-.013L.2,35.358l-.013-.009-.009-.013-.044-.022-.044-.022-.009-.013L.066,35.27l-.013-.009-.009-.013-.009-.013-.013-.009H0v-.088l.044.009.044.013.2.022q.2.022,1.079.066t1.871,0a19.689,19.689,0,0,0,2.026-.2,22.821,22.821,0,0,0,2.444-.528,18.056,18.056,0,0,0,2.589-.889q1.176-.52,1.673-.775a16.292,16.292,0,0,0,1.506-.933l1.013-.683.009-.013.013-.009.013-.009.009-.013.009-.013.013-.009.013-.009.009-.013.044-.013.044-.009.009-.044.013-.044.013-.009.009-.013L14.355,31l-.683-.044a6.619,6.619,0,0,1-1.035-.2,9.931,9.931,0,0,1-1.519-.528,11.71,11.71,0,0,1-1.585-.837,7.8,7.8,0,0,1-1.114-.806q-.339-.317-.881-.9a8.909,8.909,0,0,1-.933-1.2,10.8,10.8,0,0,1-.757-1.422l-.366-.8L5.46,24.2l-.022-.066-.013-.044-.009-.044.066.009.066.013.484.066a10.762,10.762,0,0,0,1.519.044,11.762,11.762,0,0,0,1.431-.088q.4-.066.484-.088l.088-.022.11-.022.11-.022.009-.013L9.8,23.91l.013-.009.009-.013-.088-.022-.088-.022-.088-.022L9.467,23.8l-.088-.022q-.088-.022-.308-.088t-1.189-.484a9.092,9.092,0,0,1-1.541-.815,10.644,10.644,0,0,1-1.092-.867A12.461,12.461,0,0,1,4.117,20.3a8.808,8.808,0,0,1-1.1-1.739,10.578,10.578,0,0,1-.727-1.893,10.222,10.222,0,0,1-.317-1.827l-.079-.925.044.009.044.013.044.022.044.022L2.114,14l.044.022.683.308a8.611,8.611,0,0,0,1.7.528q1.013.22,1.211.242l.2.022h.4l-.009-.013L6.319,15.1l-.013-.009L6.3,15.081l-.009-.013-.013-.009-.013-.009-.009-.013-.044-.022-.044-.022-.009-.013-.013-.009-.013-.009-.009-.013-.044-.022-.044-.022-.009-.013-.379-.282a5.775,5.775,0,0,1-.757-.718q-.4-.44-.793-.925a7.14,7.14,0,0,1-.7-1.035,12.544,12.544,0,0,1-.652-1.4,9.94,9.94,0,0,1-.515-1.7,9.7,9.7,0,0,1-.2-1.7A10.675,10.675,0,0,1,2.07,5.7a9.353,9.353,0,0,1,.264-1.343,10.465,10.465,0,0,1,.572-1.585l.374-.837L3.3,1.871l.022-.066L3.338,1.8l.009-.013.009-.013.013-.009.013.009.009.013L3.4,1.8l.013.009.013.009.009.013.009.013.013.009.022.044.022.044.013.009.009.013.594.66q.594.66,1.409,1.475a8.28,8.28,0,0,0,.9.845.645.645,0,0,1,.22.2,8.989,8.989,0,0,0,.881.779q.749.616,1.959,1.431t2.686,1.607a26.208,26.208,0,0,0,3.17,1.431q1.7.638,2.378.837t2.334.506q1.651.308,2.488.4t1.145.1l.308.009-.009-.066-.013-.066-.088-.55a10.347,10.347,0,0,1-.088-1.541,10.105,10.105,0,0,1,.154-1.827,10.825,10.825,0,0,1,.462-1.7,9.056,9.056,0,0,1,.6-1.378A13.558,13.558,0,0,1,25.8,3.941a9.495,9.495,0,0,1,1.255-1.365,9.26,9.26,0,0,1,1.761-1.255A11.45,11.45,0,0,1,30.647.484,8.515,8.515,0,0,1,32.056.11a4.9,4.9,0,0,0,.572-.1Z"/><path class="b" d="M0,17.569V0H32.628V.009a4.909,4.909,0,0,1-.572.1,8.515,8.515,0,0,0-1.409.374,11.45,11.45,0,0,0-1.827.837,9.26,9.26,0,0,0-1.761,1.255A9.495,9.495,0,0,0,25.8,3.941a13.558,13.558,0,0,0-.784,1.176,9.056,9.056,0,0,0-.6,1.378,10.825,10.825,0,0,0-.462,1.7,10.105,10.105,0,0,0-.154,1.827,10.347,10.347,0,0,0,.088,1.541l.088.55.013.066.009.066-.308-.009q-.308-.013-1.145-.1t-2.488-.4q-1.651-.308-2.334-.506t-2.378-.837a26.208,26.208,0,0,1-3.17-1.431Q10.7,8.168,9.489,7.353T7.53,5.922a8.989,8.989,0,0,1-.881-.779.646.646,0,0,0-.22-.2,8.28,8.28,0,0,1-.9-.845Q4.712,3.28,4.117,2.62l-.594-.66-.009-.013L3.5,1.937l-.022-.044-.022-.044-.013-.009-.009-.013-.009-.013-.013-.009L3.4,1.8l-.009-.013L3.382,1.77l-.013-.009-.013.009-.009.013L3.338,1.8l-.013.009L3.3,1.871l-.022.066-.374.837a10.465,10.465,0,0,0-.572,1.585A9.353,9.353,0,0,0,2.07,5.7a10.675,10.675,0,0,0-.044,1.431,9.7,9.7,0,0,0,.2,1.7,9.94,9.94,0,0,0,.515,1.7,12.548,12.548,0,0,0,.652,1.4,7.14,7.14,0,0,0,.7,1.035q.4.484.793.925a5.775,5.775,0,0,0,.757.718l.379.282.009.013.044.022.044.022.009.013.013.009.013.009.009.013.044.022.044.022.009.013.013.009.013.009.009.013.009.013.013.009.013.009.009.013h-.4l-.2-.022q-.2-.022-1.211-.242a8.611,8.611,0,0,1-1.7-.528l-.683-.308L2.114,14,2.07,13.98l-.044-.022-.044-.022-.044-.013-.044-.009.079.925a10.222,10.222,0,0,0,.317,1.827,10.578,10.578,0,0,0,.727,1.893,8.808,8.808,0,0,0,1.1,1.739,12.461,12.461,0,0,0,1.132,1.224,10.643,10.643,0,0,0,1.092.867,9.092,9.092,0,0,0,1.541.815q.969.418,1.189.484t.308.088l.088.022.088.022.088.022.088.022.088.022-.009.013L9.8,23.91l-.013.009-.009.013-.11.022-.11.022L9.467,24q-.088.022-.484.088a11.762,11.762,0,0,1-1.431.088,10.762,10.762,0,0,1-1.519-.044l-.484-.066-.066-.013-.066-.009.009.044.013.044.022.066.022.066.366.8A10.8,10.8,0,0,0,6.6,26.486a8.909,8.909,0,0,0,.933,1.2q.542.581.881.9a7.8,7.8,0,0,0,1.114.806,11.71,11.71,0,0,0,1.585.837,9.931,9.931,0,0,0,1.519.528,6.619,6.619,0,0,0,1.035.2l.683.044.352.022-.009.013-.013.009-.013.044-.009.044-.044.009-.044.013-.009.013-.013.009-.013.009-.009.013-.009.013-.013.009-.013.009-.009.013-1.013.683a16.292,16.292,0,0,1-1.506.933q-.5.255-1.673.775a18.056,18.056,0,0,1-2.589.889,22.821,22.821,0,0,1-2.444.528,19.689,19.689,0,0,1-2.026.2q-.991.044-1.871,0T.286,35.182l-.2-.022-.044-.013L0,35.138ZM48.779,4.835l.009-.013.022-.013.022-.009V39.673H16.82v-.022l1.563-.154q1.563-.154,2.8-.374a22.927,22.927,0,0,0,2.554-.616q1.321-.4,2.51-.859a20.849,20.849,0,0,0,2.21-1q1.026-.537,1.753-.956A18.845,18.845,0,0,0,31.8,34.645q.872-.63,1.629-1.259t.863-.722q.1-.1,1.145-1.145t1.726-1.885q.683-.837,1.343-1.783t1.453-2.312a27.445,27.445,0,0,0,1.519-3.082,29.426,29.426,0,0,0,1.233-3.523A31.76,31.76,0,0,0,43.46,15.7q.242-1.431.33-2.664t.1-2.21a2.085,2.085,0,0,1,.837-1.656A22.162,22.162,0,0,0,46.41,7.64a12.616,12.616,0,0,0,.933-.982q.079-.119.123-.132a6.188,6.188,0,0,0,.594-.749l.559-.749.013-.009.022-.044.022-.044.013-.009L48.7,4.91l.009-.013.013-.009.013-.009.009-.013.009-.013.013-.009.013-.009ZM35.755.167,34.918,0H48.832V4.712l-.088.009-.088.013-.044.022-.044.022-.044.022-.044.022-.066.022-.132.044-1.189.4a22.063,22.063,0,0,1-2.356.638L43.5,6.187h-.22l.009-.013.013-.009.013-.009.009-.013.009-.013.013-.009.013-.009.009-.013.044-.022.044-.022.009-.013.013-.009.013-.009L43.5,6.01l.044-.022.044-.022.22-.145a1.89,1.89,0,0,0,.374-.308q.154-.163.63-.572a7.694,7.694,0,0,0,1.066-1.2,11.014,11.014,0,0,0,.991-1.563,7.388,7.388,0,0,0,.418-.881,1.532,1.532,0,0,1,.044-.176l.022-.066.022-.044L47.4.969,47.423.9l.022-.066.013-.066L47.467.7l-.044.009-.044.013L47.37.74l-.013.009-.013.009-.009.013-.044.022-.044.022L47.2.837l-.044.022L47.15.872,46.93,1q-.211.119-1.18.559t-1.959.793a16.9,16.9,0,0,1-1.849.55,1.282,1.282,0,0,1-1.264-.211,7.12,7.12,0,0,0-.925-.766,12.571,12.571,0,0,0-1.158-.718A10.805,10.805,0,0,0,37.274.594,8.949,8.949,0,0,0,35.755.167ZM0,37.45V35.226H.022l.013.009.009.013.009.013.013.009.013.009.009.013.044.022.044.022.009.013.013.009.013.009.009.013.4.242q.4.242.713.405t1.585.793a26.134,26.134,0,0,0,3.051,1.246q1.783.616,2.686.837t2.488.44q1.585.22,1.827.242t.616.044l.374.022v.022H0Z"/></g></svg></li>
</ul>
</footer>
</div>
</div>
</body>
</html>
Add a margin: 0 to your body:
#import url('https://fonts.googleapis.com/css?family=Nunito:300,400,700');
body {
font-family: "Nunito", sans-serif;
background: #eff1f7;
margin: 0;
}
.content {
grid-area: content;
background: url(images/shapes.png);
}
.sidebar {
grid-area: sidebar;
background: linear-gradient(to right, rgba(249,107,142,1),
rgba(218,103,230,1),
rgba(130,125,253,1));
justify-content: center;
}
.footer {
grid-area: footer;
background: white;
}
.container {
font-size: 1.5em;
width: 100%;
height: 100vh;
display: grid;
grid-template-areas:
"sidebar"
"content"
"footer";
grid-template-columns: 1fr;
grid-template-rows: 130px 800px 250px;
}
.content,
.sidebar,
.footer {
padding: 1em;
}
nav ul {
margin: 0;
padding: 0;
display: flex;
justify-content: space-between;
text-align: center;
}
nav li {
list-style: none;
padding: 1em 0;
}
nav li a {
color: white;
font-weight: 700;
opacity: 0.6;
text-decoration: none;
transition: 0.3s;
}
nav li a:hover {
opacity: 1;
}
.hero {
max-width: 960px;
margin: 0 auto;
text-align: center;
}
.hero img {
width: 200px;
margin-right: 50px;
}
.hero h1 {
font-size: 2em;
font-weight: 300;
color: #373d46;
}
.hero p {
font-weight: 300;
line-height: 1.8em;
color: #98a0ad;
}
.action-btn {
display: inline-block;
text-decoration: none;
color: white;
font-weight: 700;
background: #867bfb;
padding: 1em 2em;
border-radius: 40px;
margin: 1em 0;
transition: 0.3s;
}
.action-btn:hover {
box-shadow: 0 10px 50px rgba(188,197,216,1);
}
footer ul {
max-width: 640px;
margin: 2em auto;
padding: 0;
text-align: center;
display: flex;
flex-direction: row;
}
footer ul li {
list-style: none;
align-self: flex-end;
}
footer ul li a {
text-decoration: none;
color: #c1c6ce;
}
svg {
width: 40%;
}
footer p {
font-size: 0.8em;
}
#media (min-width: 1040px) {
.container {
grid-template-areas:
"sidebar content"
"sidebar footer";
grid-template-columns: 300px 1fr;
grid-template-rows: 1fr auto;
}
nav ul {
display: flex;
justify-content: space-between;
flex-direction: column;
}
.sidebar {
background: linear-gradient(rgba(249,107,142,1),
rgba(218,103,230,1),
rgba(130,125,254,1));
padding-top: 3em;
}
.hero {
text-align: left;
margin: 2em auto;
}
.hero img {
width: 250px;
float: right;
}
.hero h1 {
font-size: 3em;
}
.hero p {
width: 60%;
}
footer ul {
max-width: 960px;
margin: 0 auto;
padding: 2em 0;
}
svg {
width: 20%;
}
}
<!DOCTYPE html>
<html>
<head>
<title>Matt Mullins Designs</title>
<link rel="stylesheet" href="styles.css" type="text/css">
<link rel="stylesheet" href="normalize.css" type="text/css">
</head>
<body>
<div class="container">
<div class="sidebar">
<nav>
<ul>
<li>About</li>
<li>Portfolio</li>
<li>Blog</li>
<li>Contact</li>
</ul>
</nav>
</div>
<div class="content">
<section class="hero">
<img src="images/mm1.png"/>
<div class="hero-content">
<h1>Passionate<br>UX Designer</h1>
<p>Carlsbad, CA based designer who's worked with prominent startups as well as established businesses. I find the ability to prototype creative concepts plus code the initial template to be a huge advantage.</p>
<a class="action-btn" href="#">Hire me</a>
</div>
</section>
</div>
<div class="footer">
<footer>
<ul>
<li><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 43.068 43.068"><defs><style>.a{fill:#b3b4b8;}</style></defs><path class="a" d="M0,21.534a21.1,21.1,0,0,1,2.886-10.81,21.381,21.381,0,0,1,7.838-7.838A21.094,21.094,0,0,1,21.534,0a21.094,21.094,0,0,1,10.81,2.886,21.38,21.38,0,0,1,7.838,7.838,21.094,21.094,0,0,1,2.886,10.81,21.094,21.094,0,0,1-2.886,10.81,21.38,21.38,0,0,1-7.838,7.838,21.094,21.094,0,0,1-10.81,2.886,21.094,21.094,0,0,1-10.81-2.886,21.381,21.381,0,0,1-7.838-7.838A21.1,21.1,0,0,1,0,21.534Zm3.575,0A17.365,17.365,0,0,0,8.1,33.377a24.646,24.646,0,0,1,6.546-7.709,21.41,21.41,0,0,1,8.743-4.608q-.646-1.507-1.249-2.713A52.328,52.328,0,0,1,6.116,20.715q-1.68,0-2.5-.043,0,.172-.022.431T3.575,21.534Zm.56-4.436q.948.086,2.8.086a47.266,47.266,0,0,0,13.652-1.938,43.609,43.609,0,0,0-7.192-9.69,17.484,17.484,0,0,0-5.836,4.78A18.387,18.387,0,0,0,4.134,17.1ZM10.552,35.7a17.6,17.6,0,0,0,17.313,2.584,63.239,63.239,0,0,0-3.359-14.255,18.368,18.368,0,0,0-7.989,4.35A24.43,24.43,0,0,0,10.552,35.7ZM17.141,4.178a45.767,45.767,0,0,1,7.02,9.776A21.449,21.449,0,0,0,32.99,7.709,17.458,17.458,0,0,0,21.534,3.575,16.531,16.531,0,0,0,17.141,4.178Zm8.57,12.834q.646,1.378,1.464,3.488,3.187-.3,6.934-.3,2.67,0,5.3.129A17.291,17.291,0,0,0,35.186,9.906Q32.387,14.083,25.711,17.012Zm2.541,6.5a61.816,61.816,0,0,1,2.972,13.093,17.969,17.969,0,0,0,5.556-5.642,17.4,17.4,0,0,0,2.584-7.451Q36.22,23.3,33.636,23.3,31.267,23.3,28.252,23.515Z" transform="translate(0)"/></svg></li>
<li><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 63.104 39.265"><defs><style>.a{fill:#b3b4b8;}</style></defs><g transform="translate(0)"><path class="a" d="M56.988,86.8H41.176V82.876H56.989V86.8ZM30.65,102.909a10.383,10.383,0,0,1,1.53,5.752,11.455,11.455,0,0,1-1.744,6.265,10.864,10.864,0,0,1-2.778,3.084,10.733,10.733,0,0,1-4.431,1.971,27.4,27.4,0,0,1-5.544.531H0V81.247H18.963c4.78.078,8.168,1.463,10.169,4.182a9.991,9.991,0,0,1,1.8,6,8.74,8.74,0,0,1-1.815,5.781,9.257,9.257,0,0,1-2.99,2.234A8.718,8.718,0,0,1,30.65,102.909ZM9.055,96.727h8.309a7.873,7.873,0,0,0,4.151-.973A3.711,3.711,0,0,0,23.107,92.3,3.514,3.514,0,0,0,21,88.679a14.832,14.832,0,0,0-4.635-.614H9.055ZM23.907,108.1a4.211,4.211,0,0,0-2.5-4.206,9.839,9.839,0,0,0-3.926-.665H9.055v10.464h8.3A9.219,9.219,0,0,0,21.329,113C23.046,112.147,23.907,110.518,23.907,108.1Zm38.947-6.388A36.934,36.934,0,0,1,63.1,107.3H42.619q.169,4.24,2.939,5.934a7.4,7.4,0,0,0,4.054,1.056,5.711,5.711,0,0,0,5.591-3.22h7.506a9.142,9.142,0,0,1-2.724,5.083q-3.774,4.1-10.578,4.106a15.351,15.351,0,0,1-9.908-3.461q-4.282-3.469-4.288-11.267,0-7.319,3.87-11.213a13.564,13.564,0,0,1,10.062-3.9,16.036,16.036,0,0,1,6.614,1.315,11.39,11.39,0,0,1,4.855,4.165A13.882,13.882,0,0,1,62.854,101.712Zm-7.388.733A6.142,6.142,0,0,0,53.5,98a6.41,6.41,0,0,0-4.358-1.523,5.831,5.831,0,0,0-4.388,1.613,7.58,7.58,0,0,0-1.96,4.354H55.466Z" transform="translate(0 -81.247)"/></g></svg></li>
<li><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 25.414 48.937"><defs><style>.a{fill:#b3b4b8;}</style></defs><path class="a" d="M104.924,61.766V39.443h7.493l1.122-8.7h-8.615V25.189c0-2.519.7-4.235,4.312-4.235l4.607,0V13.171a61.74,61.74,0,0,0-6.713-.342c-6.642,0-11.189,4.054-11.189,11.5v6.416H88.428v8.7H95.94V61.766Z" transform="translate(-88.428 -12.829)"/></svg></li>
<li><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 49.332 40.173"><defs><style>.a{fill:#b3b4b8;stroke:#5da8dc;}.a,.b{stroke-width:0.5px;}.b{fill:#fff;stroke:#fff;}</style></defs><g transform="translate(0.25 0.25)"><path class="a" d="M32.628.009V0h2.29l.837.167a8.949,8.949,0,0,1,1.519.427,10.805,10.805,0,0,1,1.321.616,12.562,12.562,0,0,1,1.158.718,7.127,7.127,0,0,1,.925.766,1.282,1.282,0,0,0,1.264.211,16.9,16.9,0,0,0,1.849-.55Q44.781,2,45.75,1.563T46.93,1l.22-.132.009-.013L47.2.837l.044-.022.044-.022.044-.022.009-.013.013-.009L47.37.74l.009-.013.044-.013L47.467.7l-.009.066-.013.066L47.423.9,47.4.969l-.022.044-.022.044-.022.066a1.532,1.532,0,0,0-.044.176,7.388,7.388,0,0,1-.418.881,11.014,11.014,0,0,1-.991,1.563,7.686,7.686,0,0,1-1.066,1.2q-.476.41-.63.572a1.89,1.89,0,0,1-.374.308l-.22.145-.044.022L43.5,6.01l-.009.013-.013.009-.013.009-.009.013-.044.022-.044.022-.009.013-.013.009-.013.009-.009.013-.009.013-.013.009-.013.009-.009.013h.22l1.233-.264a22.063,22.063,0,0,0,2.356-.638l1.189-.4.132-.044.066-.022.044-.022.044-.022.044-.022.044-.022.088-.013.088-.009V4.8l-.022.009-.022.013-.009.013-.013.009-.013.009-.009.013-.009.013-.013.009-.013.009L48.7,4.91l-.009.013-.013.009-.022.044-.022.044-.013.009-.559.749a6.188,6.188,0,0,1-.594.749q-.044.013-.123.132a12.618,12.618,0,0,1-.933.982,22.163,22.163,0,0,1-1.682,1.528,2.085,2.085,0,0,0-.837,1.656q-.013.978-.1,2.21T43.46,15.7a31.76,31.76,0,0,1-.749,3.236,29.426,29.426,0,0,1-1.233,3.523,27.445,27.445,0,0,1-1.519,3.082q-.793,1.365-1.453,2.312t-1.343,1.783q-.682.837-1.726,1.885t-1.145,1.145q-.1.1-.863.722T31.8,34.645a18.845,18.845,0,0,1-1.594,1.044q-.727.418-1.753.956a20.849,20.849,0,0,1-2.21,1q-1.189.462-2.51.859a22.927,22.927,0,0,1-2.554.616q-1.233.22-2.8.374l-1.563.154v.022H13.958v-.022l-.374-.022q-.374-.022-.616-.044t-1.827-.242q-1.585-.22-2.488-.44t-2.686-.837A26.134,26.134,0,0,1,2.915,36.82q-1.264-.625-1.585-.793t-.713-.405l-.4-.242-.009-.013L.2,35.358l-.013-.009-.009-.013-.044-.022-.044-.022-.009-.013L.066,35.27l-.013-.009-.009-.013-.009-.013-.013-.009H0v-.088l.044.009.044.013.2.022q.2.022,1.079.066t1.871,0a19.689,19.689,0,0,0,2.026-.2,22.821,22.821,0,0,0,2.444-.528,18.056,18.056,0,0,0,2.589-.889q1.176-.52,1.673-.775a16.292,16.292,0,0,0,1.506-.933l1.013-.683.009-.013.013-.009.013-.009.009-.013.009-.013.013-.009.013-.009.009-.013.044-.013.044-.009.009-.044.013-.044.013-.009.009-.013L14.355,31l-.683-.044a6.619,6.619,0,0,1-1.035-.2,9.931,9.931,0,0,1-1.519-.528,11.71,11.71,0,0,1-1.585-.837,7.8,7.8,0,0,1-1.114-.806q-.339-.317-.881-.9a8.909,8.909,0,0,1-.933-1.2,10.8,10.8,0,0,1-.757-1.422l-.366-.8L5.46,24.2l-.022-.066-.013-.044-.009-.044.066.009.066.013.484.066a10.762,10.762,0,0,0,1.519.044,11.762,11.762,0,0,0,1.431-.088q.4-.066.484-.088l.088-.022.11-.022.11-.022.009-.013L9.8,23.91l.013-.009.009-.013-.088-.022-.088-.022-.088-.022L9.467,23.8l-.088-.022q-.088-.022-.308-.088t-1.189-.484a9.092,9.092,0,0,1-1.541-.815,10.644,10.644,0,0,1-1.092-.867A12.461,12.461,0,0,1,4.117,20.3a8.808,8.808,0,0,1-1.1-1.739,10.578,10.578,0,0,1-.727-1.893,10.222,10.222,0,0,1-.317-1.827l-.079-.925.044.009.044.013.044.022.044.022L2.114,14l.044.022.683.308a8.611,8.611,0,0,0,1.7.528q1.013.22,1.211.242l.2.022h.4l-.009-.013L6.319,15.1l-.013-.009L6.3,15.081l-.009-.013-.013-.009-.013-.009-.009-.013-.044-.022-.044-.022-.009-.013-.013-.009-.013-.009-.009-.013-.044-.022-.044-.022-.009-.013-.379-.282a5.775,5.775,0,0,1-.757-.718q-.4-.44-.793-.925a7.14,7.14,0,0,1-.7-1.035,12.544,12.544,0,0,1-.652-1.4,9.94,9.94,0,0,1-.515-1.7,9.7,9.7,0,0,1-.2-1.7A10.675,10.675,0,0,1,2.07,5.7a9.353,9.353,0,0,1,.264-1.343,10.465,10.465,0,0,1,.572-1.585l.374-.837L3.3,1.871l.022-.066L3.338,1.8l.009-.013.009-.013.013-.009.013.009.009.013L3.4,1.8l.013.009.013.009.009.013.009.013.013.009.022.044.022.044.013.009.009.013.594.66q.594.66,1.409,1.475a8.28,8.28,0,0,0,.9.845.645.645,0,0,1,.22.2,8.989,8.989,0,0,0,.881.779q.749.616,1.959,1.431t2.686,1.607a26.208,26.208,0,0,0,3.17,1.431q1.7.638,2.378.837t2.334.506q1.651.308,2.488.4t1.145.1l.308.009-.009-.066-.013-.066-.088-.55a10.347,10.347,0,0,1-.088-1.541,10.105,10.105,0,0,1,.154-1.827,10.825,10.825,0,0,1,.462-1.7,9.056,9.056,0,0,1,.6-1.378A13.558,13.558,0,0,1,25.8,3.941a9.495,9.495,0,0,1,1.255-1.365,9.26,9.26,0,0,1,1.761-1.255A11.45,11.45,0,0,1,30.647.484,8.515,8.515,0,0,1,32.056.11a4.9,4.9,0,0,0,.572-.1Z"/><path class="b" d="M0,17.569V0H32.628V.009a4.909,4.909,0,0,1-.572.1,8.515,8.515,0,0,0-1.409.374,11.45,11.45,0,0,0-1.827.837,9.26,9.26,0,0,0-1.761,1.255A9.495,9.495,0,0,0,25.8,3.941a13.558,13.558,0,0,0-.784,1.176,9.056,9.056,0,0,0-.6,1.378,10.825,10.825,0,0,0-.462,1.7,10.105,10.105,0,0,0-.154,1.827,10.347,10.347,0,0,0,.088,1.541l.088.55.013.066.009.066-.308-.009q-.308-.013-1.145-.1t-2.488-.4q-1.651-.308-2.334-.506t-2.378-.837a26.208,26.208,0,0,1-3.17-1.431Q10.7,8.168,9.489,7.353T7.53,5.922a8.989,8.989,0,0,1-.881-.779.646.646,0,0,0-.22-.2,8.28,8.28,0,0,1-.9-.845Q4.712,3.28,4.117,2.62l-.594-.66-.009-.013L3.5,1.937l-.022-.044-.022-.044-.013-.009-.009-.013-.009-.013-.013-.009L3.4,1.8l-.009-.013L3.382,1.77l-.013-.009-.013.009-.009.013L3.338,1.8l-.013.009L3.3,1.871l-.022.066-.374.837a10.465,10.465,0,0,0-.572,1.585A9.353,9.353,0,0,0,2.07,5.7a10.675,10.675,0,0,0-.044,1.431,9.7,9.7,0,0,0,.2,1.7,9.94,9.94,0,0,0,.515,1.7,12.548,12.548,0,0,0,.652,1.4,7.14,7.14,0,0,0,.7,1.035q.4.484.793.925a5.775,5.775,0,0,0,.757.718l.379.282.009.013.044.022.044.022.009.013.013.009.013.009.009.013.044.022.044.022.009.013.013.009.013.009.009.013.009.013.013.009.013.009.009.013h-.4l-.2-.022q-.2-.022-1.211-.242a8.611,8.611,0,0,1-1.7-.528l-.683-.308L2.114,14,2.07,13.98l-.044-.022-.044-.022-.044-.013-.044-.009.079.925a10.222,10.222,0,0,0,.317,1.827,10.578,10.578,0,0,0,.727,1.893,8.808,8.808,0,0,0,1.1,1.739,12.461,12.461,0,0,0,1.132,1.224,10.643,10.643,0,0,0,1.092.867,9.092,9.092,0,0,0,1.541.815q.969.418,1.189.484t.308.088l.088.022.088.022.088.022.088.022.088.022-.009.013L9.8,23.91l-.013.009-.009.013-.11.022-.11.022L9.467,24q-.088.022-.484.088a11.762,11.762,0,0,1-1.431.088,10.762,10.762,0,0,1-1.519-.044l-.484-.066-.066-.013-.066-.009.009.044.013.044.022.066.022.066.366.8A10.8,10.8,0,0,0,6.6,26.486a8.909,8.909,0,0,0,.933,1.2q.542.581.881.9a7.8,7.8,0,0,0,1.114.806,11.71,11.71,0,0,0,1.585.837,9.931,9.931,0,0,0,1.519.528,6.619,6.619,0,0,0,1.035.2l.683.044.352.022-.009.013-.013.009-.013.044-.009.044-.044.009-.044.013-.009.013-.013.009-.013.009-.009.013-.009.013-.013.009-.013.009-.009.013-1.013.683a16.292,16.292,0,0,1-1.506.933q-.5.255-1.673.775a18.056,18.056,0,0,1-2.589.889,22.821,22.821,0,0,1-2.444.528,19.689,19.689,0,0,1-2.026.2q-.991.044-1.871,0T.286,35.182l-.2-.022-.044-.013L0,35.138ZM48.779,4.835l.009-.013.022-.013.022-.009V39.673H16.82v-.022l1.563-.154q1.563-.154,2.8-.374a22.927,22.927,0,0,0,2.554-.616q1.321-.4,2.51-.859a20.849,20.849,0,0,0,2.21-1q1.026-.537,1.753-.956A18.845,18.845,0,0,0,31.8,34.645q.872-.63,1.629-1.259t.863-.722q.1-.1,1.145-1.145t1.726-1.885q.683-.837,1.343-1.783t1.453-2.312a27.445,27.445,0,0,0,1.519-3.082,29.426,29.426,0,0,0,1.233-3.523A31.76,31.76,0,0,0,43.46,15.7q.242-1.431.33-2.664t.1-2.21a2.085,2.085,0,0,1,.837-1.656A22.162,22.162,0,0,0,46.41,7.64a12.616,12.616,0,0,0,.933-.982q.079-.119.123-.132a6.188,6.188,0,0,0,.594-.749l.559-.749.013-.009.022-.044.022-.044.013-.009L48.7,4.91l.009-.013.013-.009.013-.009.009-.013.009-.013.013-.009.013-.009ZM35.755.167,34.918,0H48.832V4.712l-.088.009-.088.013-.044.022-.044.022-.044.022-.044.022-.066.022-.132.044-1.189.4a22.063,22.063,0,0,1-2.356.638L43.5,6.187h-.22l.009-.013.013-.009.013-.009.009-.013.009-.013.013-.009.013-.009.009-.013.044-.022.044-.022.009-.013.013-.009.013-.009L43.5,6.01l.044-.022.044-.022.22-.145a1.89,1.89,0,0,0,.374-.308q.154-.163.63-.572a7.694,7.694,0,0,0,1.066-1.2,11.014,11.014,0,0,0,.991-1.563,7.388,7.388,0,0,0,.418-.881,1.532,1.532,0,0,1,.044-.176l.022-.066.022-.044L47.4.969,47.423.9l.022-.066.013-.066L47.467.7l-.044.009-.044.013L47.37.74l-.013.009-.013.009-.009.013-.044.022-.044.022L47.2.837l-.044.022L47.15.872,46.93,1q-.211.119-1.18.559t-1.959.793a16.9,16.9,0,0,1-1.849.55,1.282,1.282,0,0,1-1.264-.211,7.12,7.12,0,0,0-.925-.766,12.571,12.571,0,0,0-1.158-.718A10.805,10.805,0,0,0,37.274.594,8.949,8.949,0,0,0,35.755.167ZM0,37.45V35.226H.022l.013.009.009.013.009.013.013.009.013.009.009.013.044.022.044.022.009.013.013.009.013.009.009.013.4.242q.4.242.713.405t1.585.793a26.134,26.134,0,0,0,3.051,1.246q1.783.616,2.686.837t2.488.44q1.585.22,1.827.242t.616.044l.374.022v.022H0Z"/></g></svg></li>
</ul>
</footer>
</div>
</div>
</body>
</html>
remove "next to each other" placement on smaller screen sizes
I want to create a responsive navigation bar for my page. I use floating divs for the logo and navigation link bar.
If you want to test the fiddle I recommend opening this on full screen.
#navbar {
top: 0;
position: sticky;
height: 80px;
padding: 0 160px;
background: #232323;
}
.navbarItemContainer {
height: 100%;
}
#navbarLogoContainer {
display: flex;
float: left;
align-items: center;
}
#navbarLinkContainer {
display: grid;
grid-template-columns: 100px 100px 100px;
float: right;
text-align: center;
align-items: center;
}
.navbarLink {
color: #039be5;
transition: 0.2s;
}
.navbarLink:hover {
color: #25bdf7;
transition: 0.2s;
}
.navbarLink>img {
width: 32px;
height: 32px;
display: none;
}
#media only screen and (max-width: 1000px) {
#navbar {
padding: 0 60px;
}
.navbarLink>span {
display: none;
}
.navbarLink>img {
display: block;
}
.navbarLink>img {
width: 24px;
height: 24px;
}
#navbarLinkContainer {
grid-template-columns: 24px 24px 24px;
grid-gap: 0 40px;
}
}
#media only screen and (max-width: 400px) {
/* place logo above button bar */
#navbar {
background: red;
/* just a test */
}
}
<div id="navbar">
<div id="navbarLogoContainer" class="navbarItemContainer">
<a>
<img class="img" src="/resources/logo.png">
</a>
</div>
<div id="navbarLinkContainer" class="navbarItemContainer">
<a class="navbarLink">
<span>
Link 1
</span>
<img class="img" src="">
</a>
<a class="navbarLink">
<span>
Link 2
</span>
<img class="img" src="">
</a>
<a class="navbarLink">
<span>
Link 3
</span>
<img class="img" src="">
</a>
</div>
</div>
When it comes to mobile screen sizes the navigation bar with 6 icons is too big. I want to adjust the navigation bar at a screen size of 400px.
#media only screen and (max-width: 400px) {
#navbar {
background: red; // placeholder
}
}
I want to remove the floating divs and place the logo above the button bar. When it comes to a screen size smaller than 400px the logo would have to move one row up. The result would be
How can I achieve this?
EDIT:
I tried
#media only screen and (max-width: 400px) {
#navbarLogoContainer {
clear: left;
}
#navbarLinkContainer {
grid-template-columns: 33.33% 33.33% 33.33%;
clear: right;
}
}
but it did not help.
Try this:
#media only screen and (max-width: 400px) {
/* place logo above button bar */
#navbar {
background: red;
/* just a test */
}
#navbarLogoContainer {
display:block;
float:none;
text-align:center;
}
#navbarLinkContainer {
display: block;
width: 100%;
text-align: center;
}
.navbarItemContainer {
height: 30px;
padding: 5px 0;
}
.navbarLink {
display:inline-block;
}
}
I also made a snippet:
#navbar {
top: 0;
position: sticky;
height: 80px;
padding: 0 160px;
background: #232323;
}
.navbarItemContainer {
height: 100%;
}
#navbarLogoContainer {
display: flex;
float: left;
align-items: center;
}
#navbarLinkContainer {
display: grid;
grid-template-columns: 100px 100px 100px;
float: right;
text-align: center;
align-items: center;
}
.navbarLink {
color: #039be5;
transition: 0.2s;
}
.navbarLink:hover {
color: #25bdf7;
transition: 0.2s;
}
.navbarLink>img {
width: 32px;
height: 32px;
display: none;
}
#media only screen and (max-width: 1000px) {
#navbar {
padding: 0 60px;
}
.navbarLink>span {
display: none;
}
.navbarLink>img {
display: block;
}
.navbarLink>img {
width: 24px;
height: 24px;
}
#navbarLinkContainer {
grid-template-columns: 24px 24px 24px;
grid-gap: 0 40px;
}
}
#media only screen and (max-width: 400px) {
/* place logo above button bar */
#navbar {
background: red;
/* just a test */
}
#navbarLogoContainer {
display:block;
float:none;
text-align:center;
}
#navbarLinkContainer {
display: block;
width: 100%;
text-align: center;
}
.navbarItemContainer {
height: 30px;
padding: 5px 0;
}
.navbarLink {
display:inline-block;
}
}
<div id="navbar">
<div id="navbarLogoContainer" class="navbarItemContainer">
<a>
<img class="img" src="/resources/logo.png">
</a>
</div>
<div id="navbarLinkContainer" class="navbarItemContainer">
<a class="navbarLink">
<span>
Link 1
</span>
<img class="img" src="">
</a>
<a class="navbarLink">
<span>
Link 2
</span>
<img class="img" src="">
</a>
<a class="navbarLink">
<span>
Link 3
</span>
<img class="img" src="">
</a>
</div>
</div>
Let me know if this helped.
here is a simple working example that can help you with your code
.container {
height: 100vh;
}
.navbar {
display: flex;
}
.navbar .logo-container {
flex: 1;
display: flex;
}
.navbar .logo-container span {
flex: 1;
}
.navbar .links-container {
flex: 1;
display: flex;
}
.navbar .links-container div {
flex: 1;
}
#media only screen and (max-width: 400px) {
.navbar {
display: grid;
grid-template-rows: 150px auto;
grid-template-columns: repeat(6, 1fr);
}
.navbar .logo-container {
grid-column: 1/7;
display: flex;
justify-content: center;
text-align: center;
}
.navbar .links-container {
grid-column: 1/7;
display: flex;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
<body>
<div class="container">
<div class="navbar">
<div class="logo-container">
<span>image</span>
</div>
<div class="links-container">
<div>link1</div>
<div>link2</div>
<div>link3</div>
<div>link4</div>
<div>link5</div>
<div>link6</div>
</div>
</div>
</div>
</body>
</html>
For 400px I think I'll go for this one
What do you think about this solution?
#media only screen and (max-width: 400px){
#navbar {
height: 100px;
padding: 0 5px;
}
#navbarLogoContainer {
height: 50%;
display: block;
float: none;
text-align: center;
}
#navbarLinkContainer {
height: 50%;
display: grid;
float: none;
grid-template-columns: 16.66% 16.66% 16.66% 16.66% 16.66% 16.66%;
justify-items: center;
grid-gap: 0 5px;
}
}
#navbar {
top: 0;
position: sticky;
height: 80px;
padding: 0 160px;
background: #232323;
}
.navbarItemContainer {
height: 100%;
}
#navbarLogoContainer {
display: flex;
float: left;
align-items: center;
}
#navbarLinkContainer {
display: grid;
grid-template-columns: 100px 100px 100px;
float: right;
text-align: center;
align-items: center;
}
.navbarLink {
color: #039be5;
transition: 0.2s;
}
.navbarLink:hover {
color: #25bdf7;
transition: 0.2s;
}
.navbarLink>img {
width: 32px;
height: 32px;
display: none;
}
#media only screen and (max-width: 1000px) {
#navbar {
padding: 0 60px;
}
.navbarLink>span {
display: none;
}
.navbarLink>img {
display: block;
}
.navbarLink>img {
width: 24px;
height: 24px;
}
#navbarLinkContainer {
grid-template-columns: 24px 24px 24px;
grid-gap: 0 40px;
}
}
#media only screen and (max-width: 400px) {
/* place logo above button bar */
#navbar {
background: red;
/* just a test */
}
}
<div id="navbar">
<div id="navbarLogoContainer" class="navbarItemContainer">
<a>
<img class="img" src="/resources/logo.png">
</a>
</div>
<div id="navbarLinkContainer" class="navbarItemContainer">
<a class="navbarLink">
<span>
Link 1
</span>
<img class="img" src="">
</a>
<a class="navbarLink">
<span>
Link 2
</span>
<img class="img" src="">
</a>
<a class="navbarLink">
<span>
Link 3
</span>
<img class="img" src="">
</a>
</div>
</div>