change Storefront child theme css breakpoint

  • Resolved louisJJ

    (@louisjj)


    7 years, 1 month ago

    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 12 replies - 1 through 12 (of 12 total)
  • Thread Starter louisJJ

    (@louisjj)

    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 6 years, 9 months 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?

    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.

    Max

    (@art-woodde)

    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

    jessepearson

    (@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.

    I just ran into this as well. Seems odd that the “desktop” setting is so low to 768 which forces tablets to the desktop mode. No desktop is that low in resolution anymore and as devices advance in resolution you’d think the default in storefront would bump up so tablets don’t drop into desktop mode. That means at some point if a phone hits 768 that will pull desktop mode too.

    Should be an easier way to adjust this other than re-compiling files

    I guess my issue is the “default” in storefront is not even kicking in mobile responsive on a iPad in portait mode….I get it may not in landscape (@1024) but why on earth is it not in mobile mode in portrait it makes the site look like garbages in desktop display. Storefront is not even honoring the 768 for tablets in portrait mode and that’s not right.

    @jesse above says it DOES display in mobile at 768 but if you go to my site using Storefront on ipad in Portrait mode it’s still showing desktop theme.

    https://myshop.stkpromotions.com

    • This reply was modified 6 years, 2 months ago by ccolotti.
Viewing 12 replies - 1 through 12 (of 12 total)
  • The topic ‘change Storefront child theme css breakpoint’ is closed to new replies.