random padding around entire page? [duplicate] - html
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>
Related
How to make a fixed size content
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");
}
How do you fill the remaining space with grid container in css?
I'm new to this. I'm trying to make a webpage with 100vh height, where the header and footer will take 80px and 50px respectively. Whatever space is left in middle should be taken over by a grid container completely. I did succeed so far, but the middle container is taking only as much as its content needs. Please see the below image for refrence:
Also, I was under the impression that the footer tag will put the section at the bottom of the viewport automatically. But that's not happening either. Do I have to use absolute positioning?
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
html {
font-size: 10px;
}
body {
height: 100vh;
overflow-x: hidden;
}
.container {
max-width: 1400px;
margin: 0 auto;
}
header {
padding-left: 40px;
padding-right: 40px;
}
nav {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
min-height: 80px;
}
.nav-menuList {
display: inline-flex;
justify-content: space-between;
align-items: center;
gap: 4rem;
}
.nav-list {
list-style-type: none;
font-family: sans-serif;
font-size: 1.4rem;
font-weight: 500;
line-height: 4.4rem;
color: #000;
}
.grid-container {
display: grid;
grid-template-rows: 1fr 1fr;
row-gap: 4rem;
grid-template-areas:
"h1"
"h-btn";
padding: 0 40px;
align-self: center;
}
h1 {
font-family: sans-serif;
font-size: 4.8rem;
font-weight: 300;
line-height: 6.4rem;
color: #000;
grid-area: h1;
width: 75%;
}
.button-group {
grid-area: h-btn;
}
footer {
padding: 0 40px;
}
<body>
<div class="container">
<header>
<nav>
<div class="logo">
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0 4C0 1.79086 1.79086 0 4 0H28C30.2091 0 32 1.79086 32 4V28C32 30.2091 30.2091 32 28 32H4C1.79086 32 0 30.2091 0 28V4Z" fill="black" />
</svg>
</div>
<div class="menu">
<ul class="nav-menuList">
<li class="nav-list">menu</li>
<li class="nav-list">menu</li>
<li class="nav-list">menu</li>
</ul>
</div>
</nav>
</header>
<main>
<div class="grid-container">
<h1>Lorem ipsum dolor sit amet</h1>
<div class="button-group">
<button class="primary-btn hero-btn">CTA</button>
</div>
</div>
</main>
<footer>This is footer</footer>
</div>
</body>
Flexbox solution:
Apply to the body or the flexbox container: min-height: 100vh;.
Apply to the header: height: 80px; and to the footer: height: 50px;.
Make the main or content-box consume the remaining space by adding: flex-grow: 1;
body {
display: flex;
flex-direction: column;
height: 100vh;
}
header {
height: 80px;
}
footer {
height: 50px;
}
main {
flex-grow: 1;
}
/* for demonstration purpose only */
body {
margin: 0;
}
header,
footer,
main {
display: flex;
justify-content: center;
align-items: center;
}
header {
background-color: pink;
}
main {
background-color: lightblue;
}
footer {
background-color: lightgreen;
}
<header>Header</header>
<main>Content</main>
<footer>Footer</footer>
CSS-Grid solution:
Apply to the body or the grid-container: min-height: 100vh;
Define the rows: grid-template-rows: 80px auto 50px; which means that auto will consume all remaining space.
body {
height: 100vh;
display: grid;
grid-template-rows: 80px auto 50px;
}
/* for demonstration purpose only */
body {
margin: 0;
}
header,
footer,
main {
display: flex;
justify-content: center;
align-items: center;
}
header {
background-color: pink;
}
main {
background-color: lightblue;
}
footer {
background-color: lightgreen;
}
<header>Header</header>
<main>Content</main>
<footer>Footer</footer>
You can set .container also as grid :
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
html {
font-size: 10px;
}
body {
height: 100vh;
overflow-x: hidden;
}
.container {
max-width: 1400px;
margin: 0 auto;
display: grid;
grid-template-rows: minmax(80px, max-content) 1fr minmax(50px,max-content);
height: 100%;
}
header {
padding-left: 40px;
padding-right: 40px;
}
nav {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
min-height: 80px;
}
.nav-menuList {
display: inline-flex;
justify-content: space-between;
align-items: center;
gap: 4rem;
}
.nav-list {
list-style-type: none;
font-family: sans-serif;
font-size: 1.4rem;
font-weight: 500;
line-height: 4.4rem;
color: #000;
}
.grid-container {
display: grid;
grid-template-rows: 1fr 1fr;
row-gap: 4rem;
grid-template-areas:
"h1"
"h-btn";
padding: 0 40px;
align-self: center;
}
h1 {
font-family: sans-serif;
font-size: 4.8rem;
font-weight: 300;
line-height: 6.4rem;
color: #000;
grid-area: h1;
width: 75%;
}
.button-group {
grid-area: h-btn;
}
footer {
padding: 0 40px;
}
<body>
<div class="container">
<header>
<nav>
<div class="logo">
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0 4C0 1.79086 1.79086 0 4 0H28C30.2091 0 32 1.79086 32 4V28C32 30.2091 30.2091 32 28 32H4C1.79086 32 0 30.2091 0 28V4Z" fill="black" />
</svg>
</div>
<div class="menu">
<ul class="nav-menuList">
<li class="nav-list">menu</li>
<li class="nav-list">menu</li>
<li class="nav-list">menu</li>
</ul>
</div>
</nav>
</header>
<main>
<div class="grid-container">
<h1>Lorem ipsum dolor sit amet</h1>
<div class="button-group">
<button class="primary-btn hero-btn">CTA</button>
</div>
</div>
</main>
<footer>This is footer</footer>
</div>
</body>
Background image not showing up in div
My background image won't show up in the div I want to display in. However, it shows up if I put it in other elements. For example, I put it in the body element and it showed up just fine, but it won't display in the div I want it to. Can you check my code and see what I'm doing wrong. I double checked my file path and also the file type, and it's all fine. So, I'm not being able to figure out what I'm doing wrong.
HTML:
<body>
<header>
<div class = "container container-flex">
<div class = "title">
<h1>PRODUCE</h1>
</div>
<nav>
<ul>
<li>Home</li>
<li>Groups</li>
<li>Profiles</li>
<li>Gallery</li>
</ul>
</nav>
</div>
</header>
<div class = "container container-flex">
<main role = "main">
<div class = "image">
</div>
</main>
</div>
</body>
CSS:
body{
margin: 0;
font-size: 1.125rem;
font-weight: 400;
}
.container{
width: 90%;
max-width: 900px;
margin: 0 auto;
}
.container-flex{
display: flex;
flex-direction: column;
justify-content: space-between;
}
header{
padding: 1em 0;
text-align: center;
}
#media (min-width: 675px){
.container-flex{
flex-direction: row;
}
}
nav ul{
list-style: none;
padding: 0;
display: flex;
justify-content: center;
}
nav li{
margin-left: 2em;
}
nav a{
text-decoration: none;
padding: .25em 0;
font-family: 'Ubuntu', sans-serif;
color: black;
font-size: 1.3rem;
color: #575252;
}
h1{
font-size: 2.75rem;
margin: 0.1em;
font-family: 'Merriweather', serif;
color: #FF344B;
}
#media (max-width: 675px){
nav ul{
flex-direction: column;
}
nav li{
margin: .5em 0;
}
}
.image{
background-image: url('logo.jpg');
}
This is because you are trying set background image in an empty element, which has 0 height.
Set specific width/height of the element.
body{
margin: 0;
font-size: 1.125rem;
font-weight: 400;
}
.container{
width: 90%;
max-width: 900px;
margin: 0 auto;
}
.container-flex{
display: flex;
flex-direction: column;
justify-content: space-between;
}
header{
padding: 1em 0;
text-align: center;
}
#media (min-width: 675px){
.container-flex{
flex-direction: row;
}
}
nav ul{
list-style: none;
padding: 0;
display: flex;
justify-content: center;
}
nav li{
margin-left: 2em;
}
nav a{
text-decoration: none;
padding: .25em 0;
font-family: 'Ubuntu', sans-serif;
color: black;
font-size: 1.3rem;
color: #575252;
}
h1{
font-size: 2.75rem;
margin: 0.1em;
font-family: 'Merriweather', serif;
color: #FF344B;
}
#media (max-width: 675px){
nav ul{
flex-direction: column;
}
nav li{
margin: .5em 0;
}
}
.image{
background-image: url('https://lh3.googleusercontent.com/taykG37GWDgY-FGkdogDvsHSJMUGRMvkuVRT6yR-5UNkKvGRKeRlpGYXlslocOcS0txlfUdGW59JGtzADknxbMqnh6AtVCv9EXyB8nHp80YsRNA0Yw=w1024-h683-n-l50-sg-rj');
height: 10em;
background-size: contain;
background-repeat: no-repeat;
}
<header>
<div class = "container container-flex">
<div class = "title">
<h1>PRODUCE</h1>
</div>
<nav>
<ul>
<li>Home</li>
<li>Groups</li>
<li>Profiles</li>
<li>Gallery</li>
</ul>
</nav>
</div>
</header>
<div class = "container container-flex">
<main role = "main">
<div class = "image">
</div>
</main>
</div>
Your div has no content. Either give some content or if that does not agree with your current design, give explicit height and width.
.image{
width: 200px;
height: 200px;
background-image : url('https://image.shutterstock.com/image-vector/sample-stamp-grunge-texture-vector-260nw-1389188336.jpg');
}
.image2{
background-image : url('https://image.shutterstock.com/image-vector/sample-stamp-grunge-texture-vector-260nw-1389188336.jpg');
}
<div class="image"></div>
<div class="image2"></div>
You need to add width, height, and background-size properties to the .image.
body {
margin: 0;
font-size: 1.125rem;
font-weight: 400;
min-height: 100vh;
}
.container {
width: 90%;
max-width: 900px;
margin: 0 auto;
}
.container-flex {
display: flex;
flex-direction: column;
justify-content: space-between;
}
header {
padding: 1em 0;
text-align: center;
}
#media (min-width: 675px) {
.container-flex {
flex-direction: row;
}
}
nav ul {
list-style: none;
padding: 0;
display: flex;
justify-content: center;
}
nav li {
margin-left: 2em;
}
nav a {
text-decoration: none;
padding: .25em 0;
font-family: 'Ubuntu', sans-serif;
color: black;
font-size: 1.3rem;
color: #575252;
}
h1 {
font-size: 2.75rem;
margin: 0.1em;
font-family: 'Merriweather', serif;
color: #FF344B;
}
#media (max-width: 675px) {
nav ul {
flex-direction: column;
}
nav li {
margin: .5em 0;
}
}
.container:nth-child(2){
height: 250px; /* set the height here */
}
main{
width: 100%;
height: 100%;
}
.image {
height: 30%;
width: 30%;
background-image: url('https://upload.wikimedia.org/wikipedia/commons/thumb/0/00/Disk_pack1.svg/1200px-Disk_pack1.svg.png');
background-size: cover;
}
<body>
<header>
<div class="container container-flex">
<div class="title">
<h1>PRODUCE</h1>
</div>
<nav>
<ul>
<li>Home</li>
<li>Groups</li>
<li>Profiles</li>
<li>Gallery</li>
</ul>
</nav>
</div>
</header>
<div class="container container-flex">
<main role="main">
<div class="image">
</div>
</main>
</div>
</body>
Edit: You need to set the height on the second .container class. Because of no height, the relative units didn't work. Also, you need to set the height and width on parent (main) element of .image.
in your code if you setting an image in div tag it is should have a height and weight. This is another way to add images in your application with responsive.
body{
margin: 0;
font-size: 1.125rem;
font-weight: 400;
}
.container{
width: 90%;
max-width: 900px;
margin: 0 auto;
}
.container-flex{
display: flex;
flex-direction: column;
justify-content: space-between;
}
header{
padding: 1em 0;
text-align: center;
}
#media (min-width: 675px){
.container-flex{
flex-direction: row;
}
}
nav ul{
list-style: none;
padding: 0;
display: flex;
justify-content: center;
}
nav li{
margin-left: 2em;
}
nav a{
text-decoration: none;
padding: .25em 0;
font-family: 'Ubuntu', sans-serif;
color: black;
font-size: 1.3rem;
color: #575252;
}
h1{
font-size: 2.75rem;
margin: 0.1em;
font-family: 'Merriweather', serif;
color: #FF344B;
}
#media (max-width: 675px){
nav ul{
flex-direction: column;
}
nav li{
margin: .5em 0;
}
}
.image img{
width: 100%;
height: auto;
}
<html lang="en">
<head>
<meta charset="utf-8">
<title>Page Title Goes Here</title>
<meta name="description" content="Description Goes Here">
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<div class = "container container-flex">
<div class = "title">
<h1>PRODUCE</h1>
</div>
<nav>
<ul>
<li>Home</li>
<li>Groups</li>
<li>Profiles</li>
<li>Gallery</li>
</ul>
</nav>
</div>
</header>
<div class = "container container-flex">
<main role = "main">
<div class = "image">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b6/Image_created_with_a_mobile_phone.png/1200px-Image_created_with_a_mobile_phone.png" alt="Smiley face">
</div>
</main>
</div>
<script src="js/scripts.js"></script>
</body>
</html>
As mentioned in answers by other users, your div element is empty and will sit on your page with effectively height: 0px; and width: 0px; properties.
To combat this, you should add a width property to your .image div in your stylesheets.
You can either then control the height of the image div with the height property, or alternatively you could use padding-bottom to give a more responsive twist to your styling, since padding-bottom: x% is a percentage of the element's width.
For example, adding:
.image {
background-size: cover;
background-position: center;
background-repeat: no-repeat;
padding-bottom: 100%;
width: 100%;
}
would create a square image that will stay responsively square as the page width, and therefore the width of the div.iamge element shrinks. The padding value can be played around with to get the right height for the element that you desire.
UPDATE
body{
margin: 0;
font-size: 1.125rem;
font-weight: 400;
}
.container{
background-color: red;
width: 90%;
max-width: 900px;
margin: 0 auto;
}
.container-flex{
display: flex;
flex-direction: column;
justify-content: space-between;
}
.image-wrapper {
width: 75%;
}
.image {
background-color: green;
height: 0;
padding-bottom: 100%;
}
.container {
color: white;
padding-bottom: 16px;
}
.center-image {
margin: 0 auto;
}
<body>
<header>
</header>
<div class="container">
container
<main role="main">
<div class="image-wrapper center-image">
<div class="image">
<span>image</span>
</div>
</div>
</main>
</div>
</body>
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;
Centering the IMG element in Navbar
Good days guys I would like to ask if how to center the image element in the navigation bar, I dint use ul element when I try to use absolute dint work as well.. what I want to make it happen is just like on the image that attached here. thanks
here's the code, by the use I used grid system here
body,
html {
padding: 0;
margin: 0;
height: 100%;
}
/* ########## Custome Design ######### */
.mainbox {
display: grid;
grid-template-columns: repeat(12, 1fr);
grid-template-rows: repeat(12, 1fr);
/* margin: 10px 0; */
height: 100vh;
}
.box{
background-image: linear-gradient(to bottom,
rgba(93, 173, 226, 0.800),
rgba(93, 173, 226, 0.932) ),
url(/img/bg-picture.jpg);
background-size: cover;
background-position: left;
height: 100vh;
}
header {
grid-row: 1 / 2;
grid-column: 1 / -1;
/* background-color: #fff; */
}
.logo {
height: 65px;
width: 65px;
position: absolute;
margin: auto;
}
.firstNav {
text-align: center;
}
.firstNav > a {
font-family: 'Montserrat', sans-serif;
font-weight: 600;
font-size: 14px;
text-transform: uppercase;
text-decoration: none;
padding: 0 12px;
color: #fff;
}
.firstNav > a:hover {
background: #000;
}
<body>
<div class="mainbox box">
<header>
<nav>
<div class="firstNav">
Home
Blog
Portfolio
<img src="./img/logo.png" alt="logo" class="logo">
Progress
About
Contact
</div>
</nav>
</header>
</div>
</body>
When I tried to use the code above the result is just like below image I attached
I solved this using flexbox, replace the text-align:center; in .firstNav and add a display: flex;
.firstNav {
display: flex;
justify-content: center;
align-items: center;
}
Here you have a codepen if you want to checkit! Let me know if that helps!
You can do something like this:
body,
html {
padding: 0;
margin: 0;
height: 100%;
}
/* ########## Custome Design ######### */
.mainbox {
display: grid;
grid-template-columns: repeat(12, 1fr);
grid-template-rows: repeat(12, 1fr);
/* margin: 10px 0; */
height: 100vh;
}
.box{
background-image: linear-gradient(to bottom,
rgba(93, 173, 226, 0.800),
rgba(93, 173, 226, 0.932) ),
url(/img/bg-picture.jpg);
background-size: cover;
background-position: left;
height: 100vh;
}
header {
grid-row: 1 / 2;
grid-column: 1 / -1;
/* background-color: #fff; */
}
#header ul li a.logo {
background: url("http://i48.tinypic.com/2mob6nb.png");
background-repeat:no-repeat;
height:140px;
display:block;
width:215px;
margin-top:-61px;
padding: 0;
}
.firstNav {
text-align: center;
}
.firstNav > a {
font-family: 'Montserrat', sans-serif;
font-weight: 600;
font-size: 14px;
text-transform: uppercase;
text-decoration: none;
padding: 0 12px;
color: #fff;
}
.firstNav > a:hover {
background: #000;
}
<body>
<div class="mainbox box">
<header>
<nav>
<div class="firstNav">
Home
Blog
Portfolio
<img alt="logo" class="logo">
Progress
About
Contact
</div>
</nav>
</header>
</div>
</body>
I would use a grid like this:
nav {
display: grid;
grid-template-columns: repeat(3, 1fr) auto repeat(3, 1fr)
}
nav > * {
text-align: center;
}
<body>
<div class="mainbox box">
<header>
<nav>
Home
Blog
Portfolio
<img src="./img/logo.png" alt="logo" class="logo">
Progress
About
Contact
</nav>
</header>
</div>
</body>
Note: your <div class="FirstNav"> is useless.
I would suggest using
.firstNav {
display: flex
justify-content: center
align-items: center
}
Full example:
body,
html {
padding: 0;
margin: 0;
height: 100%;
}
/* ########## Custome Design ######### */
.mainbox {
display: grid;
grid-template-columns: repeat(12, 1fr);
grid-template-rows: repeat(12, 1fr);
/* margin: 10px 0; */
height: 100vh;
}
.box{
background-image: linear-gradient(to bottom,
rgba(93, 173, 226, 0.800),
rgba(93, 173, 226, 0.932) ),
url(/img/bg-picture.jpg);
background-size: cover;
background-position: left;
height: 100vh;
}
header {
grid-row: 1 / 2;
grid-column: 1 / -1;
/* background-color: #fff; */
}
.logo {
height: 65px;
width: 65px;
}
.firstNav {
text-align: center;
display: flex;
justify-content: center;
align-items: center;
}
.firstNav > a {
font-family: 'Montserrat', sans-serif;
font-weight: 600;
font-size: 14px;
text-transform: uppercase;
text-decoration: none;
padding: 0 12px;
color: #fff;
}
.firstNav > a:hover {
background: #000;
}
<div class="mainbox box">
<header>
<nav>
<div class="firstNav">
Home
Blog
Portfolio
<img src="https://placehold.it/50x50" alt="logo" class="logo">
Progress
About
Contact
</div>
</nav>
</header>
</div>