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
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.
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.
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.
Of course! now that you’ve mentioned it it seems so obvious.