响应式 html 代码帮助 - 显示转换无法从桌面到移动

Question

您可以从代码中看出 - 我对此很陌生。我有点不确定为什么这些 div 不会堆叠在手机/平板电脑上，它们只是并排放置。它在桌面上看起来不错，但我希望它开始在平板电脑 px 范围内堆叠。

任何帮助将不胜感激！

<style>

@media only screen and (min-width: 768px) { #displaymobile { display:inline; background:#000000; } }

.display { display:flex; align-items:center; justify-content:center; }
.info1 { font-size:36px;font-family:cooper-regular;line-height:90%; }
.info2 { font-size:24px;font-family:cooper-regular;line-height:90%; }
.info3 { font-size:24px;font-family:cooper-regular;line-height:90%;color:#fff; }

</style>


<main>

<div class="displaymobile">

    <div class="display">
    
    <img src="IMAGE.png" width="400" height="">

    <p style="text-align:center">
    <span class="info1">INFO1</span></br>
    <span class="info2">INFO2</span></br>
    <span class="info3">INFO3</span>
    </p>
    
    </div>

</div>

</main>

Answer 1

不确定这是否是 100%，因为我也是新人，但您需要设置显示 flex 的内容（再次，也许我的术语是错误的）。尝试在您的显示器中添加它，它告诉当它达到一定大小时转到列而不是行。干杯。

.display { display:flex;弹性方向：列；显示对齐项目：中心；证明内容：中心； }