html - 分块响应式媒体查询

Question

我仍在学习过程中，还是 Stackoverflow 的新手。对我这边的任何愚蠢行为感到抱歉。

我有一个 WordPress 主题，它已经是响应式的了。我制作了一个页面，其中我制作了 3 个框(使用内联 CSS 使它们的背景变得丰富多彩，一个框漂浮在右侧，而其他 2 个漂浮在左侧)。

请检查该页面和此处的第二个框:About Us

现在，当我从移动设备查看网站时，我看到第二个框漂浮在右侧并超出屏幕范围。我不太了解 CSS 中的划分层次结构是如何工作的，所以我在媒体查询中尝试了一些东西，但我没有成功。我给了第二 block <div id="image2" style=".....;float:right;">

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

谁能告诉我怎么做？什么是我必须放入媒体查询(在主题文件中)的正确层次结构。我设法通过媒体查询更改了 Logo 的一些内容，然后我想到我必须写 .header-wrapper .logo-wrapper {.....}

我只是不知道如何用这段文本做完全相同的事情。

感谢您的帮助。谢谢你!

Answer 1

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

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

我给你的建议:避免内联样式...