Hi
What I’m trying to do with Task board is to make card-container scrollable as we increase the item in.
@font-face {
font-family: WorkSans;
src: url("https://content.codecademy.com/courses/learn-css-grid/project-ii/Resources/Work_Sans/WorkSans-Regular.ttf");
}
@font-face {
font-family: Poppins;
src: url("https://content.codecademy.com/courses/learn-css-grid/project-ii/Resources/Poppins/Poppins-Regular.ttf");
}
html {
height: 100%;
}
body {
height: 100%;
margin: 0;
background-image: linear-gradient(359deg, #3023ae, #eb7f7b);
background-repeat: no-repeat;
background-attachment: fixed;
/* overflow: hidden; */
}
.navbar {
display: grid;
grid-template-columns: 10px 1fr 3fr 1fr;
position: absolute;
width: 100%;
height: 60px;
background-color: rgba(120,70,154, 0.2);
text-align: center;
top: 0;
left: 0;
justify-content: space-around;
}
.navbar h1 {
grid-column: 3 / 4;
font-family: Poppins;
color: #ffffff;
margin: 0;
align-self: center;
}
.container {
width: 1000px;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
overflow: auto;
}
.search-bar {
grid-column: 2 / 3;
width: 100%;
height: 40px;
background-color: rgba(255,255,255, 0.35);
top: 8px;
position: absolute;
}
input {
display: inline-block;
border: none;
background: transparent;
font-size: 14px;
}
.search-bar input {
float: left;
height: 18px;
margin-top: 9px;
margin-left: 7px;
}
.card-column input {
height: 18px;
margin-left: 15px;
}
.search-icon {
float: left;
margin-top: 9px;
margin-left: 7px;
}
.card-column {
background-color: #ffffff;
gap: 10px;
min-height: 700px;
display:grid;
grid-template-rows: 20px repeat(5,100px);
grid-auto-rows: 100px;
align-content: start;
/* align-items: start; */
justify-content: center;
overflow-y: scroll;
scrollbar-width: thin;
}
.card-column h2 {
padding: 0;
margin: 0 auto;
font-family: WorkSans;
font-size: 16px;
font-weight: 600;
letter-spacing: 0.2px;
text-align: left;
color: #2f2f2f;
display: inline-block;
}
.taskgroup-heading {
margin-left: 15px;
margin-top: 7px;
/* border: 1px solid black; */
}
.taskgroup-heading h2 {
/* border: 1px solid black; */
}
.ellipsis-icon {
/* border: 1px solid black; */
}
.site-body {
position: absolute;
top: 100px;
margin-left: 50px;
}
.card {
margin-right: 15px;
margin-left: 15px;
background-color: rgba(216, 216, 216, 0.21);
border: solid 1px rgba(151,151,151,0.21);
position: relative;
/* border: 1px solid black; */
}
.rectangle {
width: 57px;
height: 6px;
position: relative;
display: inline-block;
margin-left: 7px;
}
.list-icon {
display: inline-block;
margin-left: 7px;
margin-bottom: 5px;
position: absolute;
bottom: 0;
}
.task-description {
margin-left: 7px;
margin-top: 0;
font-family: WorkSans;
font-size: 14px;
letter-spacing: 0.2px;
text-align: left;
color: #2f2f2f;
}
.ellipsis-icon {
display: inline-block;
float: right;
margin-right: 15px;
}
.task-date {
display: inline-block;
font-family: WorkSans;
font-size: 10px;
letter-spacing: 0.1px;
text-align: left;
color: #9b9b9b;
position: absolute;
bottom: 0;
margin-bottom: 5px;
left: 25px;
}
.yellow {
background-color: #fdcb1e;
}
.orange {
background-color: #ff7700;
}
.green {
background-color: #50e3c2;
}
.blue {
background-color: #3343e5;
}
.add-card {
background-color: rgba(216, 216, 216, 0.21);
border: solid 1px rgba(151,151,151,0.21);
color: #2f2f2f;
}
.completed-projects {
grid-template-rows: 20px repeat(5,100px);
grid-auto-rows: 100px;
}
type or paste code here