- This topic is empty.
Viewing 5 posts - 1 through 5 (of 5 total)
Viewing 5 posts - 1 through 5 (of 5 total)
- The forum ‘CSS’ is closed to new topics and replies.
The forums ran from 2008-2020 and are now closed and viewable here as an archive.
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;
}
}
A small Codepen Demo would be ideal here.
We can’t diagnose images.
Thanks Paulie,
its here:
https://codepen.io/linardsb/pen/XPwxGV
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.
Thank you Paulie,
Unfortunately it did not work out, had to apply padding to the left side of the .Header
class in MQ.
Cheers