Codecademy Forums

Task Board Project

I am finishing up the Task Board Project in Learn CSS but am having an issue with how the third column appears. For some reason the “Research Trends” box appears centered in the column rather than at the top of the column like it does in the example provided in the project. Any idea why this is? I’ve gone back through and it seems like I followed the steps exactly as they are described. My code is as follows (and sorry if there is a cleaner way to share code on here, I’m very new to this):

CSS:

@font-face {
font-family: WorkSans;
src: url(“https://s3.amazonaws.com/codecademy-content/courses/learn-css-grid/project-ii/Resources/Work_Sans/WorkSans-Regular.ttf”);
}
@font-face {
font-family: Poppins;
src: url(“https://s3.amazonaws.com/codecademy-content/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;
}

.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);
grid-column-gap: 20px;
grid-auto-rows: 100px;
}

.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;
grid-gap: 10px;
min-height: 700px;
display: grid;
grid-template-rows: 20px repeat(5, 100px);
align-content: space-between;
}

.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;
}

.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;
}

.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;
grid-auto-rows: 100px;
}

Also apologies for not posting my HTML code but it keeps telling me that new users can only post one image per post.

Hello :slight_smile:

Here is instruction how to format code in the posts -> https://discuss.codecademy.com/t/how-do-i-format-code-in-my-posts/51139.

Please edit your post and include HTML code.

1 Like