CODEWITHSUNDEEP
reactjsstyled-components
bier hier
bier hier

Reputation: 22520

How to implement a mediaquery inside styledcomponents?

I have a reactcomponent that should have a mediaquery:

const CalloutsContainer = styled.div`
@media (min-width: 900px) {
    display: flex;
    justify-content: space-between;
}
`;

The beginning of the component looks like this:

<CalloutsContainer>
        <Container>
          <CallOut>
            <h4>Feature 1</h4>
            <p>
            ...

Unfortunately I can't get it to work: the columns are displayed in rows instead of columns. How can I get the mediaquery working? codesandbox

Upvotes: 0

Views: 32

Answers (1)

Meir
Meir

Reputation: 14375

You should either apply the style to the Container (not the CalloutContainer) or remove it. Note that CalloutContainer has a single child so your flex modifications will not make a difference.

Alternatively, you can further nest your rule:

@media (...) {
  > * {
    display: flex;
  }
}

Upvotes: 1

Related Questions