CSS grid: putting a period in front of grid-container class breaks media query

Hello all,

This issue is driving me crazy and Google has not produced any results.

I have a basic local site (HTML & CSS have both been validated with no issues). I made a CSS grid for it. Works fine.

When I built the media query, the media query refused to work when screen was resized.

I looked at some other examples online and noticed some people don't put a period in front of their grid-container class in CSS OR in the media query, whereas most people do.

I removed the periods in front of the grid-container class and in the media query, and now it works.

Media Queries for device screen resolution and not browser window resolution?

On my site I have a site-wide media query file named media.css which contains this code:

/* w1920px */
@import url("global.css") only screen and (min-width:1601px);
/* w1600px */
@import url("global_w1600px.css") only screen and (min-width:1361px) and (max-width:1600px);
/* w1360px */
@import url("global_w1360px.css") only screen and (max-width:1360px);

Syndicate content