CODEWITHSUNDEEP
reactjsmaterial-ui
Ben
Ben

Reputation: 6086

Material-UI - responsive grid does not resize on mobile width

Im struggling to get a page width to resize correctly using material-ui's "xs" fluid grid i.e. a responsive view for mobile.

With a larger page width ("sm" size), my test is rendered with the expected padding however when I reduce the screen size to ~<700 px, the height of the card does not grow and the edge of the text is lost.

Here is an example with the padding on either side of the text:

enter image description here

When I shrink the screen width, the padding is not enforced and the paper height does not grow, hence the text on the right is hidden:

enter image description here

Here is my example code:

import React from 'react';
import PropTypes from 'prop-types';
import {withStyles} from '@material-ui/core/styles';
import Grid from '@material-ui/core/Grid';
import Paper from '@material-ui/core/Paper';

const styles = (theme) => ({
  root: {
    flexGrow: 1,
    padding: 20
  }
});

class Test extends React.Component {
  render() {
    const {classes} = this.props;

    return (
      <div className={classes.root}>
        <Grid container spacing={24}>
          <Grid item xs={12} sm={12}>
            <Paper>
              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
              dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
              ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
              fugiat nulla pariatur.
            </Paper>
          </Grid>
          <Grid item xs={12} sm={12}>
            <Paper>
              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
              dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
              ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
              fugiat nulla pariatur.
            </Paper>
          </Grid>
        </Grid>
      </div>
    );
  }
}

export default withStyles(styles)(Test);

Can anyone advise how to get the width to correctly resize with the smaller screen width?

Upvotes: 1

Views: 1580

Answers (1)

Ben
Ben

Reputation: 6086

Ah my bad. Embarrassingly I was setting a min-width elsewhere in the project css.

Thanks to @Ryan Cogswell for the comment, the lesson is test in a vanilla environment ;)

Upvotes: 2

Related Questions