I am building a React App for desktop and mobile. When the app is displayed on a desktop. Below is the desktop view that I get.
When the same app is displayed on a mobile, How can I achieve the below mobile views ? I am looking on some pointers on the modules and some guidance on how I can achieve this ?
Do I hide and unhide components ?
How can I link the navigation and the components ?
You have to play with the #media of css to achieve it, and so it deployed the informations of a doctor when it s clicked.
It will be the most simple way to do it
Related
I am working on a react web app where our clients can customize their app icon which should also get displayed on their phone's home screen if they want to add the app to their home screen. Currently it always displays the apps default favicon icon even tho I am overwriting it when the client customizes it. I can also see in the browser tab that i successfully overwrote the favicon. Any ideas how to solve that? Thank you very much!
Sounds like you're talking about Progressive Web Apps with the add to home screen feature -- might be a duplicate of How can I update home screen icon of my Progressive Web App?
enter image description here
I make this web app using react.js and I tried very much to do Responsive for mobile devices but I couldn't, any one solve this problem please.
I used useMediaQuery from material ui which helps very much in creating responsive site.
Here is the documentation for it.
After then for displaying responsive components
You can create new components that are fit to that window size
You can use states for toggling for the different window sizes
And then you can import them as you want.
I am using React Js for web development and for the Login component I am using Modal, because of the design I have to change the modal into part of the web (not modal or full screen modal with header) in Mobile version (less than 560px), I think I can use window.innerwidth to check if web is opened in mobile or not and depending on whether it mobile, Modal or Component will be shown. but is it Correct way? There are many responsive websites that requires has modal but not modal on mobile version. How they have solved this problem?
Thank you
I was wondering if anyone knew what it is called when you have a sidebar nav with a collapsible drawer and main panel layout? I see this pattern everywhere now I wanted to find a tutorial on how to implement it in react or electron but all the results I get are for some other type of sidebar. This pattern is used in desktop electron-based apps like slack, vs code and microsoft teams and web apps like jira use it as well.
Okay you can use the Paper component in the the material ui framework.
docs here
I am currently using react-responsive on my website so I can render a different markup on mobile vs desktop. My problem is pre render is only rendering the desktop version and Google mobile usability tool detects our site as not mobile friendly. Thank you!