图像 div 对较小的屏幕尺寸没有响应

Question

我有一个 3 div，其中一个部分包含图像。它们在大屏幕上排成一行。但它们在较小的屏幕上没有响应。我需要他们做出反应，这样他们就比其他人低提前致谢

<section id="about">
        <h1>undrawa illustration</h1>
        <div class="about-container">
            <div class="image-container">
                <h2>web innovation</h2>
                <img src="img/undraw_feeling_proud_light.svg" alt="" id="image1">
            </div>
            <div class="image-container">
                <h2>web innovation</h2>
                <img src="img/undraw_conceptual_idea_light.svg" alt="" id="image2">
            </div>
            <div class="image-container">
                <h2>web innovation</h2>
                <img src="img/undraw_proud_coder_light.svg" alt="" id="image3">
            </div>
        </div>
</section>

Answer 1

你没有包括你的 CSS 但我想你有这样的东西：

.about-container{
        display: block;
    }
    .image-container{
        display: inline-block;
    }

您需要为移动显示编写单独的规则。尝试：

<style type="text/css">
/* Mobile CSS */
@media only screen and (max-width: 768px) {
    .about-container{
        display: block;
    }
    .image-container{
        width: 100%;
    }
}

还有你的HTML：

<div class="about-container">
<div class="image-container">
    1
</div>
<div class="image-container">
    2
</div>
<div class="image-container">
    3
</div>
</div>

图像 div 对较小的屏幕尺寸没有响应

images divs are not responsive with smaller screen size

html

css

responsive-design