Задать вопрос
@prolina
css

Проблемы с шириной блоков?

<main>
        <section  id="main_section1" className={style.main_section}>
          <div className={style.inner}>
            <div className={style.copy}>
              <h1 className={style.main_title}>
                ...
              </h1>
            </div>
          </div>
        </section>
        <section id="main_section3" className={style.content}>
          <div className={style.inner}>
            <div className={style.inner_content}>
              <div data-aos="fade-right" className={style.ingredients_item}>
                <div className={style.inner_content_image}>
                  <img className={style.ingredients_image} src={rice} />
                </div>
                <div className={style.inner_content_info}>
                  <p className={style.inner_content_info_title}>Рис</p>
                  <p className={style.inner_content_info_text}>
                    В рисе содержатся восемь жизненно важных для человека
                    аминокислот, без которых невозможно создание новых клеток.
                    7-8% рисовых зерен составляют белки. ....
                  </p>
                </div>
              </div>

              <div data-aos="fade-left" className={style.ingredients_item}>
                <div className={`${style.inner_content_image} ${style.row2}`}>
                  <img className={style.ingredients_image} src={kukuruza} />
                </div>
                <div className={style.inner_content_info}>
                  <p className={style.inner_content_info_title}>Кукуруза</p>
                  <p className={style.inner_content_info_text}>
                    Кукуруза считается одной из самых популярных растительных
                    культур. .......
                  </p>
                </div>
              </div>

              <div data-aos="fade-right" className={style.ingredients_item}>
                <div className={style.inner_content_image}>
                  <img className={style.ingredients_image} src={grechka} />
                </div>
                <div className={style.inner_content_info}>
                  <p className={style.inner_content_info_title}>Гречка</p>
                  <p className={style.inner_content_info_text}>
                    Существует мнение о том, что гречка – это зерно. На самом
                    деле, это семена растения, которое имеет больше сходств с
                    ревенем, чем с пшеницей.....
                  </p>
                </div>
              </div>

              <div data-aos="fade-left" className={style.ingredients_item}>
                <div className={`${style.inner_content_image} ${style.row2}`}>
                  <img  className={`${style.ingredients_image} ${style.image_psheno}`} src={psho} />
                </div>
                <div className={style.inner_content_info}>
                  <p className={style.inner_content_info_title}>Пшено</p>
                  <p className={style.inner_content_info_text}>
                    Пшено неспроста называют золотой крупой. Дело не только в
                    солнечном оттенке, но и в полезных свойствах, которые для
                    культуры такой доступной категории действительно на вес
                    золота......
                  </p>
                </div>
              </div>

              <div data-aos="fade-right" className={style.ingredients_item}>
                <div className={style.inner_content_image}>
                  <img className={style.ingredients_image} src={len} />
                </div>
                <div className={style.inner_content_info}>
                  <p className={style.inner_content_info_title}>Лен</p>
                  <p className={style.inner_content_info_text}>
                    Набор уникальных аминокислот, витаминов, клетчатка и жирные
                    кислоты делают семя льна уникальным диетическим средством,
                    которое находит применение в разных сферах — оздоровлении,
                    правильном питании, кулинарии и косметологии.
                  </p>
                </div>
              </div>

              <div data-aos="fade-left" className={style.ingredients_item}>
                <div className={`${style.inner_content_image} ${style.row2}`}>
                  <img className={`${style.ingredients_image} ${style.image_kor}`} src={kor} />
                </div>
                <div className={style.inner_content_info}>
                  <p className={style.inner_content_info_title}>Корица</p>
                  <p className={style.inner_content_info_text}>
                    Корица - специя, которая по популярности не уступает ни
                    одной другой в кулинарии. .........
                  </p>
                </div>
              </div>

              <div data-aos="fade-right" className={style.ingredients_item}>
                <div className={style.inner_content_image}>
                  <img className={style.ingredients_image} src={stev} />
                </div>
                <div className={style.inner_content_info}>
                  <p className={style.inner_content_info_title}>Стевия</p>
                  <p className={style.inner_content_info_text}>
                    Заменитель сахара обладает минимальной калорийностью (18
                    ккал) и гликемическим индексом, равным 0. ......
                  </p>
                </div>
              </div>
            </div>
          </div>
        </section>
      </main>

.main_title {
  font-size: 70px;
  color: white;
  font-family: 'Marck Script';
  position: absolute;
  left: 50%;
  word-spacing: 25px;
  letter-spacing: 2px;
}
.inner {
  min-height: 100vh;
  position: relative;
}
.inner_content {
  max-width: 1200px;
  margin: 0 auto;
}
.ingredients_item {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.copy {
  position: absolute; 
  top: 50%;  
  margin-top:-5em; 
  width: 100%;
}  
.inner_content_info_title {
  font-size: 30px;
  text-transform: uppercase;
  font-weight: bold;
  font-family: 'Montserrat';
}
.inner_content_info {
  align-self: end;
}
.ingredients_item:nth-child(2n) .inner_content_info_title::after {
  content: " ";
  display: block;
  position: absolute;
  height: 2px;
  background: black;
  width: 800px;
}
.ingredients_item:nth-child(2n+1) .inner_content_info_title::after {
  content: " ";
  display: block;
  position: absolute;
  height: 2px;
  background: black;
  width: 800px;
  left: 34%; 
} 
.image_kor {
  width: 500px;
}
.image_psheno {
  width: 450px;
  height: 450px;
}
.ingredients_item:nth-child(2n+1) .inner_content_info_title {
  text-align: end;
}
.ingredients_item:nth-child(2n+1) .inner_content_info_text {
  text-align: right;
}
.inner_content_info_text {
  font-size: 22px;
}
.row2 {
  order: 2;
  text-align: right;
}
.ingredients_image {
  width: 400px;
  height: 400px;
}
.main_section {
  background: url(../../images/main1.jpg);
  background-size: cover;
  background-attachment: fixed;
}

@media screen and (max-width: 639px) {
.main_section {
  background-position-x: 78%!important;
}
.ingredients_item {
  grid-template-columns: 1fr;
}
.ingredients_item:nth-child(2n) .inner_content_info_title::after {
  content: " ";
  display: block;
  position: absolute;
  height: 2px;
  background: black;
  width: 100%;
  left: unset;
}
.ingredients_item:nth-child(2n+1) .inner_content_info_title::after {
  content: " ";
  display: block;
  position: absolute;
  height: 2px;
  background: black;
  width: 100%;
  left: unset;
}
.ingredients_image {
  width: 100%;
  height: 100%;
}
.image_kor {
  width: unset;
}
.inner_content_info {
  align-self: center;
}
.row2 {
  text-align: center;
  order: unset;
}
.ingredients_item:nth-child(n) .inner_content_info_text {
  text-align: center;
}
.ingredients_item:nth-child(n) .inner_content_info_title {
  text-align: center;
}
.main_title {
  font-size: 40px;
  left: unset;
}
}

Почему при просмотре в инструментах разработчика для Galaxy S5 и в целом для маленьких экранов, справа такое первый section
5d29a588de19d696550229.png
второй section
5d29a5a4d7247016633546.png
Проверяла ширину каждого блока - всё нормально. Если удаляю #main_section3 - всё гуд.
  • Вопрос задан
  • 55 просмотров
2 комментария
Подписаться 2 Простой 2 комментария
Решения вопроса 1
hisbvdis
@hisbvdis
Ощущение, что проблема в смещенных на 100 пикселей вправо элементах класса "fade-left".
Если им отключить свойства трансформации, скролл пропадает

-webkit-transform: translate3d(100px,0,0);
transform: translate3d(100px,0,0);


P.S. После постепенного листания сайта в самый низ, наступает момент, когда скролл тоже пропадает. Предположил, что из-за того, что все элементы "приехали" на своё место.

UPD: В общем, если для "#main_section3" задать "overflow: hidden", проблема решается.

5d29d356c9fed474501375.png
Ответ написан
1 комментарий
1 комментарий
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
JavaScript разработчик
вАйТи
от 5 000 до 25 000 ₽
Trainee - IT Support
move2usajobs.com LLC • Лос-Анджелес
от 2 000 до 4 000 $
React разработчик
Uptrade
от 150 000 до 200 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Необходимо сверстать приложение согласно макету Figma используя React
26 апр. 2024, в 22:22
1500 руб./за проект
Написать модуль подключения матрицы Sony к ПЛИС (Verilog)
26 апр. 2024, в 21:30
15000 руб./за проект
8266 f12 требуется сделать ревью и оптимизировать работу
26 апр. 2024, в 20:42
2000 руб./за проект
Ещё заказы