Why isn't responsive grid stacking items?

Question

I'm trying to create a responsive page where the element stack upon each other when viewed on a mobile device however instead of stacking they keep aligning side by side. How could I stack them?

I've tried messing with the spacing and padding but that didn't seem to help. I also looked into adjusting the flexgrow values but that didn't work either. Here's my code:

<Grid container justifyContent="center" alignItems="center" flexGrow={1}>
        <Box sx={homeStyle.main}>
          <Box sx={homeStyle.blueBox}>
            <Box sx={homeStyle.noBeneAvailText}>
              Register
            </Box>
            <Box sx={homeStyle.noBeneAvailDetailText}>
              Information About you
            </Box>
            <Grid container spacing={2}>
              <Grid item xs={6}>
                <TextField
                  variant="outlined"
                  id="first-name-input"
                  label="First Name"
                  defaultValue=""
                  fullWidth
                />
              </Grid>
              <Grid item xs={6}>
                <TextField
                  variant="outlined"
                  id="last-name-input"
                  label="Last Name"
                  fullWidth
                />
              </Grid>
            </Grid>
            <Grid container spacing={2}>
              <Grid item xs={6}>
                <TextField
                  variant="outlined"
                  id="phone-number-input"
                  label="Phone Number"
                  defaultValue=""
                  fullWidth
                />
              </Grid>
              <Grid item xs={6}>
                <TextField
                  variant="outlined"
                  id="email-input"
                  label="Email Address"
                  fullWidth
                />
              </Grid>
            </Grid>
          </Box>
        </Box>
     </Grid>

const homeStyle = {
  updateInfoText: {
    //color: "#FFFFFF",
    fontFamily: "Roboto",
    fontStyle: "bold",
    fontWeight: 800,
    fontSize: "14px",
    lineHeight: "20px",
    textAlign: "center",
    letterSpacing: "0.1px",

  },

  updateInfoButton: {
    display: "flex",
    flexDirection: "column",
    justifyContent: "center",
    alignItems: "center",
    alignSelf: "center",
    py: "10px",
    px: "24px",
    // gap: "10px",
    width: { lg: "540px", md: "666px", xs: '311px' },
    height: "40px",
    mt: "15px",
    backgroundColor: "#3C4FB9",
    color: 'white',
    borderRadius: "100px",
    flex: "none",
    order: 2,
    flexGrow: 0,
    '&:hover': {
      backgroundColor: '#9BA5DF',
      color: '#36414E',

    }
  },
  noBeneAvailDetailText: {
    width: { lg: "740px", md: "666px", xs: '311px' },
    fontFamily: "Roboto",
    fontStyle: "normal",
    fontWeight: 400,
    fontSize: "16px",
    lineHeight: "24px",
    textAlign: "left",
    alignItems: "center",
    color: "#56677B",
    flex: "none",
    alignSelf: "stretch",
    flexGrow: 0
  },

  noBeneAvailText: {
    width: { lg: "740px", md: "666px", xs: '311px' },
    height: "32px",
    fontFamily: "Roboto Slab",
    fontStyle: "normal",
    fontWeight: 500,
    fontSize: "24px",
    lineHeight: "32px",
    textAlign: "left",
    alignSelf: "stretch",
    color: "#252D36",
    flex: "none",
    flexGrow: 0
  },

  benefitsAvaillibilityTextFrame: {
    display: "flex",
    flexDirection: "column",
    alignItems: "center",
    textAlign: "center",
    padding: "0px",
    gap: "12px",
    width: { lg: "740px", md: "666px", xs: '311px' },
    height: { lg: "92px", md: "92px", xs: '140px' },
    flex: "none",
    order: 2,
    alignSelf: "center",
    flexGrow: 0,
  },



  blueBox: {
    display: "flex",
    flexDirection: "column",
    alignItems: "center",
    //alignSelf: "center",
    // justifyContent: "center",
    pt: { lg: "52px", md: "52px", sm: "39px", xs: '24px' },
    pr: { lg: "52px", md: "52px", sm: "39px", xs: '16px' },
    pb: { lg: "52px", md: "52px", sm: "39px", xs: '24px' },
    pl: { lg: "52px", md: "52px", sm: "39px", xs: '16px' },
    gap: { lg: "32px", md: '32px', sm: "32px", xs: '20px' },
    width: { lg: "544px", md: '770px', sm: "500px", xs: '343px' },
    height: { lg: "750px", md: '750px', sm: "700px", xs: '783px' },
    background: "#F5F7FF",
    borderRadius: "8px",
    flex: "none",
    order: 1,
    alignSelf: "center",
    flexGrow: 0,

  },

  welcomeText: {
    width: { lg: "626px", md: '770px', xs: '343px' },
    height: { lg: "44px", md: '38px', xs: '32px' },
    fontFamily: 'Roboto Slab',
    fontStyle: "normal",
    fontWeight: 500,
    fontSize: { lg: "36px", md: '30px', xs: '24px' },
    lineHeight: { lg: "44px", md: '38px', xs: '32px' },
    textAlign: "center",
    letterSpacing: "-0.02em",
    color: "#252D36",
    flex: "none",
    order: 0,
    alignSelf: "center",
    flexGrow: 0,

  },
  main: {
    display: "flex",
    flexDirection: "column",
    alignSelf: "center",
    alignItems: "center",
    pt: { lg: "90px", md: '40px', sm: "32px", xs: '32px' },
    pr: { lg: "407px", md: '32px', sm: "16px", xs: '16px' },
    pb: { lg: "80px", md: '40px', sm: "32px", xs: '32px' },
    pl: { lg: "407px", md: '32px', sm: "px", xs: '16px' },
    gap: { lg: "40px", md: '32px', sm: "32px", xs: '20px' },
    width: { lg: "1000", md: '834', xs: '375' },
    height: { lg: "888", md: '1100', xs: '942' },
    background: "#FFFFFF",
    flex: "none",
    order: 1,
    flexGrow: { lg: 1, md: 0, xs: 0 },

  },
  container: (theme) => ({
    display: "flex"
  }),
  item: (theme) => ({
    border: "1px solid blue"
  }),
  itemFlexGrow: (theme) => ({
    flexGrow: 1,
    border: "1px solid red"
  })

Currently, it looks like this:

Answer 1

I think you need to set the xs which preset the width of the grid in the x-small screen like mobile to 12 to take the full width.

<Grid container spacing={2}>
              <Grid item xs={12}>
                <TextField
                  variant="outlined"
                  id="first-name-input"
                  label="First Name"
                  defaultValue=""
                  fullWidth
                />
              </Grid>
              <Grid item xs={12}>
                <TextField
                  variant="outlined"
                  id="last-name-input"
                  label="Last Name"
                  fullWidth
                />
              </Grid>
            </Grid>
            <Grid container spacing={2}>
              <Grid item xs={12}>
                <TextField
                  variant="outlined"
                  id="phone-number-input"
                  label="Phone Number"
                  defaultValue=""
                  fullWidth
                />
              </Grid>
              <Grid item xs={12}>
                <TextField
                  variant="outlined"
                  id="email-input"
                  label="Email Address"
                  fullWidth
                />
              </Grid>
            </Grid>