1
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:

Screenshot from Chrome Dev Tool

Andrew
  • 11
  • 3

1 Answers1

1

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.

Frish
  • 1,371
  • 10
  • 20
  • Yes, there was comma initially, I uploaded the wrong image. Please help recheck the new image as the issue still persists. If the write the style from the Dev Tool it works, but when I go back to my styled-components it doesn't. – Andrew Feb 21 '22 at 09:59
  • Hmmm, that is quite bizarre! The only recommendations I have are to triple-check all the basics. Verify that it can work at its most simple (maybe leave out string substitution for now) and go from there... Could you share the raw CSS output from styled-components for this class? From what I can see your syntax is correct, but the results are quite confounding.... – Frish Feb 22 '22 at 00:19