Grid button & bkgnd color

[kat]

1. How do I make each grid-area background-color the same width?
2. box1 .order-btn is centered. But why the smoke background-color behind the red button?
3. Why can’t I center box2 & box3 <button> that don’t have <a>?

<section class="cater" id="cater">
        <div class="cater-head">
            <h2>BBQ Smokes</h2>
            <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Animi iste harum provident! Illo, commodi. . 
            </div>
            <div class="box1 box">
                <div class="box-head">Family Meals</div>
                <ul>
                    <li>Breakfast, lunch, dinner</li>
                    <li>Pick up or delivery</li>
                    <li>Pre-order for faster service</li>
                </ul>
                <button><a class="order-btn" href="#">Order Now</a></button>
            </div>
            <div class="box2 box">
                <div class="box-head">Catering</div>
                <ul>
                    <li>Parties and Special Occasions</li>
                    <li>Pick up or delivery</li>
                    <li>Pre-order for faster service</li>
                </ul>
                <button class="order">Call to Order</button>
            </div>
            <div class="box3 box">
                <div class="box-head">Special Events</div>
                <ul>
                    <li>Events throughout the year</li>
                    <li>Holiday Events</li>
                    <li>Food &amp; Music in Monterey Park &amp; El Monte</li>
                </ul>
                <button class="mailing">Follow us</button>
            </div>
        </section>

.cater {
    background-color: palegoldenrod;
    display: grid;
    align-items: start;
    justify-items: center;
    margin-top: 1rem;
    padding-top: 1rem;
    grid-template-rows: auto 1fr;
    grid-template-columns: minmax(300px, 1fr) 1fr minmax(200px, 1fr);
    grid-template-areas: 'cater-head cater-head cater-head' 'box1 box2 box3';
}

.cater-head p {
    color: black;
    font-family: Open Sans, sans-serif;
    text-align: center;
    padding-bottom: 1rem;
    font-size: 1rem;
}

.cater-head h2 {
    font-family: BioRhyme, serif;
    font-weight: 400;
    color: red;
    margin: 3px 0;
    text-align: center;
    font-size: 1.5rem;
}

.box {
    color: black;
}

.box-head {
    font-family: Rokkitt, serif;
    font-size: 3rem;
    color: #222;
}
.box1{
    grid-area: box1;
    background-color: aqua;
}
.box2{
    grid-area: box2;
    background-color: peru;
}
.box3{
    grid-area: box3;
    background-color: palegreen;
}
.order-btn{
    display: inline-block;
    padding: .5em;
    margin: 0 3em;
    color: white;
    background: red;
    border-radius: .5em;
    text-decoration: none;
    left: 0px;
    font-family: rokkitt, serif;
    font-size: 2em; 
}

[RobM]

Hi @kat

@kat

How do I make each grid-area background-color the same width?

If you add a width to your .box rule it will apply to all of them. Maybe width: 100%?

@kat

box1 .order-btn is centered. But why the smoke background-color behind the red button?

DevTools is your friend! If you look you can see that the “button” isn’t red. the link (<a>) inside the button has a red color because of your .order-btn rule set. The button element has a grey color from the browser’s internal stylesheet. I’m surprised that the normalize.css doesn’t nuke that.

@kat

Why can’t I center box2 & box3 <button> that don’t have <a> ?

So, you state that the button is centered for box1, but it is actually the link that is center due to adding equal margin to the left and right sides and that forcing box1 to be larger than it would normally be from the content. I guess I would wrap the buttons with a full width div and then use flex to center.

Hope this helps,
Bob

[kat]

1 & 3 worked perfectly : )

The button element has a grey color from the browser’s internal stylesheet.

2. Clarification please. Can’t figure out what to do, or find the grey color for the button in Dev Tools.
   
   

How do I make the grid colors the same height?

[RobM]

Hi @kat,

Here is what I mean about no. 2.

If you examine the page with the DevTools in Pinegrow or the browser and highlight the <button>, then scroll down in the ‘Styles’ tab you can see that the ‘user agent style’ (tech speak for the browser built-in styles) adds the background-color. If there are a lot of rules you can look in the ‘Computed tab’.

That will show you all of the potential rules, along with which one “won”.

To get the colors to fill the grid, I would probably add an explicit height to the .box rule of 100%.

Have you checked the background color on larger screens?

Cheers,
Bob

[kat]

I selected the button then tried Styles, cls, Computed, but still can’t find button background color in Dev Tools.
All I found was button:-moz-focusring, [type="button"]:-moz-focusring, [type="reset"]:-moz-focusring, [type="submit"]:-moz-focusring { outline: 1px dotted ButtonText;
Could I do
button {
background-color: none;}