2017-10-06 2 views
1

Ich entwickle ein Kind Thema von Woocommerce Storefront.Storefront: Wechsel zum mobilen Layout für 768px-Wide Screens

Auf einem Tablet (Porträt, 768px breit), möchte ich das "mobile" Layout (Burger-Menü, etc.) angezeigt werden, anstelle der Desktop-Layout (Hauptmenü, etc).

ich verwenden, um die folgenden CSS-Medienanfragen: @media (max-width: 768px) für mobile @media (min-width: 769px) für Desktop in meiner CSS-Datei.

Aber alle Medienabfragen von Schaufenster scheint aktiviert Desktop-Layout für @media (min-width: 768px).

Wie kann ich diesen Haltepunkt ändern?

EDIT 1: Ich habe versucht, die Datei wp-content/themes/Schaufenster/assets/sass/utils/_variables.scss zu

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

aber es ändert sich nicht, um das Layout zu bearbeiten.

EDIT 2: Ich habe versucht, dies in der 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; 
} 

aber es funktioniert auch nicht.

+0

du meinst das? https://stackoverflow.com/questions/39612275/change-woocommerce-media-query-breakpoint-to-load-woocommerce-smallscreen-css-at – Hash

+0

@Hash es ist so etwas ja! Aber der Code in diesem Link funktioniert nicht für mich. Bei einer Breite von 768px sehe ich immer noch das Desktop-Menü, während ich das Mobile-Menü brauche. Kannst du mir weiter helfen? – Louis

+0

@Hash irgendeine andere Idee? – Louis

Antwort

0

Ich änderte den Haltepunkt Wert in /storefront/assets/sass/utils/_variables.scss und kompilieren Sie alle Storefront-Dateien (einschließlich Sass-Dateien) mit der Grunt-Datei in Storefront. Führen Sie einfach $ grunt.

Verwandte Themen