How to change media breakpoint in Storefront

  • Resolved mariograsso87

    (@mariograsso87)


    3 years, 11 months ago

    Hello everybody,

    I’m using a child theme for Storefront. The theme has a media breakpoint at 781px wide screen, but it’s way too tight in my opinion. Just to let you understand, using my Samsung A71 in landscape mode the system serves me the desktop menu.

    I am trying to change the media breakpoint at 991px, but I find difficult to do it. I tryed to override the CSS trought my child theme style.css, but I didn’t manage to do it. Finally I edited the main theme style.css, changing the media min-width to 991 and it works, but I will lose the change once the theme will upgrade.

    The only solution I found reading articles online is to edit SASS and recompile the theme, but I’m not able to do that. Is there a way to obtain the result editing my child theme’s CSS or function.php?

    Thanks in advance.

Viewing 3 replies - 1 through 3 (of 3 total)
  • Thread Starter mariograsso87

    (@mariograsso87)

    Because it’s really hard to find a solution online, I would like to share with you a workaround I found.

    First of all, we need to deregister the parent style

    add_action( 'wp_enqueue_scripts', 'remove_default_stylesheet', 20 );
 function remove_default_stylesheet() {
     wp_deregister_style( 'storefront-style' );
}

    After that, we should copy the entire Storefront’s style.css in our child theme’s CSS. At last, we should copy the entire /assets/css/woocommerce/woocommerce.css in our child theme’s style.css too.

    To change the breakpoint, search for @media (min-width:768px) and change 768 with the number you want.

    I know it’s a workaround, so please share with me other solutions if you have.

    • This reply was modified 3 years, 11 months ago by mariograsso87.
    Mike M. a11n

    (@mikedmoore)

    Automattic Happiness Engineer

    Hi @mariograsso87!

    Because it’s really hard to find a solution online, I would like to share with you a workaround I found.

    I’m glad you found a solution that works for you! Any CSS in Storefront can be overridden in Customizer > Additional CSS by pasting in the exact CSS you want to override. In some cases, you might need to use !important to make sure the custom rules take precedence over the themes rules.

    Hi @mariograsso87,

    We haven’t heard back from you for a while and it sounds like you have fixed the media breakpoint issue you were having, so I’m going to mark this post as resolved. If you have any further questions or need additional help with the Storefront theme, please start a new thread and we’ll be able to help you out there.

    Thanks!

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘How to change media breakpoint in Storefront’ is closed to new replies.