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

3 Likes

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.

2 Likes

I have the same problem! I followed the instructions accurately, and watched the video, but in the third column the item is in the center of column.
Link to the task: https://www.codecademy.com/courses/learn-css/projects/css-grid-project-ii

My CSS code:

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

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

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

Hi,

That is an old post, but I’ve just had the same issue. It comes from the “align-content” property of the “.card-column” class. I removed it and my page looks like the example provided. It is not the first time that I spot inconsistencies between what is asked and the solution given.

3 Likes

So jeff-love is correct in that, the completed project link does not contain the “align-content” in the .card-column class of the CSS. However, the instructions say to add it because it does give better spacing to the FUTURE and ACTIVE project lists. It does however incorrectly space the rows in the COMPLETED project list.

I left the align-content in the .card-column class and then added my own CSS to make the layout match the FUTURE and ACTIVE project lists. Its quirky because they don’t have the same number of tasks. Something that was overlooked when they set up this project I’m sure.