Company logo
  • Empleos
  • Bootcamp
  • Acerca de nosotros
  • Para profesionales
    • Inicio
    • Empleos
    • Cursos y retos
    • Preguntas
    • Profesores
    • Bootcamp
  • Para empresas
    • Inicio
    • Nuestro proceso
    • Planes
    • Pruebas
    • Nómina
    • Blog
    • Calculadora

0

69
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

7 months 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.

7 months ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos