How to render different components based off device size?

Question

I'm looking to build a responsive app that has a break point at 1024. When a user logs in/signs up, there will be a few questions to be answered.

On mobile, this will be rendered as one question on the screen at a time. The user will then see a sliding transition screen moving them to the next question.

Once the break point is exceeded, all questions will be rendered on the screen simultaneously.

Does anyone know if there are any styling frameworks that work with something like this, or any work-arounds for a conditional render based off pixel width?

This will be a React based app. Currently using foundation for the styling.

Answer 1

You can use CSS media queries that set display: none to create breakpoints for different sizes. Or you can use the React Responsive library to render React Components based on media queries.

css Media Query example (insert this into a .css file and include it into your app):

//Any device with className .loginFeature below 1024px will not be displayed
@media (max-width: 1024px) {
  .loginFeature:{
    display: none;
  }
}

React Responsive Example:

<MediaQuery query="(max-device-width: 1024px)">
  //Insert any components/html here that you want rendered thats below 1024px
</MediaQuery>