我的 Tailwindcss 项目出现问题

问题描述 投票：0回答：1

为这个顺风项目编写代码，当我完成英雄部分时，我进入了下一部分，并了解了当在移动视图中显示时，我的代码是如何挤在前一部分的下方的[enter image description here]（ https://i.stack.imgur.com/JqNkB.png）。

提供的图片是移动和桌面显示模式下的网站。我一直在尝试解决这个问题，但没有成功！

p.s：我实际上是前端 Web 开发新手

我尝试使用 gpt 和 bard 来解决这个问题。我已经写了整个鳕鱼，但仍然什么也没有。

<!doctype html>
<html lang="en" class="scroll-smooth">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Checkmate Landing Page</title>
    <link rel="stylesheet" href="/build/css/style.css" />
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css"
      integrity="sha512-z3gLpd7yknf1YoNbCzqRKc4qyor8gaKU1qmn+CShxbuBusANI9QpRohGBreCFkKxLhei6S9CQXFEbbKuqLg0DA=="
      crossorigin="anonymous"
      referrerpolicy="no-referrer" />
  </head>
  <body class="px-2 sm:px-0 font-Poppins">
    <header class="container">
      <!-- HEADER -->
      <nav class="flex items-center justify-between py-4 md:py-12">
        <div class="-ml-8">
          <a href="#"
            ><img src="img/checkoutmate-logo-4.png" alt="" class="w-[250px]"
          /></a>
        </div>

        <div class="justify-end">
          <ul class="hidden gap-12 text-xs uppercase md:flex">
            <li class="self-center hover-bg">
              <a href="#features">Features</a>
            </li>
            <li class="self-center hover-bg"><a href="#">Pricing</a></li>
            <li class="self-center hover-bg"><a href="#contact">Conatct</a></li>

            <div
              class="px-6 py-2 text-white rounded-md bg-checkmate-engin-orange hover:">
              <button type="button">Login</button>
            </div>
          </ul>
        </div>

        <div class="mb-20 sm:hidden">
          <i class="text-2xl fa-solid fa-bars"></i>
        </div>
      </nav>
    </header>

    <main>
      <!-- HERO -->
      <section class="relative max-h-screen mb-20">
        <div
          class="container flex flex-col-reverse items-center justify-center md:flex-row">
          <!-- HERO CONTENT -->
          <div class="flex-1 text-center sm:text-left">
            <h1 class="px-2 mb-6 text-3xl sm:px-0 md:text-5xl">
              CheckoutMate: The Smart Way to Shop and Pay
            </h1>
            <p class="text-xl text-gray-500">
              CheckoutMate is a browser extension that makes shopping and paying
              online easier, faster, and more secure. <br />

              It allows you to compare prices from multiple retailers with a
              single click, find and apply coupons automatically, save your
              shipping and billing information for faster checkout, and pay
              securely with your preferred payment method.
            </p>

            <div class="flex flex-row justify-center mt-4 sm:justify-start">
              <button class="btn">Get for Browser</button>
              <button class="mx-6 btn-light">Get for Mobile</button>
            </div>
            <!-- button need to be adjusted for small screen -->
          </div>

          <!-- HERO-IMAGE -->
          <div class="self-end mb-12 animate-bounce">
            <img
              class="object-cover w-[500px] overflow-hidden"
              src="img/checkmate-hero.png"
              alt="" />
          </div>
        </div>

        <!-- ROUNDED REC -->
        <div
          class="absolute right-0 hidden bg-orange-500 rounded-l-full top-[300px] w-1/2 h-80 md:block overflow-hidden -z-10"></div>
      </section>

      <!-- FEATURES -->
      <section
        id="features"
        class="py-20 mt-20 bg-bookmark-white lg:mt-60 dark:bg-slate-800">
        <div class="mx-auto">
          <h2 class="mt-20 text-2xl">Features</h2>
        </div>
      </section>
    </main>
  </body>
</html>
css layout display web-frontend
1个回答
0
投票

您已在英雄部分设置最大高度 

100vh
。内容泛滥的罪魁祸首是英雄形象。它不会在较小的屏幕上缩小，因此它使英雄内容的高度高于
100vh
。如果屏幕足够小，内容最终会溢出。我建议在较小的屏幕上更改图像尺寸。您也可以尝试更改文本大小，但我会专注于图像。例如，您可以在 
HERO-IMAGE
部分执行类似的操作：

<!-- HERO-IMAGE -->
<div class="mb-12 animate-bounce self-center md:self-end">
  <img class="w-[150px] sm:w-[300px] md:w-[500px] overflow-hidden object-cover" src="img/checkmate-hero.png" alt="" />
</div>

如果您想了解更多信息，请从 Tailwind 文档中阅读有关响应式设计的更多信息。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.