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.
Thank you!!
To hide elements simply use the . d-none class or one of the . d-{sm,md,lg,xl,xxl}-none classes for any responsive screen variation.
In React, you can create distinct components that encapsulate behavior you need. Then, you can render only some of them, depending on the state of your application. Conditional rendering in React works the same way conditions work in JavaScript.
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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With