edit Storefront css media queries breakpoints from the child theme

[louisdoe]

Hi,

I use Storefront as a base theme to develop child themes.
It'd be really useful to be able to change the css breakpoint for small screen from the functions.php instead of having to recompile the SASS.
For example, the css breakpoint is hardcoded as min-width: 768px but if you need to display the mobile layout on an ipad for instance, you have to move this value.

Something like this Woocommerce hook would be nice:

add_filter('woocommerce_style_smallscreen_breakpoint','woo_custom_breakpoint');
function woo_custom_breakpoint($px) {
$px = '769px';
return $px;
}

Thanks for your help

[nlmnt]

In the referenced topic, @jameskoster says:

768 was the breakpoint we chose so as to serve the 'mobile' layout to iPad portrait. 4 product columns displayed on screens that narrow looks pretty bad

But as far as I can tell the iPad is not being served the mobile layout in portrait mode. Am I missing something?

If there is a way to get the mobile layout to show for 768px screen width that would be great. It does indeed look pretty bad, and the desktop dropdown menus are not touch-friendly since the parent menus are links themselves.

[louisdoe]

Exactly, by default with Storefront, the mobile layout is not served for iPad. But this is what I am looking for. And it would be great to have a php hook for this, instead of having to recompile the sass into CSS and reinstall Storefront.

[jobthomas]

Just to clarify, this problem is wider (pun intended) than just Storefront. CSS core has no clear way to distinguish between an iPad Pro or a small computer screen, even though the haptics are very different on those.

That of course doesn't take away from your comment that it'd be great to override the breakpoints in an easier fashion, but I'm wondering why you'd want to do that in the first place?

These breakpoints have been tested and you can still see a full site nicely without using mobile there:

Link to image here: http://cld.wthms.co/ztcBtP.

But let's see what the developers say about that.

[louisdoe]

Hi
thanks for your comment. The reason is just that my client want to display the mobile layout on iPad.
Because several other big brands are doing it too.

[louisdoe]

Grrr I am struggling with this, everytime there's an update of Storefront, I have to recompile it 👍

change the breakpoint value in _variable.scss
npm intall
grunt
check with grep that this went to css correctly
reinstall Storefront

Any chance you guys can make it possible to change the breackpoints from the a child theme ?

[tiagonoronha]

@louisdoe for now I'd suggest creating a child theme with your custom CSS. This way it won't get replaced when you update the parent theme (Storefront).

I'm labelling this an enhancement, but at the moment making this change is not a priority.

[louisdoe]

@tiagonoronha this is what I am doing ! I think you don't understand: I already use a child theme, but it doesn't change the fact that the media queries breakpoints are "hardcoded in sass" in storefront theme (the parent them)! do you understand?
So the breakpoints of the parent them should be editable in from the child theme...which is not the case, and other people are having the same issue, so this should BE A PRIORITY !

[clb92]

I agree with @louisdoe. We really need a better way of changing the breakpoints.

[soulstyle]

Totally agree! Please make this a priority.

[boutzamat]

Still nothing?

[louisdoe]

Come on make this a priority ! Basic feature really !

[locougil]

It would be so cool to have the possibility to change the breakpoints easely. Please ! :)

[zietbukuel]

This is a pretty basic feature most theme have by default. A way to modify the breakpoints from either the admin UI or using hooks. Having to modify the parent themes defeats the purpose of having a child theme and it's not the "Wordpress way".