店面:切换到768px宽屏幕的移动布局

Question

我正在开发Wooccommerce Storefront的子主题。

在平板电脑上(人像，768px宽)，我希望显示"移动"布局(汉堡菜单等)，而不是桌面布局(主菜单等)。

我使用了以下css媒体查询：移动@media (max-width: 768px)桌面@media (min-width: 769px)在我的css文件中。

但店面的所有媒体查询似乎都激活了@media (min-width: 768px)的桌面布局。

如何更改此断点？

编辑1:我试图将文件wp-content/themes/storefront/assets/sass/utils/_variables.css编辑为

$desktop:           769px;
$handheld:          768px;

但它不会改变布局。

编辑2:我在functions.php 中尝试过

// Change Woocommerce css breaktpoint from max width: 768px to 767px  
add_filter('woocommerce_style_smallscreen_breakpoint','woo_custom_breakpoint');
function woo_custom_breakpoint($px) {
$px = '769px';
return $px;
}

但它也不起作用。

Answer 1

我更改了/storefront/assets/sas/utils/_variables.css中的断点值，并使用storefront中的grunt文件重新编译所有storefront文件(包括sass文件)。只需运行$ grunt。