TailwindCSS移动端布局异常：新模块与Hero Section重叠

问题根源分析 #

• Hero区域的max-h-screen强制限制容器最大高度为屏幕高度，移动端内容（标题、段落、按钮）较多时会溢出截断，导致后续Features模块向上重叠。
• 移动端汉堡菜单的mb-20添加了不必要的底部外边距，打乱垂直布局节奏。
• Hero图片未设置响应式宽度，w-[500px]在小屏幕下过宽，挤压内容空间。
• Features模块嵌套div的mt-20导致标题额外上移，加剧拥挤感。

具体修复步骤 #

1. 移除Hero区域的max-h-screen类，让容器根据内容自动适应高度，避免内容截断。
2. 将汉堡菜单的mb-20改为mb-4，减少冗余底部间距。
3. 给Hero图片添加响应式宽度：w-full sm:w-[400px] md:w-[500px]，适配不同屏幕尺寸。
4. 移除Features模块嵌套div的mt-20，保留section本身的mt-20 lg:mt-60即可。
5. 给Hero内容容器添加mb-8，确保移动端内容与图片间有足够分隔。

修改后的完整代码 #

<!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-4 sm:hidden">
          <i class="text-2xl fa-solid fa-bars"></i>
        </div>
      </nav>
    </header>

    <main>
      <!-- HERO -->
      <section class="relative 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 mb-8">
            <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-full sm:w-[400px] md: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="text-2xl">Features</h2>
        </div>
      </section>
    </main>
  </body>
</html>

内容的提问来源于stack exchange，提问作者Wintersznishere