Question

我仍然在Stackoverflow的学习过程和新手。对于我身边的任何愚蠢行为感到抱歉。

我有一个WordPress主题，它已经响应了。我制作了一个页面，在那里我制作了3个盒子（使用内联CSS使其背景色彩鲜艳，一个盒子浮在右边，而其他2个浮在左边）。

请在此处查看该页面和第二个框：About Us

现在，当我从手机查看网站时，我看到第二个框浮动在右侧并离开了屏幕。我不太了解分区层次结构在CSS中是如何工作的，所以我在媒体查询中尝试了一些东西，但我无法成功。我给了第2块<div id="image2" style=".....;float:right;">

现在在媒体查询中，我希望它是float:none;

有人能指点我怎么做吗？我必须在媒体查询中放置什么是正确的层次结构（在主题文件中）。我通过媒体查询设法通过徽标改变了一些东西，我知道我必须写 .header-wrapper .logo-wrapper {.....}

我只是不知道如何用这个文本块做同样的事情。

帮助表示赞赏。谢谢！

Answer 1

您的image2在移动设备和桌面设备上都有固定的宽度

@media (max-width:767px){
/* try this */
 #image2{
    width: 100%;
 }

}

我给你的建议：避免在线风格......