Grids don't work

Beginners
1

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'; }

.bbq-story { background-color: var(--background); display: grid; grid-template-columns: 1fr 1fr 1fr; grid-template-areas: 'two story guy'; justify-content: center; align-content: center; margin-top: 1rem; padding-top: 1rem; margin-bottom: 6px; }

2

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

3

https://mcgraphics.us/bbq/ menu-grid works, but when I add https://mcgraphics.us/bbq/bbq_specials.html bbq-story—code below—neither grid work.

<section class="bbq-story">
            <div class="two">
                <img class="about-photo" src="imgs/gallery_imgs/bbq_JoeNanette.jpg" alt="hubbie and Nanette"/>
                <div class="approve1">
                    Testimonial 1
                </div>
            </div>
            <div class="story">
                <div class="header">
                    <h1 class="biorhyme-head">BBQ</h1>
                    <h2 class="rokkitt-subhead">Smokes</h2>
                </div>
                <h3 class="started">How BBQ Smokes Started </h3>
                <p class="history">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Vitae sed dolores laudantium nesciunt. Quam recusandae officia nobis perferendis sunt, fugiat nemo eaque maxime consequatur voluptate, assumenda ullam dolores ad, ipsa exercitationem. Aliquid et ad nisi accusantium sed numquam necessitatibus architecto nesciunt praesentium ipsa! Aspernatur quis fugiat iusto temporibus illum exercitationem?</p>
            </div>
            <div class="guy">
                <img class="about-photo" src="imgs/gallery_imgs/bbq_Craig.jpg" alt="guy grilling"/>
                <div class="approve2">
                    Testimonial 2
                </div>
            </div>
        </section>

/* BBQ STORY */
.bbq-story {
    background-color: var(--background);
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-areas: 'two story guy';
    justify-content: center;
    align-content: center;
    margin-top: 1rem;
    padding-top: 1rem;
    margin-bottom: 6px;
}

.header h1 {
    align-self: flex-start;
    justify-self: flex-start;
    padding-top: 0;
    margin-top: 0;
}

.header h2 {
    padding-bottom: 0;
    margin-bottom: 0;
}

.two {
    grid-area: two;
    align-self: flex-start;
    justify-self: flex-end;
}

.story {
    padding: 1rem 3rem;
    color: white;
    font-family: Open Sans, sans-serif;
    background-color: red;
}

.guy {
    grid-area: guy;
    background-color: var(--background);
}

.body-btn {
    font-size: 1.1rem;
    text-decoration: none;
    background-color: red;
    margin: auto;
    margin-bottom: 1rem;
    width: 200px;
    padding: 1rem;
    color: white;
    border-radius: 1rem;
    transition: background-color .5s;
    font-family: rokkitt, serif;
    text-align: center;
    font-size: 3rem;
}

/* END BBQ STORY */
4

Hi @kat,
Again, what do you mean by

If I look at the page with grids turned on, I get this:

image
image1920×1019 166 KB

That is what you are specifying with your CSS, correct?
The upper portion looks like this:

image
image1920×1080 179 KB

Which seems to match your CSS that was posted earlier. What is your expected outcome for them to be “working”?
Cheers,
Bob

1 Like
5

Problem seems to be display: grid;" in .bbq-story`

.bbq-story {
    background-color: var(--background);
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-areas: 'two story guy';
    justify-content: center;
    align-content: center;
    margin-top: 1rem;
    padding-top: 1rem;
    margin-bottom: 6px;
}

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

Screen Shot 2022-03-11 at 11.27.40 AM
Screen Shot 2022-03-11 at 11.27.40 AM1124×771 111 KB

6

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

1 Like
7

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?

Screen Shot 2022-03-11 at 1.40.18 PM
Screen Shot 2022-03-11 at 1.40.18 PM1321×614 97.6 KB

8

When I loaded the URL, the .bbq-story was within the .menu-grid section. Just re-indent the .bbq-story by one.

1 Like
9

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

10

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

1 Like
11

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…

12

The various headlines are fine except that you only want a single h1. As many as you want of the others.

1 Like
13

Clarification please single h1. I thought you had to have an h1 then an h2, then an h3 in exact order, not so?

14

Did you read this bit?

1 Like
15

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:

h1
    h2
        h3
        h3
    h2
        h3
        h3

Make sense?
You just don’t want to have:

h1
    h3
        h2
    h4
    h2
        h6
        h5
    h4

Cheeers,
Bob

16

This is cosmic. I understand.

1 Like