色婷婷狠狠18禁久久YY,CHINESE性内射高清国产,国产女人18毛片水真多1,国产AV在线观看

當屏幕縮小時,我如何使我的div和圖像適合整個寬度?

榮姿康2年前7瀏覽0評論

問題是:

Problem

當我縮小屏幕并向右拖動時,div不再適合整個屏幕。我該怎么辦?

我在第一個橫幅上使用了順風,我在第二個橫幅上復制了同樣的東西,但是改變了圖像,結果是這樣的,我認為這是由于圖像的大?。课以鯓硬拍苓m合整個div,即使我移動到小屏幕的左邊,它仍然包含整個div。謝謝你

這是我的代碼(HTML + TAILWIND):

<script src="https://cdn.tailwindcss.com"></script>

<!-- HERO-3 -->
<div class="py-8">
  <!-- IMAGE FOR SMALL DEVICES -->
  <img src="https://content-prod-live.cert.starbucks.com/binary/v2/asset/137-84183.jpg" class="md:hidden">
  <div class=" flex flex-col md:flex-row  bg-[#1E3832] text-[#FFFFFF]">

    <div>
      <div class="p-7 md:p-20 mx-12 text-center bg-contain">
        <h1 class="banner-2 leading-normal">Delivery, from our place to yours</h1>
        <p class="banner-des-2">Enjoy 20% off Starbucks orders with DoorDash of $15+. Offer valid 6/1-6/14 Monday – Friday, 7 a.m. – 12 p.m. only. Max discount of $5.**</p>
        <button id="white-button-play" class="border-solid border-white border-[1px] rounded-full px-5 py-2 text-center font-bold mt-5 transformation hover-green">Order Now</button>
      </div>
    </div>

    <div class="flex-none md:w-6/12 relative">
      <div class="absolute w-full h-full bg-[url('https://content-prod-live.cert.starbucks.com/binary/v2/asset/137-84183.jpg')] bg-contain md:bg-cover md:bg-center ">
      </div>
    </div>
  </div>
</div>

<style type="text/tailwindcss">
    @tailwind base;
    @tailwind components;
    @tailwind utilities;
    
    @layer base{
      *{
        font-family: "SoDo Sans SemiBold", sans-serif;
        box-sizing: border-box;
      }
    }
    
    
    @layer components{
      .transformation {
        @apply active:scale-90 ease-in duration-300;
      }
    
      .banner-light{
        @apply text-[32px] md:text-[50px] mb-3 leading-tight;
      }
      .banner-2{
        @apply text-[18px] md:text-[24px] mb-4 leading-loose;
      }
    
      .banner-des-2{
        @apply text-[15px] md:text-[19px] mb-3 leading-loose;
      }
      .banner-des-light{
        @apply text-[18px] lg:text-[24px] leading-relaxed font-extralight;
      }
    
    
    
      .hover-green{
        @apply hover:bg-[#014a2a];
      }
    }
</style>