在WordPress中制作可堆叠的两列

时间:2015-04-24 21:52:47

标签: css wordpress responsive-design wordpress-theming responsiveness

我正在处理应该响应的主题但是当使用两列短代码并且在较小的浏览器或移动设备上查看页面时,列会缩小以适应浏览器宽度并排放置而不是堆叠。

在智能手机上看起来很糟糕,我正在努力使列堆叠。

您可以在以下位置查看页面:http://goo.gl/t8QOA5

相关的css:

.one_half {
float:left;
line-height:22px;
margin-right:2%;
width:49%;
margin-bottom:27px;
display:block
}

.one_half_last {
float:left;
line-height:22px;
width:49%;
margin-bottom:27px;
display:block
}

1 个答案:

答案 0 :(得分:2)

使用媒体查询根据视口的宽度编写条件css。 https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries

示例:

@media (max-width: 480px) {
    .one_half, .one_half_last {
        width: 100%;
    }
}