Menu
I'm trying to build a mobile web application using react material ui library.
But it seems the material UI components are not responsive. They display very well on desktop, but when I open it on my mobile browser, the fonts are very small.
Isn't material UI meant to be used to build mobile App? Why it's even not responsive?
400
MUI uses a simplified implementation of the original specification. The breakpoints are used internally in various components to make them responsive, but you can also take advantage of them for controlling the layout of your application through the Grid component.
It is an HTML, CSS & JS framework to make responsive websites that are mobile-friendly and easy to create.
It's another powerful tool in your arsenal as a React developer. If you love mobile-first designs, responsive designs, or if you want your app to scale up and down depending on screen size while retaining its structural integrity, then react-responsive is the package for you.
Responsive layouts in Material Design adapt to any possible screen size. We provide the following helpers to make the UI responsive: Grid: The Material Design responsive layout grid adapts to screen size and orientation, ensuring consistency across layouts. Container: The container centers your content horizontally.
You must add the directive in the section.
Add to your project in which you initiate the application:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
The viewport is the user's visible area of a web page. It varies with the device, and will be smaller on a mobile phone than on a computer screen.
A viewport element gives the browser's instructions on how to control the page's dimensions and scaling.
The width = device-width part sets the width of the page to the screen-width of the device.
The initial-scale = 1.0 part set the first zoom in the browser.
68
you have a index.html file in your public folder.
add this line at the beginning of your <head> tag.
<meta name="viewport" content="minimum-scale=1, initial-scale=1, width=device-width" />
Reference
31
https://material-ui.com/customization/breakpoints/
https://material.io/design/layout/responsive-layout-grid.html#columns-gutters-and-margins
Use the breakpoint like:
<Grid container>
<Grid xs={12} md={6} lg={5} item>
</Grid>
<Grid xs={12} md={6} lg={7} item>
</Grid>
</Grid>
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
