html - 网站上的移动 CSS 润色/修饰问题

标签 html css

我正在开发以下网站的移动版本:http://provenioexclusive.com

CSS 在台式机、笔记本电脑和 iPad 设备上完美运行。然而,当针对移动设备调整窗口大小时,产品列表的宽度都变得困惑。请帮忙 我已将以下容器“ul.products ”设置为 100% 的宽度,并将另一个 100% 应用于“.card.card-product”,但这不起作用。

“卡片”的宽度应该与穿黑衬衫的人的宽度相同。

附上截图,非常感谢。

enter image description here

最佳答案

在您的@media(最大宽度:767px)中使用以下内容:

.woocommerce[class*=columns-] ul.products li.product {
    width: 100vw;
    float: none;
    clear: both;
    margin: auto;
}

结果:

enter image description here

关于html - 网站上的移动 CSS 润色/修饰问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45620940/

相关文章:

css - 带信息的圆形 div,悬停时显示所有信息

html - CSS:为什么这个简单的 HTML 会出现垂直滚动条? (100% 高度格)

javascript - 分离函数时变量不记得自己

javascript - 为属于某个类的特定按钮应用 CSS 规则

html - youtube iframe之后的内容未显示

html - 如果子元素为空,如何设置父元素的样式?

html - 有什么方法可以使用 CSS 将文本大小设置为窗口大小的百分比?

html - 背景图像在 iOS 上不显示

javascript - 如何在具有特定数据值的替代元素上应用 CSS?

javascript - 通过 JavaScript 创建时内联 block 元素的行为不一致