Begin on media Queries

Hi everyone I realise this https://codepen.io/alpha_66/pen/JojNMGJ?editors=1100 for media queries I realize this

@media screen(max-width:1024px){

.content{
    display:grid;
    grid-template-areas:"first two"
                        "three four";
    grid-template-columns:repeat(2 ,1fr);
    grid-template-rows:repeat(2 ,1fr);
}

.first{
    grid-area: first;
}

.two{
    grid-area:two;
}

.three{
    grid-area:three;
}

.four{
    grid-area:four;
}

.middle{
    visibility: hidden;
}

.right{
    visibility: hidden; 
}
}

@media screen(max-width:1024px){

.content{
    display:grid;
    grid-template-areas:"first two"
                        "three four";
    grid-template-columns:repeat(2 ,1fr);
    grid-template-rows:repeat(2 ,1fr);
}

.first{
    grid-area: first;
}

.two{
    grid-area:two;
}

.three{
    grid-area:three;
}

.four{
    grid-area:four;
}

.middle{
    visibility: hidden;
}

.right{
    visibility: hidden; 
}
}

something is going wrong can I have some help please

Patrick L

CodePen

Untitled

...

7 Replies

ἔρως•2mo ago

the codepen is empty

Pat66OP•2mo ago

thanks your message now I save the codepen

Mannix•2mo ago

@media screen and (max-width: 1024px)

ἔρως•2mo ago

"screen" isnt needed, unless you want to exclude it from other devices, for some reason dont use that reset, please stop nuking all the margins with that said, i dont see any media queries in your code you are also overcomplicating anyways just use grid-column-template and set it to 1fr 1fr for the smaller size and 1fr 1fr 1fr 1fr for the larger size you dont need anything else

Chris Bolson•2mo ago

As Epic says, from the looks of things you don't need to define grid areas. However, if there is a reason to use them, they wouldn't normally be defined within the media query. The names should be defined at a base level and not be changed. Then just the grid-template-areas assignation would change within the media query as required.

ἔρως•2mo ago

it's just to change from 4 to 2 columns easily done without grid areas and for very very small sizes, you dont even need grid

Pat66OP•2mo ago

thanks a lot everyone

Gaming

Programming

Begin on media Queries

Did you find this page helpful?