Question

这是我当天早些时候提出的问题的后续跟进。我正在尝试使用媒体查询来在屏幕大小为＆lt; 350像素。我试图将其堆叠为图像（中心对齐），然后是下一行中的文本（中心对齐）。我一直在尝试variouls组合，但我还没有得到它。非常感谢任何帮助。

<div class="freedom_carousel">
<!--Freedom section -->
<p class="heading">This is heading.</p>
<div class="container1">
    <div class="col1">
        <p>
            <img class="icon" src="/path/to/image" /> <span class="icon-text"> <b>This is </b> Text TextText TextText TextText TextText Text </span>
        </p>
    </div>
    <div class="col2">
        <p>
            <img class="icon" src="/path/to/image" /> <span class="icon-text"> <b>This is </b> Text TextText TextText TextText TextText Text </span>
        </p>
    </div>
</div>
<!--End of container 1 -->
<div class="container2">
    <div class="col1">
        <p>
            <img class="icon" src="/path/to/image" /> <span class="icon-text"> <b>This is </b> Text TextText TextText TextText TextText Text </span>
        </p>
    </div>
    <div class="col2">
        <p>
            <img class="icon" src="/path/to/image" /> <span class="icon-text"> <b>This is </b> Text TextText TextText TextText TextText Text </span>
        </p>
    </div>
</div>
<!--End of container 2 -->
</div>
</div>
<!--End of Freedom carousel -->

JSfiddle完整代码：http://jsfiddle.net/0cr1zj89/1/

Answer 1

将此添加到堆栈列。

@media screen and (max-width: 350px) { 
    .freedom_carousel .col1,     
    .freedom_carousel .col2 {
        float: none;
        width: 100%;
        margin: 0px;
    }
}

Answer 2

试试这个：

@media screen and (max-width: 350px) {
.icon {
    width:100%;
    width:auto;
    height: auto;
    margin: 0 auto;
    display:block;
}
.icon-text {
    width:100%;
    text-align: center;
    display:block;
}
}

媒体查询 - 堆叠内容

2 个答案: