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.
Related
I am using Ant Design UI in my application. I've searched for results but Google doesn't show me the clearly way for my case.
According the design, I have to build the layout for each of tabs (image).
Could you give me some advises for building this layout? Thank you for your helps!
I need to setup a splash screen that will scale responsively on all native devices like ios, android phones, tablet etc. The splash screen contains the following:
Text Logo name
Activity Indicator https://reactnative.dev/docs/activityindicator
I can see that this guide is among the top search result react-native-splash-screen, but not sure if it scales well on all native devices phone & tablets.
Should I just make a custom screen component and apply react-native-responsive-screen?
Is there a convention/best practice on setting up the splash screen on react native?
To support responsive splash screen or bootsplash, you need add images in differents resolutions, example in Android: mdpi, hdpi, xhdpi,... I currently use react-native-boot-splash it its other option to react-native-splash-screen, this package have a cli tool npx generate-bootsplash to generate bootsplash in differents resolutions in both platforms.
Other hand to add ActivityIndicator only check the example and put ActivityIndicator component below bootsplash wrapped with Animated.Image
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 started working on Mobile First Responsive Design. In mobile, there wont be any sidebar but sidebar is required on desktop so I worked on basic things and then in media query for mobile, hidden that sidebar. Then I needed to make sidebar appear on desktop version of media query.
My question is - How I would have worked on it ?
For the starter, i would like to prefer some basic ideas to build a responsive website:-
Use Layout Flexible
Donot Use tables
Use Media Queries
Use Mobile Viewport Meta Tag
A basic example for a responsive website is that suppose you have a website with content and sidebar which is floated with 70% and 30% width, in mobile or shrink screens, the content panel and sidebar will be width 100% and float none...
That's a simple example for a responsive website...
Rest you can use framework for responsive websites like Twitter Bootstrap or Kendo UI and etc...
I am currently working on drupal responsive theme.For this I am creating my own custom theme.
For making it responsive I have used twitter bootstrap. I have used carousel plugin for slideshow which works well in html.
The images in the slideshow are static that is I have hard-coded there path.But in drupal I want to choose images dynamically as in wordpress or joomla module.
Is it possible? If it is not than is there any slideshow module for drupal which can solve my problem?
Thanks in advance
FlexSlider is an excellent module for this. Unfortunately it's not quite as configurable as Views Slideshow, but Views Slideshow requires hacking to get it responsive as it inserts width/height attributes directly in the DOM.
if I understood right, try to add the "img-fluid" class to the image and don't set the width for any container