Tribute Page (Matt Mullenweg)

Project Feedback
#1

Hey there,

I worked on this tribute page last year, but after restarting freeCodeCamp from the beginning I’d love to hear everyone’s thoughts on it this time around. It’s now more responsive and I fixed a couple of issues I had missed last time.

As always, your feedback is welcomed.

Joe

#2

Very nice layout! I only have two suggestions.

#1) Add the following, so that on smaller devices, the about Matt p element text is aligned left like it is for wider screens. I think it looks better this way.

.intro p {
  text-align:left;
}

#2) You should consider grouping all of your similar media queries together. You have several of the same type scattered through your CSS. For example, I see multiple instances of

@media (min-width: 768px)

You should really only have one media query for min-width: 768px and not all of the following which were scattered throughout your CSS.

@media (min-width: 768px) {
	.site-header .main-part {
		padding-top: 60px;
		padding-bottom: 10px;
	}
}

@media (min-width: 768px) {
	.site-header .main-part .matthew h1,
	.site-header .main-part .mullenweg h1 {
		font-size: 36px;
	}
}

@media (min-width: 768px) {
	.site-header .main-part .headshot img {
	  text-align: left;
	}
}

@media (min-width: 768px) {
	.site-header .main-part .headshot {
		margin-bottom: 0;
	}

	.site-header .main-part .headshot img {
	  margin-bottom: -160px;
	}
}

@media (min-width: 768px) {
	.intro {
		padding-top: 100px;
		padding-bottom: 80px;
	}
}

@media (min-width: 768px) {
	.timeline .item {
		text-align: left;
	}
}

@media (min-width: 768px) {
	.timeline .item:nth-of-type(odd) {
	 margin-top: 100px;
	}
}

@media (min-width: 768px) {
	.timeline .item:nth-of-type(even) {
	  margin-top: 25px;
	  clear: right;
	  float: right;
	}
}

I like to see media queries located at the bottom of a page, but that is personal preference. I would make a single media query for min-width: 768px as follows:

@media (min-width: 768px) {
	.site-header .main-part {
		padding-top: 60px;
		padding-bottom: 10px;
	}

	.site-header .main-part .matthew h1,
	.site-header .main-part .mullenweg h1 {
		font-size: 36px;
	}

	.site-header .main-part .headshot img {
	  text-align: left;
	}

	.site-header .main-part .headshot {
		margin-bottom: 0;
	}

	.site-header .main-part .headshot img {
	  margin-bottom: -160px;
	}

	.intro {
		padding-top: 100px;
		padding-bottom: 80px;
	}

	.timeline .item {
		text-align: left;
	}

	.timeline .item:nth-of-type(odd) {
	 margin-top: 100px;
	}

	.timeline .item:nth-of-type(even) {
	  margin-top: 25px;
	  clear: right;
	  float: right;
	}
}
#3

Hi @RandellDawson,

Thanks for your feedback!

The placing media queries throughout the code is a habit I’ve picked up whilst working with SASS and how it usually compiles code when using functions for media queries.

I also find that it’s easier to work with, especially on larger code bases. I find that when there is one media query at the bottom of a file, you end up spending a lot of time scrolling up and down switching between the code for mobiles, and the code for larger screens.

Do you know of any performance benefits for only using one instance of a media query as oppose to multiple?

Thanks!