問題是:
當我縮小屏幕并向右拖動時,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>