I’ve been trying to fix BBQ Smokes menu-grid and bbq-story grids in PG and VSC. I’ve rewatched PG grid tutorials, but am getting nowhere.
Both are 3 column area grids. Getting media queries to responsive single columns didn’t work either.
Help please. .menu-grid { background-color: #252525; display: grid; align-items: start; justify-items: center; margin-top: 1rem; padding-top: 1rem; grid-template-rows: auto 1fr 1fr; grid-template-areas: 'gallery1 intro gallery2' 'gallery1 menu gallery2'; }
Hi @kat,
What isn’t working? It is a little hard to troubleshoot from a small snippet of CSS. I can see the grid areas showing up in the order you list.
Cheers,
Bob
And the menu-grid top menu has more space at the left as the page gets larger.
Goal is for both grids to be 3 columns centered.
bottom grid should look like the screen shot you posted, and be the same column sizes as the menu grid above, screenshot below
Hi @kat,
By quick glance, I’m pretty sure your HTML is malformed. Your entire .bbq-story is inside your .menu-grid. This forces the first section to become enlarged.
Cheers,
Bob
bbq-story wasn’t inside menu-grid in the PG tree. But I “outdented” bbq-story in PG which did separate the grids. But now bbq-story line up with the body tag. What is going on here?
That worked, but gosh was troubleshooting tough. Got any troubleshoot tips tutorials? Thanks for hanging in there with me.
Here is it better to use sections rather than divs or something else, e.g., below?
header - navbar stuff
section - hero stuff
section - menu stuff
section - story stuff
footer
No real trouble-shooting tips or tutorials. For me it just comes from years of putting together pages.
The HTML structure you outline above isn’t bad at all. It is using semantic elements to divide the page.
If you look at the BBQ page, it is divided up pretty well. However, I see that you are using an H1 tag multiple times. Remember that the various heading levels are to give the content meaning - they aren’t for styling the text. Both screen readers and search engines use the headings to “understand” your page. There has been a push to adopt the use of a heading cascade for each section, but not yet.
Cheers,
Bob
That’s a big help. Thanks for the help and for saying, “If you look at the BBQ page, it is divided up pretty well.” Makes me feel like I’m learning. I’ll cut back on the h1, h2, h3…
Hi @kat,
So when a screen reader or search engine “looks” at your page they report back what the page is about from your h1. Yes, you want a hierarchy to the rest, but a section can have an h2 at the top and then multiple h3 for sub-headings. So, each section can have an h2 - like this: