Hi,
I hit a massive stumbling block with my tribute page last year, where I realised my layout was difficult to make responsive without breaking, due to using floats for formatting.
I’ve finally come back to FCC and set out to refactor it and to use grid instead but have really struggled to be able to apply it to my page, even though I had no problems completing the grid exercises here on FCC and got through Grid Garden without a hitch.
It ended up getting me down and has really hindered my progress (I had previously sailed though the Algorithms section and got the certification). I have read dozens of tutorials, forum posts, and have experimented for hours. I don’t usually give up, but for some reason I just can’t seem to solve it.
Please can someone advise me why its not working, and any tips on fixing it?
The old version is at codepen.
I have been working on it via git repository branch while trying to convert it,
and have pasted the current state into this pen for display purposes.
My current goal is to get the basic layout in grid.html to match that of the old version in index.html and working for a large viewport. Once that is done, I will fix the formatting for the poem boxes and japanese text, then use media queries to reformat it into a single column layout for smaller screens.
I have currently tried to achieve this via the following code, however the grid css doesn’t seem to be having any effect at all - I suspect it is something to do with content overflowing the grid areas maybe?
.grid-container {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
grid-template-rows: auto auto auto auto auto auto;
grid-template-areas:
"header header header header header header"
"...... ...... pic pic ...... ......"
"...... intro intro intro intro ......"
"sidebar1 sidebar1 main main sidebar2 sidebar2"
"link-banner ..... ...... ...... ...... ......"
"...... ...... footer ...... ...... ......";
}
and then for mobile will use a media query to have a layout more like
grid-template-areas:
" header "
" pic "
" intro"
" sidebar1"
"main"
"sidebar2"
"link-banner"
"footer";
Perhaps, a two column layout for an intermediate viewport size, if that would work.
I’d be so grateful to anyone who can get me past this hurdle, as I desperately want to get back on top of my study - I really want to work as a developer in the future, and this has really hit my confidence.
Thanks