Since products were not responsive against resizing the browser like this:
I wanted to make my grid responsive so i added grid area like this:
.grid{
display: grid;
grid-template-columns:1fr 1fr 1fr 1fr;
grid-gap:1em;
grid-area: 'head head head head'
'card card card card'
'foot foot foot foot' ;
}
but now footer is smaller and i have just one product instead of what should be in the body:
what is wrong with adding grid area in this code?
or if there is a better way to make them responsive what is it?
also this is the overall view of the site:
.header{
color: saddlebrown;
width: 100%;
height: 100px;
position: fixed;
background-color: burlywood;
opacity: 33px;
top: 0;
left: 0;
right: 0;
margin-top: 0;
margin-right: 0;
z-index: 1000;
grid-area: head;
}
body{
margin-top: 333px;
display: grid;
grid-template-rows: auto 1fr auto;
min-height: 100vh;
margin-right: 0;
margin-left: 0;
margin-bottom: 0;
}
.footer{
color: white;
background: sandybrown;
margin-top: 100px;
height: 100px;
margin-right: 0;
width: 100%;
grid-area: foot;
}
.card {
max-width: 400px;
margin: auto ;
text-align: center;
font-family: arial;
border-style: solid;
border-width: 6px;
position: relative;
grid-area: card ;
}
.grid{
display: grid;
grid-template-columns:1fr 1fr 1fr 1fr;
grid-gap:1em;
grid-area: 'head head head head'
'card card card card'
'foot foot foot foot' ;
}
.card img{
height: 400px;
width: 400px;
vertical-align: middle;
}
.price {background-color: #f44336;
font-size:22px;
border-radius: 3px;
position: absolute;
bottom: 0px;
right: 0px;
padding: 3px;
}
.card button {
border: none;
color: white;
background-color: #000;
position: relative ;
cursor: pointer;
width: 100%;
height: 100px;
font-size: 44px;
align-items: center;
}
.card button:hover {
opacity: .5;
background-color: #330;
}
#id{
background-color: saddlebrown;
color: white;
margin: 0;
font-size: 30px;
height: 310px;
}
.number{
width: 50px;
height: 50px;
background-color: #330;
color: yellow;
border-radius: 50%;
position: absolute;
top: -22px;
right: -22px;
justify-content: center;
align-items: center;
display: flex;
font-size: 22px;
}
@media screen and (max-width: 1864px){
.card{
max-width: 300px;
}
.price{
font-size:20px;
}
.card img{
height: 300px;
width: 300px;
}
}
@media screen and (max-width: 1319px){
.grid{
grid-template-columns:1fr 1fr 1fr ;
}
}
{% load static %}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="{% static 'main.css' %}">
<div >
<h1 >header</h1>
</div>
</head>
<body style="background-color: #36454F;">
<div >
{% for i in p%}
<div class='card'>
<div >{{i.Number}}</div>
<img src="{{i.image}}"></img>
<p id="id">{{i.description}}</p>
<a href="{{i.buy}}" target='_blank' rel='noopener noreferrer'>
<button><span > ${{i.price}}</span> buy</button>
</a>
</div>
{%endfor%}
</div>
<div >
<h1 >© All rights reserved</h1>
</div>
</body>
</html>CodePudding user response：
You want to set grid-area with head and foot which are outside of grid itself.
My propose is to remove grid-area from grid, and just use grid-template with media queries, or simply you can add display flex with flex-wrap.