css - 带有 wp touch 的 wordpress woocommerce 该网站不支持移动设备，并且在 carousal preview 和 next 上没有图像

Question

我有两个问题

1. 为什么在使用某些 css 代码后我的 css 会重置？
2. 为什么首页上的其他产品在移动设备上没有显示在中间

网站网址:(www.thevapeboys.co.uk)

我有一个安装了 woocommerce 的 wordpress 网站 我想让移动设备友好，所以我安装了一个名为 wptouch 的插件，我添加了一些它的 css 值使它对移动设备更友好，这些是

这些 css 脚本仅在有人通过手机访问网站时触发

但问题是我在有 next/preview 的网站上有 carousal 并且它没有显示它的箭头所以我尝试将此代码添加到 css

.owl-nav .owl-next::before {
content: ">";
}

.owl-nav div::before {
content: "<";
}

我用 firebug 试过了，它看起来很友好，但是当我实际将代码放入其中时，它重置了我之前所做的所有其他 css 值。有没有一种方法可以在不重置其他 css 值的情况下工作，因为它适用于 firebug

当我继续购买产品时，字体现在出现在左侧，我不确定如何让它们都位于中间，这样它对移动设备更友好。

Answer 1

1. 不幸的是，自定义 css 文件排在第一位，这意味着它永远不会覆盖任何内容。根据浏览器，CSS 使用级联意味着最后一个重复的类胜出。将您的自定义 CSS 放在最后，它将覆盖。

2. 您不需要 WP Touch 插件，因为您的主题已经是响应式的，事实上它正在复制移动菜单，所以我将其关闭。 https://woocommerce.com/storefront/ (搜索“响应式”描述框以证明这一点)

3. 执行以下操作来替换图标，您需要访问您的自定义 javascript 文件:https://stackoverflow.com/questions/31605932/how-to-make-a-owl-carousel-with-arrows-instead-of-next-previous