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.

1 Like