Search code examples
htmlcssmedia-queries

media query is not respecting my grid template

newbie here. I want the web to be responsive, so apply a media query so the damned thing stacks the paragraphs one top of the the other.

This is the CSS:

.services{
    display: grid; 
    column-gap: 1rem;
}

@media (min-width: 480px) {
    grid-template-columns: repeat(3, 1fr);
}

This is what I want it to do:

enter image description here

I want the sections to stack one on top of the other, but this is what the damned thing does:

enter image description here

When I apply the media query I get this error message in the VS console:

"code": "css-lcurlyexpected",
"severity": 8,
"message": "{ expected",
"source": "css",

I've been writing and rewriting the same lines over and over for the past 2hours... I'm a newbie, please don't be so harsh :)

Solution

  • You have errors in your porgram.

    @media (min-width: 480px) {
    grid-template-columns: repeat(3, 1fr);
}

    This part of the program is wrong. you are defining the media query but not the class to which this property should be assigned. remove this part of program with the code below:

    @media (min-width: 480px) {
    .services{
        grid-template-columns: repeat(3, 1fr);
    }
}