店頭：768pxワイド画面のモバイルレイアウトに切り替え

Question

私はWoocommerce Storefrontの子テーマを開発しています。

タブレット（肖像画、768px幅）では、デスクトップレイアウト（メインメニューなど）ではなく、「モバイル」レイアウト（バーガーメニューなど）を表示したいと思います。私のCSSファイルでデスクトップ ため モバイル@media (min-width: 769px)ため @media (max-width: 768px)：

は、私は次のCSSメディアクエリを使用していました。

しかし、店頭のすべてのメディアクエリは、@media (min-width: 768px)のアクティブデスクトップレイアウトのようです。

どのようにこのブレークポイントを変更できますか？

EDIT 1：私は

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

へのファイルのwp-コンテンツ/テーマ/店舗/資産/ SASS/utilsの/ _variables.scssを編集しようとしましたが、それは、レイアウトを変更しません。

EDIT 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/sass/utils/_variables.scssのブレークポイント値を変更し、店頭のgruntファイルを使用してすべてのStorefrontファイル（sassファイルを含む）を再コンパイルしました。 $ gruntを実行してください。