grid items

[linardzb]

hi,

Im trying to find where is the error in the CSS code below? From the screenshot items are aligned slightly to the left, Im trying to align those in center, it does not seem to work, any advice appreciated.

browser view:
https://i.imgur.com/rbYFKC9.png

Code:

@media(max-width:800px){
    .Header {
        margin: 0 auto;
        padding: 30px 0;
        justify-items: center;
    }

    .HeaderGroup {
        max-width: 60vw;
        margin: 0 auto;
        align-items: center;
        justify-content:space-evenly;
        justify-items: center;
        column-gap: 10px;
    }

    .HeaderGroup a{
        grid-template-columns: repeat(3,auto);
        font-size: 15px;
        justify-self: center;
    }

    .Header a:nth-child(4) {
        display: none;
    }
}

[Paulie_D]

A small Codepen Demo would be ideal here.

We can’t diagnose images.

[linardzb]

Thanks Paulie,

its here:
https://codepen.io/linardsb/pen/XPwxGV

[Paulie_D]

So something like this:

https://codepen.io/Paulie-D/pen/rZEeBx

Mostly I just swapped the link tags (which should be a href and change the column widths to be 1fr not auto…so they will be equal.

[linardzb]

Thank you Paulie,

Unfortunately it did not work out, had to apply padding to the left side of the .Header class in MQ.

Cheers

[Author]

Posts