Why can't i make this page responsive? (FCC Tribute page project)

HTML-CSS
1

This tribute page is my first FCC project, even though i have passed all the tests on this page, it’s is not responsive at all. I used CSS grid method to make this page, but all the paragraphs overflows out of it’s container when screen size decreases and image gets too small. Please check it and point out my mistakes!

Project link: https://codepen.io/scndev/pen/xxVgjXg?editors=1100

2

Hello,

You will have to decide and describe in css what your page layout should look like on smaller screens, use media queries.
The most common approach to small screens layout is making it one column, you could do smth like this:

@media only screen and (max-width: 600px){
	#tribute-info{
	  padding: 10px;
	  grid-template-columns: 1fr;
	  grid-template-areas: "contents"
	    "image"
	    "intro"
	    "container";
	}
}

for title bg image you could set it’s size to cover and center it with background position, percentage sizes can be tricky
Also for your lists you could add padding for readability and set list-style-type:none or list-style-position : inside

Not sure what’s you plan for image…

1 Like
3

Thanks, i’ll give it a try

4

Guess i must add couple more comments

  1. you chose pretty complex layout for a beginner, and there are multiple issues
  2. when i mentioned image i meant #title-cover background
  3. i took a closer look at your code and for some reason your grid elements are outside grid div (#tribute-info), don’t think it’s going to work
  4. to make it easier to test small fixes and or see what makes element look the way they are you can use chrome dev tools, if you’re on win f12
  5. you can try to limit min-width with body { min-width:400px; } this may cause issues on mobile …
  6. https://validator.w3.org/nu/#textarea can help you fix your HTML
  7. #tribute-info{ grid-template-rows: repeat(auto, auto);} dont think this is valid . repeat() mdn, grid-template-rows w3schools
1 Like
5

Thanks buddy, you were great help!

1 Like
6

Cool, was happy to help!

And hope I managed to make it clear that this is not an exhaustive list of possible fixes :upside_down_face:

1 Like