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 7 replies - 1 through 7 (of 7 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

    doesnt work

    Danny Santoro

    (@danielsantoro)

    Automattic Happiness Engineer

    It does – I can do it on my machine right now. You need to compile the style.sass file so it updates the style.css sheet in your theme using a SASS Compiler.

    when i do sass _varriable.scss style.css it returns me this :

    /*# sourceMappingURL=style.css.map */

    i installed ruby and then i got sass installed version is 3.5.5

    sass –watch _variables.scss:variable.css doesnt work either

    • This reply was modified 2 months, 1 week ago by  eimph.

    Hi, thank you for this post. How do I handle storefront updates if I use a child theme?

    @danielsantoro Can I copy the storefront/assets/sass/utils/_variables.scss directory to my child theme and edit it there so it’s update-overwrite proof?

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