Support » Theme: Storefront » change Storefront child theme css breakpoint

  • Hi

    I developped a child theme from Storefront.

    But I need the mobile layout (mobile burger menu, etc) to display on 768px-wide screens.

    I tried this

    // 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;
    }

    but it doesn’t work.

    I tried to change $desktop: 768px; to $desktop: 769px; in _variables.scss in storefront files, but it doesn’t work.

    Can you help me achieve that?

    Thanks

Viewing 2 replies - 1 through 2 (of 2 total)
  • Hi I really need help here !

    Danny Santoro

    (@danielsantoro)

    Automattic Happiness Engineer

    Hi there,

    I’ve responded in your support ticket, but wanted to also reply here so there’s a public record in the case someone is searching.

    You can modify the Storefront layout breakpoints by editing the SASS files. SASS is a CSS Preprocessor that is used for a lot of WordPress theme development, Storefront included.

    If you download Storefront, you can go to storefront/assets/sass/utils/_variables.scss. On Line 22, you begin to see the established CSS breakpoints for Desktop and Handheld. You can view the file in question with the selected lines on GitHub here: https://github.com/woocommerce/storefront/blob/master/assets/sass/utils/_variables.scss#L22-L25

Viewing 2 replies - 1 through 2 (of 2 total)
  • You must be logged in to reply to this topic.