css - 移动设备的单列布局

Question

我正在尝试针对移动设备优化我们的网站，但我一直遇到格式问题。每当您将浏览器缩小到移动尺寸时，您将能够看到所有列的偏移量和间距都不同。相反，我希望在激活移动设置时将所有这些元素排列在一个整齐的列中。

请注意:我只是想为移动设备完成此操作。我对我们的平板电脑模式和桌面模式很满意。

我们使用 Visual Composer 和 Go Pricing 作为插件。

这是我用来调整桌面格式定价表的代码:

<div style="max-width: 400px; margin: 0 auto;">[go_pricing id="multicam_productions"]</div>

这是我们的网站:http://visualicreative.com/conference/

这是我正在谈论的内容的屏幕截图:http://visualicreative.com/wp-content/uploads/2014/11/Screen-Shot-2014-11-21-at-9.44.52-AM.png

Answer 1

您的“What Service”div 上有一个 .vc_custom_1410664290855 类，margin-left: 10% !important; 导致屏幕截图出现偏移。

使用适当大小的媒体查询移除边距。