React: Need to set media queries for dropdown elements in React Project, but not sure how to do so with styled components

Question

I have two dropdowns that I need to make responsive so that they move to a centered position instead of running off the page whenever the screen size is smaller than 1024px. I'm also not sure how to go about this using styled components. I've included a Stack Blitz here with my code: https://stackblitz.com/edit/react-t35k77?file=Offers.js

Answer 1

A variety of ways to accomplish this. CSS media queries seem the easiest.

https://www.styled-components.com/docs/advanced#media-templates

Try something like this to get yourself started:

const DropdownRow = styled.div`
  display: flex;

  @media (max-width: 1024px) {
    flex-direction: column;
    justify-content: center;
  }

    th:first-child {
    width: 25%;
  }

  flex: 1;
  align-items: stretch;
  padding: 20px 30px 20px 10px;
  width: 60%;
  margin-left: 42%;
`