How to make images responsive using CSSGrid - html

Im trying to insert 8 images into a 2x4 CSSGrid. I have width set to 100% but when I set height to 100% the bottom row of images end up below the footer instead of below the first row of images. Setting the height using px works, but its not responsive at all compared to using %. Any ideas? Ive been told using flexbox would be better but I want to just strictly use CSSGrid for this problem.
<!DOCTYPE html>
<html>
<head>
<title>Layout Master</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="container">
<div class="zone green">
<span>About</span>
<span>Products</span>
<span>Our Team</span>
<span id="Contact">Contact</span>
</div>
<div class="zone red">Cover</div>
<div class="zone blue">
<img src="data_storage_2_2.png" alt="data storage">
<img src="desktop_analytics_2.png" alt="desktop analytics">
<img src="files_2.png" alt="files">
<img src="monitor_coding_2.png" alt="monitor coding">
<img src="monitor_settings_2.png" alt="monitor settings">
<img src= "server_2_2.png" alt="server">
<img src="server_3.png" alt="server">
<img src="server_safe_2.png" alt=server safe>
</div>
<div class="zone yellow">Made By Cristobal Manrique</div>
</div>
</body>
</html>
.container {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 1fr 4fr 8fr 1fr;
}
.green {
display: flex;
align-self: center;
}
.green span{
margin-left: 20px;
}
#Contact {
margin-left: auto;
}
.zone.blue{
display: grid;
grid-gap: 10px;
grid-template-columns: repeat(4, minmax(200px, 1fr));
grid-template-rows: repeat(2, minmax(200px, 1fr));
}
.zone {
padding:30px 50px;
cursor:pointer;
color:#FFF;
font-size:2em;
border-radius:4px;
border:1px solid #bbb;
transition: all 0.3s linear;
}
.zone:hover {
-webkit-box-shadow:rgba(0,0,0,0.8) 0px 5px 15px, inset rgba(0,0,0,0.15) 0px -10px 20px;
-moz-box-shadow:rgba(0,0,0,0.8) 0px 5px 15px, inset rgba(0,0,0,0.15) 0px -10px 20px;
-o-box-shadow:rgba(0,0,0,0.8) 0px 5px 15px, inset rgba(0,0,0,0.15) 0px -10px 20px;
box-shadow:rgba(0,0,0,0.8) 0px 5px 15px, inset rgba(0,0,0,0.15) 0px -10px 20px;
}
/*https://paulund.co.uk/how-to-create-shiny-css-buttons*/
/***********************************************************************
* Green Background
**********************************************************************/
.green{
background: #56B870; /* Old browsers */
background: -moz-linear-gradient(top, #56B870 0%, #a5c956 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#56B870), color-stop(100%,#a5c956)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #56B870 0%,#a5c956 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #56B870 0%,#a5c956 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #56B870 0%,#a5c956 100%); /* IE10+ */
background: linear-gradient(top, #56B870 0%,#a5c956 100%); /* W3C */
}
/***********************************************************************
* Red Background
**********************************************************************/
.red{
background: #C655BE; /* Old browsers */
background: -moz-linear-gradient(top, #C655BE 0%, #cf0404 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#C655BE), color-stop(100%,#cf0404)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #C655BE 0%,#cf0404 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #C655BE 0%,#cf0404 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #C655BE 0%,#cf0404 100%); /* IE10+ */
background: linear-gradient(top, #C655BE 0%,#cf0404 100%); /* W3C */
}
/***********************************************************************
* Yellow Background
**********************************************************************/
.yellow{
display: flex;
justify-content: center;
background: #F3AAAA; /* Old browsers */
background: -moz-linear-gradient(top, #F3AAAA 0%, #febf04 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#F3AAAA), color-stop(100%,#febf04)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #F3AAAA 0%,#febf04 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #F3AAAA 0%,#febf04 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #F3AAAA 0%,#febf04 100%); /* IE10+ */
background: linear-gradient(top, #F3AAAA 0%,#febf04 100%); /* W3C */
}
/***********************************************************************
* Blue Background
**********************************************************************/
.blue{
background: #7abcff; /* Old browsers */
background: -moz-linear-gradient(top, #7abcff 0%, #60abf8 44%, #4096ee 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7abcff), color-stop(44%,#60abf8), color-stop(100%,#4096ee)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #7abcff 0%,#60abf8 44%,#4096ee 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #7abcff 0%,#60abf8 44%,#4096ee 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #7abcff 0%,#60abf8 44%,#4096ee 100%); /* IE10+ */
background: linear-gradient(top, #7abcff 0%,#60abf8 44%,#4096ee 100%); /* W3C */
}
img{
background-color: black;
width: 100%;
height: 100%;
}


Have you tried using 100vh instead of 100%


#msmoore's anser can be used, but that then restricts your height.
Instead I've provided a jsFiddle of your example with some sample images from imgur check it out here.
The real change was adding object-fit: cover; to your img css like this.
img {
object-fit: cover; /* ensures the image tries to cover all the space given to it */
background-color: black;
width: 100%;
}
Still this is not ideal code when dealing with images/galleries - try to use bootstrap or some similar library that offers more responsive grid solutions.


A quick solution is to wrap your images with a container:
<div class="image-container">
<img src="data_storage_2_2.png" alt="data storage">
</div>
Example: https://jsbin.com/qeqajozoge/edit?html,css,output
height: 100% only works when the ancestor element also has a defined height. If the parent's height is not defined, the browser will look at the parent's parent height until it finds a defined height (and so on) to resolve it. You do not want the parent's height, but the height of the grid row and the result is unexpected. A workaround is to add a container div which adjusts itself to the grid, and you can set your image's height to 100%.
Note that setting the images' heights will distort them, it is better if you can keep their aspect ratio. In such case you can consider other solutions like #Danail Gabenski's answer. The vh solution however will not give you the result you want in this case.

Related

How do I insert images into a CSSGrid?

Im trying to insert these 8 images into a CSSGrid. I made it so that the grid has 4 columns and 2 rows. I set the heigh and width of the img to 100% thinking itd take up the space of one column in each row. Instead the images come out way bigger than intended. Im using a nested grid, which I think im not implementing correctly. For example, Ill set the width and height of the images to 300px and one row will have more than 4 pictures. I think thats cause the images arent taking up the full size of the column but im not sure. When i inspect element I cant seem to see the CSSGrid Any help?
<!DOCTYPE html>
<html>
<head>
<title>Layout Master</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="container">
<div class="zone green">
<span>About</span>
<span>Products</span>
<span>Our Team</span>
<span id="Contact">Contact</span>
</div>
<div class="zone red">Cover</div>
<div class="zone blue">
<img src="data_storage_2_2.png" alt="data storage">
<img src="desktop_analytics_2.png" alt="desktop analytics">
<img src="files_2.png" alt="files">
<img src="monitor_coding_2.png" alt="monitor coding">
<img src="monitor_settings_2.png" alt="monitor settings">
<img src= "server_2_2.png" alt="server">
<img src="server_3.png" alt="server">
<img src="server_safe_2.png" alt=server safe>
</div>
<div class="zone yellow">Made By Cristobal Manrique</div>
</div>
</body>
</html>
.container {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 1fr 4fr 8fr 1fr;
}
.green {
display: flex;
align-self: center;
}
.green span{
margin-left: 20px;
}
#Contact {
margin-left: auto;
}
.zone blue{
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: 1fr 1fr;
}
.zone {
padding:30px 50px;
cursor:pointer;
color:#FFF;
font-size:2em;
border-radius:4px;
border:1px solid #bbb;
transition: all 0.3s linear;
}
.zone:hover {
-webkit-box-shadow:rgba(0,0,0,0.8) 0px 5px 15px, inset rgba(0,0,0,0.15) 0px -10px 20px;
-moz-box-shadow:rgba(0,0,0,0.8) 0px 5px 15px, inset rgba(0,0,0,0.15) 0px -10px 20px;
-o-box-shadow:rgba(0,0,0,0.8) 0px 5px 15px, inset rgba(0,0,0,0.15) 0px -10px 20px;
box-shadow:rgba(0,0,0,0.8) 0px 5px 15px, inset rgba(0,0,0,0.15) 0px -10px 20px;
}
/*https://paulund.co.uk/how-to-create-shiny-css-buttons*/
/***********************************************************************
* Green Background
**********************************************************************/
.green{
background: #56B870; /* Old browsers */
background: -moz-linear-gradient(top, #56B870 0%, #a5c956 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#56B870), color-stop(100%,#a5c956)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #56B870 0%,#a5c956 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #56B870 0%,#a5c956 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #56B870 0%,#a5c956 100%); /* IE10+ */
background: linear-gradient(top, #56B870 0%,#a5c956 100%); /* W3C */
}
/***********************************************************************
* Red Background
**********************************************************************/
.red{
background: #C655BE; /* Old browsers */
background: -moz-linear-gradient(top, #C655BE 0%, #cf0404 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#C655BE), color-stop(100%,#cf0404)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #C655BE 0%,#cf0404 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #C655BE 0%,#cf0404 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #C655BE 0%,#cf0404 100%); /* IE10+ */
background: linear-gradient(top, #C655BE 0%,#cf0404 100%); /* W3C */
}
/***********************************************************************
* Yellow Background
**********************************************************************/
.yellow{
display: flex;
justify-content: center;
background: #F3AAAA; /* Old browsers */
background: -moz-linear-gradient(top, #F3AAAA 0%, #febf04 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#F3AAAA), color-stop(100%,#febf04)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #F3AAAA 0%,#febf04 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #F3AAAA 0%,#febf04 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #F3AAAA 0%,#febf04 100%); /* IE10+ */
background: linear-gradient(top, #F3AAAA 0%,#febf04 100%); /* W3C */
}
/***********************************************************************
* Blue Background
**********************************************************************/
.blue{
background: #7abcff; /* Old browsers */
background: -moz-linear-gradient(top, #7abcff 0%, #60abf8 44%, #4096ee 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7abcff), color-stop(44%,#60abf8), color-stop(100%,#4096ee)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #7abcff 0%,#60abf8 44%,#4096ee 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #7abcff 0%,#60abf8 44%,#4096ee 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #7abcff 0%,#60abf8 44%,#4096ee 100%); /* IE10+ */
background: linear-gradient(top, #7abcff 0%,#60abf8 44%,#4096ee 100%); /* W3C */
}
img{
background-color: black;
width: 100%;
height: 100%;
}

typo error .zone blue to .zone.blue
.zone.blue{
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: 1fr 1fr;
}

Insted of image tag use DIV tag and add background property
background-image: url('../images/abc.jpg');
Image tag is difficult to align as required. div is best solution.
If you want grid system in more detail , use flex, it is more efficient and popular one.
Refm: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

White space at the bottom of a web page on low browser resolutions (CSS-Grid layout)

I've been trying to make a simple site layout using CSS-Grid.
Everything is working just fine and is responsive, but when I minimize my browser to really small resolutions scroll bars appears and the css-grid stops stretching over the entire page height, causing a blank white space on the bottom.
To see what I mean, simply run the snippet I've inserted as it opens in a low height window. I've also uploaded pictures of how it shows on my browser.
How it shows on normal height:
What happens when I reduce height:
I tried playing around with overflow and min-height, but couldn't work it out. It is not really a critical issue but I'm really interested just to understand why it happens. Thanks!
body, html{
height: 100vh;
min-height: 100vh;
min-width: 300px;
margin: 0;
padding: 0;
}
.grid-container-1{
height: 100vh;
min-height: 100vh;
min-width: 300px;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-template-rows: 8% 70% auto 8% ;
grid-template-areas:
"header1 header1 header1 header1"
"Cover Cover Cover Cover"
"Project Project Project Project"
"Footer Footer Footer Footer"
}
.header1{
grid-area: header1;
}
.cover{
grid-area: Cover;
}
.Project{
grid-area: Project;
}
.Footer{
grid-area: Footer;
}
.zone {
cursor:pointer;
color:#FFF;
font-size:2em;
border-radius:4px;
border:1px solid #bbb;
transition: all 0.3s linear;
}
.zone:hover {
-webkit-box-shadow:rgba(0,0,0,0.8) 0px 5px 15px, inset rgba(0,0,0,0.15) 0px -10px 20px;
-moz-box-shadow:rgba(0,0,0,0.8) 0px 5px 15px, inset rgba(0,0,0,0.15) 0px -10px 20px;
-o-box-shadow:rgba(0,0,0,0.8) 0px 5px 15px, inset rgba(0,0,0,0.15) 0px -10px 20px;
box-shadow:rgba(0,0,0,0.8) 0px 5px 15px, inset rgba(0,0,0,0.15) 0px -10px 20px;
}
/*https://paulund.co.uk/how-to-create-shiny-css-buttons*/
/***********************************************************************
* Green Background
**********************************************************************/
.green{
background: #56B870; /* Old browsers */
background: -moz-linear-gradient(top, #56B870 0%, #a5c956 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#56B870), color-stop(100%,#a5c956)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #56B870 0%,#a5c956 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #56B870 0%,#a5c956 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #56B870 0%,#a5c956 100%); /* IE10+ */
background: linear-gradient(top, #56B870 0%,#a5c956 100%); /* W3C */
}
/***********************************************************************
* Red Background
**********************************************************************/
.red{
background: #C655BE; /* Old browsers */
background: -moz-linear-gradient(top, #C655BE 0%, #cf0404 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#C655BE), color-stop(100%,#cf0404)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #C655BE 0%,#cf0404 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #C655BE 0%,#cf0404 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #C655BE 0%,#cf0404 100%); /* IE10+ */
background: linear-gradient(top, #C655BE 0%,#cf0404 100%); /* W3C */
}
/***********************************************************************
* Yellow Background
**********************************************************************/
.yellow{
background: #F3AAAA; /* Old browsers */
background: -moz-linear-gradient(top, #F3AAAA 0%, #febf04 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#F3AAAA), color-stop(100%,#febf04)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #F3AAAA 0%,#febf04 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #F3AAAA 0%,#febf04 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #F3AAAA 0%,#febf04 100%); /* IE10+ */
background: linear-gradient(top, #F3AAAA 0%,#febf04 100%); /* W3C */
}
/***********************************************************************
* Blue Background
**********************************************************************/
.blue{
background: #7abcff; /* Old browsers */
background: -moz-linear-gradient(top, #7abcff 0%, #60abf8 44%, #4096ee 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7abcff), color-stop(44%,#60abf8), color-stop(100%,#4096ee)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #7abcff 0%,#60abf8 44%,#4096ee 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #7abcff 0%,#60abf8 44%,#4096ee 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #7abcff 0%,#60abf8 44%,#4096ee 100%); /* IE10+ */
background: linear-gradient(top, #7abcff 0%,#60abf8 44%,#4096ee 100%); /* W3C */
}
<!DOCTYPE html>
<html>
<head>
<title>CSS Layout</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="grid-container-1">
<div class="header1 zone green">
Header
</div>
<div class="cover zone red">
Cover
</div>
<div class="Project zone blue">
Projects
</div>
<div class="Footer zone yellow">
Footer
</div>
</div>
</body>
</html>

Your font is too large for the last row height and it spills out of it's container.
One of the solutions is to change the last row size to 1fr:
body, html{
height: 100vh;
min-height: 100vh;
min-width: 300px;
margin: 0;
padding: 0;
}
.grid-container-1{
height: 100vh;
min-height: 100vh;
min-width: 300px;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-template-rows: 8% 70% auto 1fr;
grid-template-areas:
"header1 header1 header1 header1"
"Cover Cover Cover Cover"
"Project Project Project Project"
"Footer Footer Footer Footer"
}
.header1{
grid-area: header1;
}
.cover{
grid-area: Cover;
}
.Project{
grid-area: Project;
}
.Footer{
grid-area: Footer;
}
.zone {
cursor:pointer;
color:#FFF;
font-size:2em;
border-radius:4px;
border:1px solid #bbb;
transition: all 0.3s linear;
}
.zone:hover {
-webkit-box-shadow:rgba(0,0,0,0.8) 0px 5px 15px, inset rgba(0,0,0,0.15) 0px -10px 20px;
-moz-box-shadow:rgba(0,0,0,0.8) 0px 5px 15px, inset rgba(0,0,0,0.15) 0px -10px 20px;
-o-box-shadow:rgba(0,0,0,0.8) 0px 5px 15px, inset rgba(0,0,0,0.15) 0px -10px 20px;
box-shadow:rgba(0,0,0,0.8) 0px 5px 15px, inset rgba(0,0,0,0.15) 0px -10px 20px;
}
/*https://paulund.co.uk/how-to-create-shiny-css-buttons*/
/***********************************************************************
* Green Background
**********************************************************************/
.green{
background: #56B870; /* Old browsers */
background: -moz-linear-gradient(top, #56B870 0%, #a5c956 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#56B870), color-stop(100%,#a5c956)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #56B870 0%,#a5c956 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #56B870 0%,#a5c956 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #56B870 0%,#a5c956 100%); /* IE10+ */
background: linear-gradient(top, #56B870 0%,#a5c956 100%); /* W3C */
}
/***********************************************************************
* Red Background
**********************************************************************/
.red{
background: #C655BE; /* Old browsers */
background: -moz-linear-gradient(top, #C655BE 0%, #cf0404 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#C655BE), color-stop(100%,#cf0404)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #C655BE 0%,#cf0404 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #C655BE 0%,#cf0404 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #C655BE 0%,#cf0404 100%); /* IE10+ */
background: linear-gradient(top, #C655BE 0%,#cf0404 100%); /* W3C */
}
/***********************************************************************
* Yellow Background
**********************************************************************/
.yellow{
background: #F3AAAA; /* Old browsers */
background: -moz-linear-gradient(top, #F3AAAA 0%, #febf04 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#F3AAAA), color-stop(100%,#febf04)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #F3AAAA 0%,#febf04 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #F3AAAA 0%,#febf04 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #F3AAAA 0%,#febf04 100%); /* IE10+ */
background: linear-gradient(top, #F3AAAA 0%,#febf04 100%); /* W3C */
}
/***********************************************************************
* Blue Background
**********************************************************************/
.blue{
background: #7abcff; /* Old browsers */
background: -moz-linear-gradient(top, #7abcff 0%, #60abf8 44%, #4096ee 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7abcff), color-stop(44%,#60abf8), color-stop(100%,#4096ee)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #7abcff 0%,#60abf8 44%,#4096ee 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #7abcff 0%,#60abf8 44%,#4096ee 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #7abcff 0%,#60abf8 44%,#4096ee 100%); /* IE10+ */
background: linear-gradient(top, #7abcff 0%,#60abf8 44%,#4096ee 100%); /* W3C */
}
<!DOCTYPE html>
<html>
<head>
<title>CSS Layout</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="grid-container-1">
<div class="header1 zone green">
Header
</div>
<div class="cover zone red">
Cover
</div>
<div class="Project zone blue">
Projects
</div>
<div class="Footer zone yellow">
Footer
</div>
</div>
</body>
</html>

When your viewport is too small to fit your header and footer, your text size is overflowing - as a quick fix you can add overflow: hidden to zone to solve this in smaller screens - see demo below:
body, html{
height: 100vh;
min-height: 100vh;
min-width: 300px;
margin: 0;
padding: 0;
}
.grid-container-1{
height: 100vh;
min-height: 100vh;
min-width: 300px;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-template-rows: 8% 70% auto 8% ;
grid-template-areas:
"header1 header1 header1 header1"
"Cover Cover Cover Cover"
"Project Project Project Project"
"Footer Footer Footer Footer"
}
.header1{
grid-area: header1;
}
.cover{
grid-area: Cover;
}
.Project{
grid-area: Project;
}
.Footer{
grid-area: Footer;
}
.zone {
cursor:pointer;
color:#FFF;
font-size:2em;
border-radius:4px;
border:1px solid #bbb;
transition: all 0.3s linear;
overflow: hidden; /* ADDED */
}
.zone:hover {
-webkit-box-shadow:rgba(0,0,0,0.8) 0px 5px 15px, inset rgba(0,0,0,0.15) 0px -10px 20px;
-moz-box-shadow:rgba(0,0,0,0.8) 0px 5px 15px, inset rgba(0,0,0,0.15) 0px -10px 20px;
-o-box-shadow:rgba(0,0,0,0.8) 0px 5px 15px, inset rgba(0,0,0,0.15) 0px -10px 20px;
box-shadow:rgba(0,0,0,0.8) 0px 5px 15px, inset rgba(0,0,0,0.15) 0px -10px 20px;
}
/*https://paulund.co.uk/how-to-create-shiny-css-buttons*/
/***********************************************************************
* Green Background
**********************************************************************/
.green{
background: #56B870; /* Old browsers */
background: -moz-linear-gradient(top, #56B870 0%, #a5c956 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#56B870), color-stop(100%,#a5c956)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #56B870 0%,#a5c956 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #56B870 0%,#a5c956 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #56B870 0%,#a5c956 100%); /* IE10+ */
background: linear-gradient(top, #56B870 0%,#a5c956 100%); /* W3C */
}
/***********************************************************************
* Red Background
**********************************************************************/
.red{
background: #C655BE; /* Old browsers */
background: -moz-linear-gradient(top, #C655BE 0%, #cf0404 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#C655BE), color-stop(100%,#cf0404)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #C655BE 0%,#cf0404 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #C655BE 0%,#cf0404 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #C655BE 0%,#cf0404 100%); /* IE10+ */
background: linear-gradient(top, #C655BE 0%,#cf0404 100%); /* W3C */
}
/***********************************************************************
* Yellow Background
**********************************************************************/
.yellow{
background: #F3AAAA; /* Old browsers */
background: -moz-linear-gradient(top, #F3AAAA 0%, #febf04 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#F3AAAA), color-stop(100%,#febf04)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #F3AAAA 0%,#febf04 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #F3AAAA 0%,#febf04 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #F3AAAA 0%,#febf04 100%); /* IE10+ */
background: linear-gradient(top, #F3AAAA 0%,#febf04 100%); /* W3C */
}
/***********************************************************************
* Blue Background
**********************************************************************/
.blue{
background: #7abcff; /* Old browsers */
background: -moz-linear-gradient(top, #7abcff 0%, #60abf8 44%, #4096ee 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7abcff), color-stop(44%,#60abf8), color-stop(100%,#4096ee)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #7abcff 0%,#60abf8 44%,#4096ee 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #7abcff 0%,#60abf8 44%,#4096ee 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #7abcff 0%,#60abf8 44%,#4096ee 100%); /* IE10+ */
background: linear-gradient(top, #7abcff 0%,#60abf8 44%,#4096ee 100%); /* W3C */
}
<!DOCTYPE html>
<html>
<head>
<title>CSS Layout</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="grid-container-1">
<div class="header1 zone green">
Header
</div>
<div class="cover zone red">
Cover
</div>
<div class="Project zone blue">
Projects
</div>
<div class="Footer zone yellow">
Footer
</div>
</div>
</body>
</html>
Because the text is overflowing the elements is not very useful, you need to adjust the heights of your header and footer in your grid-template-rows to a value something like grid-template-rows: 3em 1fr auto 3em:
body, html{
height: 100vh;
min-height: 100vh;
min-width: 300px;
margin: 0;
padding: 0;
}
.grid-container-1{
height: 100vh;
min-height: 100vh;
min-width: 300px;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-template-rows: 3em 1fr auto 3em; /* CHANGED */
grid-template-areas:
"header1 header1 header1 header1"
"Cover Cover Cover Cover"
"Project Project Project Project"
"Footer Footer Footer Footer"
}
.header1{
grid-area: header1;
}
.cover{
grid-area: Cover;
}
.Project{
grid-area: Project;
}
.Footer{
grid-area: Footer;
}
.zone {
cursor:pointer;
color:#FFF;
font-size:2em;
border-radius:4px;
border:1px solid #bbb;
transition: all 0.3s linear;
}
.zone:hover {
-webkit-box-shadow:rgba(0,0,0,0.8) 0px 5px 15px, inset rgba(0,0,0,0.15) 0px -10px 20px;
-moz-box-shadow:rgba(0,0,0,0.8) 0px 5px 15px, inset rgba(0,0,0,0.15) 0px -10px 20px;
-o-box-shadow:rgba(0,0,0,0.8) 0px 5px 15px, inset rgba(0,0,0,0.15) 0px -10px 20px;
box-shadow:rgba(0,0,0,0.8) 0px 5px 15px, inset rgba(0,0,0,0.15) 0px -10px 20px;
}
/*https://paulund.co.uk/how-to-create-shiny-css-buttons*/
/***********************************************************************
* Green Background
**********************************************************************/
.green{
background: #56B870; /* Old browsers */
background: -moz-linear-gradient(top, #56B870 0%, #a5c956 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#56B870), color-stop(100%,#a5c956)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #56B870 0%,#a5c956 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #56B870 0%,#a5c956 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #56B870 0%,#a5c956 100%); /* IE10+ */
background: linear-gradient(top, #56B870 0%,#a5c956 100%); /* W3C */
}
/***********************************************************************
* Red Background
**********************************************************************/
.red{
background: #C655BE; /* Old browsers */
background: -moz-linear-gradient(top, #C655BE 0%, #cf0404 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#C655BE), color-stop(100%,#cf0404)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #C655BE 0%,#cf0404 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #C655BE 0%,#cf0404 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #C655BE 0%,#cf0404 100%); /* IE10+ */
background: linear-gradient(top, #C655BE 0%,#cf0404 100%); /* W3C */
}
/***********************************************************************
* Yellow Background
**********************************************************************/
.yellow{
background: #F3AAAA; /* Old browsers */
background: -moz-linear-gradient(top, #F3AAAA 0%, #febf04 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#F3AAAA), color-stop(100%,#febf04)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #F3AAAA 0%,#febf04 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #F3AAAA 0%,#febf04 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #F3AAAA 0%,#febf04 100%); /* IE10+ */
background: linear-gradient(top, #F3AAAA 0%,#febf04 100%); /* W3C */
}
/***********************************************************************
* Blue Background
**********************************************************************/
.blue{
background: #7abcff; /* Old browsers */
background: -moz-linear-gradient(top, #7abcff 0%, #60abf8 44%, #4096ee 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7abcff), color-stop(44%,#60abf8), color-stop(100%,#4096ee)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #7abcff 0%,#60abf8 44%,#4096ee 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #7abcff 0%,#60abf8 44%,#4096ee 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #7abcff 0%,#60abf8 44%,#4096ee 100%); /* IE10+ */
background: linear-gradient(top, #7abcff 0%,#60abf8 44%,#4096ee 100%); /* W3C */
}
<!DOCTYPE html>
<html>
<head>
<title>CSS Layout</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="grid-container-1">
<div class="header1 zone green">
Header
</div>
<div class="cover zone red">
Cover
</div>
<div class="Project zone blue">
Projects
</div>
<div class="Footer zone yellow">
Footer
</div>
</div>
</body>
</html>

Gradient over img tag using css

I want to place a gradient over an <img> tag. src attribute of the tag is angular-item. For example:
<img src={{value.angitem.image}}>
I've tried to make css class:
.pickgradient {
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0)), color-stop(100%,rgba(0,0,0,0.65)));
}
and
<img src={{value.angitem.image}} class="pickgradient ">
but it doesn't work. What should I do?

With z-index :
You may use a container and put the gradient on that container. Then use a negative z-index to position image behind the gradient.
.pickgradient {
display:inline-block;
background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.65) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.65)), color-stop(100%,rgba(0,0,0,0))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a6000000', endColorstr='#00000000',GradientType=0 ); /* IE6-9 */
}
img{
position:relative;
z-index:-1;
display:block;
height:200px; width:auto;
}
<div class="pickgradient">
<img src="http://i.imgur.com/HDssntn.jpg" />
</div>
With a pseudo element :
As commented, you can also use a pseudo element with the gradient and absolute positioning to put the gradient over the image :
.pickgradient{
position:relative;
display:inline-block;
}
.pickgradient:after {
content:'';
position:absolute;
left:0; top:0;
width:100%; height:100%;
display:inline-block;
background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.65) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.65)), color-stop(100%,rgba(0,0,0,0))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a6000000', endColorstr='#00000000',GradientType=0 ); /* IE6-9 */
}
img{
display:block;
height:200px;width:auto;
}
<div class="pickgradient">
<img src="http://i.imgur.com/HDssntn.jpg" />
</div>

For 2020, mask-image can work well. It works in modern browsers (not IE, -webkit- prefix in many browsers currently). https://caniuse.com/#feat=css-masks
img {
height: 200px;
width: auto;
mask-image: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%);
-webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%);
}
<img src="http://i.imgur.com/HDssntn.jpg" />

I recommend you to set background-color:black; to your container and then set class img{opacity:0.4}. Then you will get the same effect as you got with
backgroundImage:linear-gradient(rgba(0, 0, 0, 0.8),rgba(0, 0, 0, 0.8),rgba(0, 0, 0, 0.8),rgba(0, 0, 0, 0.8)),url(img_url))
My example on Slide:
.Slide {
position: relative;
border: 1px solid blue;
min-width: 100%;
height: 100%;
transition: 0.5s;
background-color: rgb(0, 0, 0);
}
.Slide img{
position: relative;
border: 1px solid blue;
min-width: 100%;
height: 100%;
transition: 0.5s;
opacity: 0.4;
}

try placing a div over the image in question and placing the gradient on the div instead of the image.

Position left sidebar with CSS

I am trying to design a layout with a left sidebar and a centered header. I have the header and sidebar in a wrapper div so that they can be centered on the page, but I want the sidebar to be a little left of the header like in this screenshot
How can I achieve this? Right now, when I re-size the window, the sidebar won't follow the header. Any help would be appreciated, I am still learning CSS. Thanks.
Here is my HTML and CSS (note: I had a margin: 0 auto 0 15px for the nav but took it out):
<body>
<div id="wrapper">
<header>
</header>
<nav>
<ul>
</ul>
</nav>
</div>
body {
margin:0;
padding: 5px;
background-color: #121212;
}
#wrapper {
margin:0 auto 0 auto;
width:1024;
}
header {
/* IE10 Consumer Preview */
background-image: -ms-linear-gradient(top, #0C0DA6 0%, #0E0B58 100%);
/* Mozilla Firefox */
background-image: -moz-linear-gradient(top, #0C0DA6 0%, #0E0B58 100%);
/* Opera */
background-image: -o-linear-gradient(top, #0C0DA6 0%, #0E0B58 100%);
/* Webkit (Safari/Chrome 10) */
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #0C0DA6), color-stop(1, #0E0B58));
/* Webkit (Chrome 11+) */
background-image: -webkit-linear-gradient(top, #0C0DA6 0%, #0E0B58 100%);
/* W3C Markup, IE10 Release Preview */
background-image: linear-gradient(to bottom, #0C0DA6 0%, #0E0B58 100%);
width: 768px;
height:100px;
border-radius: 4px;
border: 2px solid #adadad;
margin:0 auto 0 auto;
}
nav {
/* IE10 Consumer Preview */
background-image: -ms-linear-gradient(top, #0C0DA6 0%, #0E0B58 100%);
/* Mozilla Firefox */
background-image: -moz-linear-gradient(top, #0C0DA6 0%, #0E0B58 100%);
/* Opera */
background-image: -o-linear-gradient(top, #0C0DA6 0%, #0E0B58 100%);
/* Webkit (Safari/Chrome 10) */
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #0C0DA6), color-stop(1, #0E0B58));
/* Webkit (Chrome 11+) */
background-image: -webkit-linear-gradient(top, #0C0DA6 0%, #0E0B58 100%);
/* W3C Markup, IE10 Release Preview */
background-image: linear-gradient(to bottom, #0C0DA6 0%, #0E0B58 100%);
width:230px;
height:235px;
border-radius: 4px;
border: 2px solid #adadad;
}

Here you go: http://jsfiddle.net/WMYmV/1/
Changed style:
header {
width: 538px; //(768px - width of sidebar)
margin: 0 auto 0 230px;
}

CSS background-image gradient and border-line on bigger element

I'd like to have a background-image with a line on the end.
The border or line should begin where the background-size ends.
The border line is grey in the concept. It should stay just one element.
background-image: gradient-y(#color-grey-2, #color-white);
background-position: left top;
background-size: 100% 40px;
background-repeat: no-repeat;

http://jsfiddle.net/8Q79p/ OLD JSFIDDLE. (Wrapper)
http://jsfiddle.net/8Q79p/1/ Updated; if you want just one element, you can use color-stop
<div id="gradient">
</div>
#gradient{
background: rgb(221,221,221); /* Old browsers */
background: -moz-linear-gradient(top, rgba(221,221,221,1) 1%, rgba(255,255,255,1) 46%, rgba(149,149,149,1) 47%, rgba(149,149,149,1) 48%, rgba(255,255,255,1) 49%, rgba(252,252,252,1) 100%, rgba(27,27,27,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,rgba(221,221,221,1)), color-stop(46%,rgba(255,255,255,1)), color-stop(47%,rgba(149,149,149,1)), color-stop(48%,rgba(149,149,149,1)), color-stop(49%,rgba(255,255,255,1)), color-stop(100%,rgba(252,252,252,1)), color-stop(100%,rgba(27,27,27,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(221,221,221,1) 1%,rgba(255,255,255,1) 46%,rgba(149,149,149,1) 47%,rgba(149,149,149,1) 48%,rgba(255,255,255,1) 49%,rgba(252,252,252,1) 100%,rgba(27,27,27,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(221,221,221,1) 1%,rgba(255,255,255,1) 46%,rgba(149,149,149,1) 47%,rgba(149,149,149,1) 48%,rgba(255,255,255,1) 49%,rgba(252,252,252,1) 100%,rgba(27,27,27,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(221,221,221,1) 1%,rgba(255,255,255,1) 46%,rgba(149,149,149,1) 47%,rgba(149,149,149,1) 48%,rgba(255,255,255,1) 49%,rgba(252,252,252,1) 100%,rgba(27,27,27,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(221,221,221,1) 1%,rgba(255,255,255,1) 46%,rgba(149,149,149,1) 47%,rgba(149,149,149,1) 48%,rgba(255,255,255,1) 49%,rgba(252,252,252,1) 100%,rgba(27,27,27,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#dddddd', endColorstr='#1b1b1b',GradientType=0 ); /* IE6-9 */
width: 100%;
height: 100px;
border: solid 1px black;
}