While working on my React project with styled components, I have encountered an issue where media queries are not being applied. Interestingly, the snippet below works perfectly when using regular CSS:
import styled from 'styled-components';
export const Block = styled.div `
margin: 20px;
padding: 10px;
border-radius: 10px;
display: flex;
flex-direction: column;
align-self: center;
background-color: #DAD870;
flex: 1;
min-width: 200px;
height: auto;
transition-duration: 1s;
font-family: sans-serif;
&:hover {
transform: scale(1.1);
}
@media (max-width: 1024px) {
width: 42%;
min-width: 158px;
}
@media (max-width: 480px) {
width: 40%;
min-width: 148px;
}
`;