БЛОГ НА HUSL


Некорректное отображение сайта в инструментах разработчика в браузере

Автор вопроса: Derron

Я учу верстку и у меня возникла проблема с инструментами разработчика в браузере. Ранее, при их использовании, сайт отлично помещался в окно. Но спустя несколько дней, когда я захотел внести некоторые правки, открыв сайт я увидел, как он обрезался в инструментах разработчика в режиме эмуляции устройства.

Я несколько часов пытался найти решение, но безрезультатно. Но когда я убрал автоматические отступы и вернул их обратно (просто удалил и вставил туда же, откуда удалил), то получилось запустить эмуляцию, как она и должна быть. Но все следующие попытки не увенчались успехом. Это был единственный раз, когда оно отобразилось как надо. Поэтому решил заскринить, на всякий случай. Скриншоты сделаны в браузере Edge, но я также проверил и в других браузерах, таких как Chrome, и проблема не исчезла.

Как можете увидеть через путь на скринах, это два абсолютно одинаковых файла. Обе страницы обновлены, поэтому файл, из которого они открыты, актуален для обоих страниц.

Прошу, помогите исправить эту проблему.

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

.page {
  height: 100%;
}

.page_body {
  background-image: url(img/leaves.png);
  background-color: #B6BF93;
  background-size: auto 3200px;
  color: #000;
  font-family: "Louis George Cafe";
  font-weight: 400;
  font-size: 32px;
  min-width: 1440px;
  margin: 0;
}

.container {
  width: 1300px;
  padding: 10;
  position: relative;
  margin-left: auto;
  margin-right: auto;
}
<html lang="en" class="page">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="style.css">
  <link rel="stylesheet" href="fonts.css">
</head>

<body class="page_body">
  <header class="page_header page-header"></header>
  <main class="page_main"></main>
  <footer class="page_footer page-footer"></footer>
</body>

</html>

Как должно выглядеть Как выглядит сейчас

А вот и весь код:

.page {
  height: 100%;
}

.page_body {
  background-image: url(img/leaves.png);
  background-color: #B6BF93;
  background-size: auto 3200px;
  color: #000;
  font-family: "Louis George Cafe";
  font-weight: 400;
  font-size: 32px;
  min-width: 1440px;
  margin: 0;
}

.container {
  width: 1300px;
  padding: 10;
  position: relative;
  margin-left: auto;
  margin-right: auto;
}

.section-title {
  font-size: 48px;
  font-weight: 400;
}

.section-title_big {
  font-size: 80px;
  font-weight: 700;
}

a {
  text-decoration: none;
  color: #000;
}


/* HEADER */

.page_header {
  background: rgba(217, 217, 217, 0.50);
  padding-top: 20px;
  padding-bottom: 20px;
  height: 40px;
}

.page-header_container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.main-menu {
  margin-top: 0;
  margin-bottom: 0;
  list-style-type: none;
  display: flex;
  column-gap: 126px;
  font-size: 20px;
}


/* HERO */

.hero {
  height: 550px;
  padding-top: 230px;
}

.hero_img {
  border-radius: 50px;
  position: absolute;
  right: 0;
  top: 0;
}

.hero_title {
  width: 388px;
  margin: 0;
  margin-bottom: 35px;
}

.hero_subtitle {
  width: 360px;
  margin: 0;
  margin-bottom: 100px;
  font-size: 35px;
}

.hero_link {
  background-color: #C08074;
  color: #19100B;
  padding-left: 85px;
  padding-right: 85px;
  padding-top: 23px;
  padding-bottom: 23px;
  border-radius: 100px;
  margin: 0;
}


/* EXCELLENTS */

.excellents {
  padding-top: 100px;
  padding-bottom: 150px;
  text-align: center;
}

.excellents_title {
  margin: 0;
  margin-bottom: 60px;
}

.excellents_subtitle {
  margin: 0;
  width: 870px;
  margin-left: auto;
  margin-right: auto;
}


/* ABOUT */

.about {
  margin-bottom: 130px;
}

.about_container {
  background-color: #E2D3DD80;
  width: 1200px;
  padding: 50px;
  display: grid;
  grid-template-columns: 400px 1fr;
  grid-column-gap: 50px;
  grid-row-gap: 50px;
}

.about_img {
  border-radius: 50px;
  grid-row-start: 1;
  grid-row-end: 4;
}

.about_title {
  margin: 0;
}

.about_subtitle {
  margin: 0;
}

.about_link {
  margin: 0;
  width: 420px;
  height: 70px;
  padding-top: 25px;
  border: 1px solid #000;
  border-radius: 50px;
  text-align: center;
}


/* PRODUCTS */

.products {
  margin-bottom: 125px;
}

.products_title {
  text-align: center;
}

.products-list {
  margin-top: 0;
  margin-bottom: 0;
  list-style-type: none;
  display: flex;
  justify-content: space-between;
}

.product_title {
  text-align: center;
  font-weight: 400;
}

.product_img {
  margin-bottom: 30px;
  border-radius: 50px;
}

.product-amount {
  display: flex;
  border: 1px solid #000;
  border-radius: 50px;
  padding-left: 20px;
  padding-right: 20px;
  margin-bottom: 15px;
  height: 57px;
  align-items: center;
  justify-content: space-between;
}

.product-amount_more,
.product-amount_less {
  font-size: 40px;
  background-color: transparent;
  border: none;
}

.product_btn {
  width: 370px;
  height: 57px;
  background-color: #C08074;
  border: 1px solid #C08074;
  border-radius: 50px;
  font-size: 32px;
  font-family: "Louis George Cafe";
}


/* FOOTER */

.page-footer {
  background: rgba(217, 217, 217, 0.50);
  height: 220px;
  display: flex;
  align-items: center;
}
<html lang="en" class="page">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="style.css">
  <link rel="stylesheet" href="fonts.css">
</head>

<body class="page_body">
  <header class="page_header page-header">
    <div class="container page-header_container">
      <a class="page-header_logo" href="#">
        <img src="img/Matcha.svg" alt="matcha_logo" width="136" height="28">
      </a>

      <nav class="page-header_nav">
        <ul class="page-header_menu main-menu">
          <li class="main-menu_item">
            <a class="main-menu_link">Home</a>
          </li>
          <li class="main-menu_item">
            <a class="main-menu_link">Shop</a>
          </li>
          <li class="main-menu_item">
            <a class="main-menu_link">About</a>
          </li>
        </ul>
      </nav>

      <a class="page-header_basket" href="#">
        <img src="img/fi-br-shopping-cart.svg" alt="shopping-cart" width="40" height="40">
      </a>
    </div>
  </header>
  <main class="page_main">
    <section class="hero">
      <div class="container">
        <h1 class="hero_title section-title section-title_big">MATCHA TEA</h1>
        <p class="hero_subtitle">Enjoy your healthy drink</p>
        <a class="hero_link" href="#">Buy now</a>
        <img class="hero_img" src="img/hero-img.png" alt="matcha_tea" width="892" height="550">
      </div>
    </section>

    <section class="excellents">
      <div class="container">
        <h2 class="excellents_title section-title">Refreshing. Useful. Delicious. Simple.</h2>
        <p class="excellents_subtitle">Matcha is good for the liver and brain. And also for the prevention of various chronic diseases and overall health improvement.</p>
      </div>
    </section>

    <section class="about">
      <div class="container about_container">
        <img class="about_img" src="img/about-img.png" alt="about-img" width="400" height="400">
        <h2 class="about_title section-title">About</h2>
        <p class="about_subtitle">Due to the fact that almost during the entire growth of the plant it is in the shade. The amount of amino acids, caffeine and antioxidants increases.</p>
        <a class="about_link" href="#">Buy matcha</a>
      </div>
    </section>

    <section class="products">
      <div class="container">
        <h2 class="products_title section-title">Our Products</h2>
        <ul class="products_list products-list">
          <li class="products-list_item product">
            <h3 class="product_title">Yellow</h3>
            <img class="product_img" src="img/yellow-img.png" alt="" width="370" height="510">
            <div class="product_amount product-amount">
              <button class="product-amount_more">+</button>
              <p class="product-amount_number">1</p>
              <button class="product-amount_less">-</button>
            </div>
            <button class="product_btn" type="button">ADD TO CART - $13</button>
          </li>
          <li class="products-list_item product">
            <h3 class="product_title">Green</h3>
            <img class="product_img" src="img/green-img.png" alt="" width="370" height="510">
            <div class="product_amount product-amount">
              <button class="product-amount_more">+</button>
              <p class="product-amount_number">1</p>
              <button class="product-amount_less">-</button>
            </div>
            <button class="product_btn" type="button">ADD TO CART - $10</button>
          </li>
          <li class="products-list_item product">
            <h3 class="product_title">Peachy</h3>
            <img class="product_img" src="img/peachy-img.png" alt="" width="370" height="510">
            <div class="product_amount product-amount">
              <button class="product-amount_more">+</button>
              <p class="product-amount_number">1</p>
              <button class="product-amount_less">-</button>
            </div>
            <button class="product_btn" type="button">ADD TO CART - $13</button>
          </li>
        </ul>
      </div>
    </section>
  </main>
  <footer class="page_footer page-footer">
    <div class="container">
      <a class="page-footer_logo" href="#">
        <img src="img/Matcha.svg" alt="matcha_logo" width="174" height="36">
      </a>
    </div>
  </footer>
</body>

</html>


Источник

Ответы (0 шт):

licensed under cc by-sa 3.0 with attribution.