Troubleshoot Grid in tribute page

Troubleshoot Grid in tribute page
0

#1

This is my tribute page project. I already got it to pass all of the tests, but I couldn’t make it look good on mobile. I use grid on the info area to make it responsive, and it works, but it doesn’t look right.

Does anyone know what I need to change to make the info fill the entire width of the area in mobile view?

Like I said the project has already passed. I just want to understand what I did wrong here. Any help is appreciated


#2

I see the ul items get shrink in terms of width, maybe you can try making the #tribute-info as display:block instead of grid in smaller screens, eventually everything is going to be stacked in smaller screens, therefor display:block makes them occupy the entire width, so grid maybe not be necessary at this point.


#3

That did the trick, thank you! Do you have any idea why that was occurring when I was using grid? I just want to understand what’s happening.


#4

Grid is fine, i think now you have altered your structure, you had set #tribute-info with grid-template-columns: 1fr 1fr, which had only one ul element initially, so what it does is, it gives the ul a 1fr space and the other 1fr space will be occupied by empty space, therefore it looks shrink. you could have adjusted it by giving the grid-template-column: 1fr, this is another workaround.


#5

Of course! now that you’ve mentioned it it seems so obvious.