Экран переполнения компонентов Material-UI только на мобильном

Question

Редактировать : Это единственная страница с проблемами. Другие страницы того же сайта отображаются правильно.

Я создал веб-страницу с React и Material-UI. Верхние компоненты Grid и Container. Это хорошо выглядит на рабочем столе, но в мобильном ... ну ... это сторона экрана:

Там создано дополнительное пространство (светло-серый ) и изображения и карты выходят за пределы максимальной ширины экрана. Заголовок (синий) и фон (голубой) имеют правильную ширину (ширину экрана).

Я использую Grid и Container.

Это root компонент, который содержит карточки:

<Grid
  container
  spacing={0}
  direction="row"
  justify="space-around"
  alignItems="center"
  style={{ minHeight: "20vh" }}
> ....

Это еще один контейнер, который ограничивает ширину:

<Container maxWidth="lg" style={{ marginBottom: "5vh" }}>
  <Paper style={{ padding: 20 }}>
    <Grid
      container
      spacing={0}
      direction="column"
      justify="flex-start"
      alignItems="center"
    > ....

Заголовок, который отображает правильно, это просто AppBar.

Возвращается переполненное изображение вверху:

<div className={classes.heroContent}>
  <Container maxWidth="md" align="center">
    <Grid
      container
      direction="column"
      justify="flex-end"
      alignItems="center"
    > ...

И classes.heroContent:

 heroContent: {
    backgroundImage: `url(${grupo})`,
    backgroundSize: "cover",
    backgroundRepeat: "no-repeat",
    backgroundPosition: "center",
    padding: theme.spacing(8, 0, 8),
    minHeight: "20vh",
  }, ...

Что может быть причиной этого переполнения? Я читал документацию и не могу найти ошибку.

Answer 1

Я решаю это. Там, где две проблемы.

Проблема 1:

Один компонент сетки, который был компонентом root карт, был обозначен как container, но не как item.

Объяснение проблемы 1:

Поскольку карточки находятся внутри Grid родительского компонента, есть также item. После того, как я обозначил все Grid компоненты, которые имели по крайней мере один Grid внутри, как container, а все Grid, которые внутри или внутри контейнера Grid прямо или косвенно как родительский компонент, как item, это почти сработало.

Задача 2:

Сочетание размеров носителей внутри карточек и полей карточек там, где они слишком велики для экрана. Решение состоит в том, чтобы изменить единицы измерения margin и width.

Объяснение проблемы 2:

карты имеют это css сейчас:

cards: {
    margin: "5vw",
    marginBottom: "0vh",
  },
  media: {
    height: "35vh",
    width: "45vw",
  },

Проблема была в единицах. Я использовал margin: '5vh', поэтому поля были рассчитаны в соответствии с высотой порта. В видовых экранах с большей высотой, чем ширина (мобильная), часть высоты была еще больше, чем ширина.