当页面变小时，使用媒体查询垂直排序div元素

Question

我正在为网站设计一个组件，它是一个实体内联块。它目前在正常尺寸的屏幕上看起来很好，但是当屏幕变小时，事情会变得奇怪。我尝试使用媒体查询来更改一些CSS属性，以使所有div垂直排列。这似乎不起作用。

此外，在这个块的底部有一个额外的10px，我试图以多种方式移除它并且它不会消失，除非我在较大的外部div上设置高度为300px。现在我正在尝试使用calc函数删除它，但没有运气。如果有人知道修复它也会很棒。

以下是当前的媒体查询：

@media (max-width: 500px){
    #orange-block-right, #orange-picture{
     float: left;
     display: inline;
   }}

以下是jsfiddle的链接，它将展示我的困境。如果有人能让我知道问题是什么，我将非常感激。

Answer 1

首先，您需要在媒体查询中重置左边距和宽度：

#orange-block-right {
    width: 100%;
    margin-left: 0;
}

与其他元素类似。

除此之外，擦除那些浮点和内联属性，将所有这些元素定义为块并将其内容居中。