为什么在较小的屏幕上我的图像不会移动到文本下方？

Question

我一直在尝试使用 tailwind css 及其响应式布局和设计使我的代码适合移动设备。但是，当将其集成到我的代码中时，图像“bot.png”不会移动到其旁边的文本下方；相反，它只是不断缩小，直到图像消失。这不是预期的结果，因为我希望图像根据屏幕尺寸缩小，但如果文本和图像在同一行上看起来不干净，则移动到文本下方。

<!-- Main Section (Hero Section) -->
    <section class="py-20 bg-black">
        <div class="max-w-5xl mx-auto flex flex-col lg:flex-row items-center px-6">
            <!-- Text Content on the Left -->
            <div class="lg:w-3/4 text-left">
                <h1 class="title-lg text-violet-500 font-bold mb-6">Unlock the Future of Hotel Customer Service</h1>
                <p class="text-lg md:text-xl lg:text-2xl text-purple-400 mb-8">Our AI-powered hotel chatbot revolutionizes customer service by answering your guests' questions instantly and accurately, 24/7. Enhance their experience and boost your revenue.</p>
                <div class="flex left-0 lg:justify-start space-x-4">
                    <a href="#how-it-works" class="button-lg border border-fuchsia-400 rounded-full hover:bg-fuchsia-400/50 transition transform hover:scale-105">See How It Works</a>
                </div>
            </div>

    
            <!-- Image on the Right -->
            <div class="lg:w-1/3 flex justify-center lg:justify-end mt-8 lg:mt-0 ml-6">
                <img src="bot.png" alt="Chatbot" class="rounded-lg shadow-lg w-full h-auto">
            </div>

    </section>

这是我一直在尝试实现移动友好代码的部分，但对于上述问题，它不起作用。我也尝试改变整个 html 文件的样式，但它似乎没有改变任何东西。下面是html文件样式。

<style>
        html {
            scroll-behavior: smooth;
        }

        /* Responsive button and text sizes for various screen widths */
        @media (min-width: 24px) {
            .button-lg {
                padding: 0.75rem 2.5rem;
                font-size: 1.25rem;
            }

            .text-balance {
                font-size: 1.25rem;
            }

            .title-lg {
                font-size: 3.5rem;
            }
        }

        @media (min-width: 24px) and (max-width: 1023px) {
            .button-lg {
                padding: 0.75rem 1.5rem;
                font-size: 1.125rem;
            }

            .text-balance {
                font-size: 1.125rem;
            }

            .title-lg {
                font-size: 2.75rem;
            }
        }

        @media (max-width: 24px) {
            .button-lg {
                padding: 0.75rem 1rem;
                font-size: 1rem;
            }

            .text-balance {
                font-size: 1rem;
            }

            .title-lg {
                font-size: 2.25rem;
            }

            /* Navbar responsive */
            .navbar-items {
                display: flex;
                flex-direction: column;
                align-items: center;
                gap: 0.75rem;
                margin-top: 1rem;
            }

            .navbar-items a {
                display: block;
                width: 100%;
                text-align: center;
            }
        }
    </style>

Answer 1

这与您的内容显示的屏幕尺寸有关， 所以最好让文字在上面，图片在下面。 否则，如果您希望它们都放在一边，则文本大小必须小于 text-sm （不推荐）