import styled from "styled-components";
import { devices } from "./devices";
export const HeaderContainer = styled.div`
padding: 20px;
@media ${devices.lg} {
padding: 40px 90px;
}
@media ${devices.xl} {
padding: 40px 215px 40px 150px;
}
@media ${devices.xxl} {
padding: 40px 150px;
}
`;
Also, it occurs in other components. Especially on Screens 1440px and 1280px.
This is what is seen, as indicated by the image below using the Chrome Dev Tool:
In your screenshot, you are receiving an invalid property value warning for the below:
@media ${devices.xl} {
padding: 40px 215px, 40px, 150px;
}
There should be no commas, as in the code you have shared in the snippet. If there are no commas in your code, perhaps a restart of the development server or a clear browser cache will solve your issue as it looks like it simply hasn't updated.