• Empleos
  • Sobre nosotros
  • profesionales
    • Inicio
    • Empleos
    • Cursos y retos
  • empresas
    • Inicio
    • Publicar vacante
    • Nuestro proceso
    • Precios
    • Evaluaciones
    • Nómina
    • Blog
    • Comercial
    • Calculadora de salario

0

157
Vistas
Why are the Styled Component CSS Styles I specified for a larger screen (1440px) overridden those I specified for lower screen(1280px)?
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

about 3 years ago · Juan Pablo Isaza
1 Respuestas
Responde la pregunta

0

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.

about 3 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Nuestro proceso Comercial
Legal
Términos y condiciones Política de privacidad
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recomiéndame algunas ofertas
Necesito ayuda