Why isn't the @media query working here? how to fix it? What's wrong with the media queries?
const Size = {
laptop: "1024px",
laptopL: "1440px"
}
const Device = {
laptop: `only screen and max-width: ${Size.laptop}`,
laptopL: `only screen and max-width: ${Size.laptopL}`,
};
const GlobalStyle = createGlobalStyle `
body{
background: url(${BackgroundImage}) no-repeat center center/100% 100% fixed;
}
@media ${Device.laptop} {
body{
background-size: cover;
}
}
`;
You need round brackets around your max-width and pixel size. Try this:
const Device = {
laptop: `only screen and (max-width: ${Size.laptop})`,
laptopL: `only screen and (max-width: ${Size.laptopL})`,
};