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

  • Resolved louisJJ

    (@louisjj)


    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 10 replies - 1 through 10 (of 10 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 5 months, 1 week ago by  eimph.

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

    kbrownatp

    (@kbrownatp)

    @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?

    Would really like to have a clear and precise answer to this.
    How can I change the breakpoint without modifying the _variable.scss file.
    It will break upon updates.

    Please, Storefront Devs refer to this and let us know.
    This is vague and confusing.

    Hi,

    I have the same problem. As I would like to use the storefront mobile function and avoid using plugins for mobile menus. I shouldn’t be that hard to simply change the breakpoint!?!
    All the plugins out there have a simple text field to set the breakpoint. Why can’t storefront do that?
    At least there should be an option for the functions.php

    Jesse Pearson

    (@jessepearson)

    Automattic Happiness Engineer

    The original thread here was about displaying the mobile items up to 768px wide, which Storefront does at this point. If anyone here is needing further assistance with something else, please create a new thread with your issue.

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