Tribute Project (Beatles)

Code Feedback
1

Hi guys, just got some work done on my tribute page.

Tribute for the Beatles

Any feedback or suggestions would be appreciated. Thanks in advance!

1 Like
2

Nice project. I would only change #grid-container in media query to:

@media screen and (max-width: 950px) {
	#grid-container {
		grid-template-columns: repeat(2, 1fr);
		grid-template-rows: repeat(3, 1fr)
	}
}

to make the images responsive on smaller screens.

3

Awesome, thanks for the feedback. I took your advice on the responsive change to fractions and worked like a charm! I going to start using that more often.

4

Sorry. When i copy pasted my code, I forgot to add something to media query:

  .album img {
    max-height: 250px;
  }

to maintain the same ratio for the images.

So the complete changes to the media query are:

#grid-container {
	grid-template-columns: repeat(2, 1fr);
	grid-template-rows: repeat(3, 1fr);
  }
  .album img {
    max-height: 250px;
  }
}

Happy coding :+1: