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

[govinda-lm]

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 :+1:

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".

[rcstr]

this was requested today at WCEU Woo virtual booth

[jconroy]

Might be useful to collate some examples of themes that are considered to be doing this well to help us decide on effort required and approach.

[haszari]

I did a little research to get a better idea of how this works in Storefront and what options we might have.

Please feel free to comment linking to themes that offer this kind of feature, or if you have ideas for how we could implement in Storefront.

Do other themes offer this?

I found a couple of paid themes that offer customizable breakpoints as a feature:

• Page Builder Framework has a paid add-on allowing customize breakpoints
• Theme Fusion's Avada has a custom admin UI where you can adjust breakpoints

I also looked at Twenty Twenty, and it doesn't seem to have support for customising breakpoints.

How does it work in other themes?

I think how this works in some themes is that they generate the css on the fly in PHP. The breakpoint values are substituted either via a PHP hook or customizer option (or some other custom UI).

What does Storefront currently provide?

Storefront uses Susy framework for layout, and for generating the css media queries for the responsive breakpoints. The values for the actual breakpoints are defined in scss variables.

Some of Storefront's css is generated by a SASS build process, in particular the css for layout and responsive modes. So this can't be changed easily - the breakpoints are locked in a build time.

This is essentially what this bug report is about - sites want to use the responsive styles provided by Storefront, but at different breakpoints. Understandably, they want to do this without forking Storefront, so they can keep their custom breakpoints and still update Storefront to get bug fixes. I don't think this is currently easy or supported.

Note that some of Storefront's css is generated by PHP. This is an older approach – building from SASS has many advantages and features that makes the stylesheets easier to develop and maintain.

How can sites override the breakpoints?

As noted above, there's no easy way to customise the breakpoints via PHP hooks or in the WordPress dashboard customizer.

There are a couple of slightly hacky options:

• Build a child theme that uses the Storefront source code as a scss library, override the variables, and recompile the child theme css whenever Storefront is updated.
• Fork Storefront, override the variables (e.g. in another file), and recompile whenever Storefront is updated.

How could we improve this in a future version of Storefront?

We could move the responsive styles into PHP, and expose hooks or customizer UI for changing the breakpoints. This is not a great solution, as css-in-php is tricky to maintain and we lose the advantages of using SCSS.

I looked into using CSS variables, but they cannot be used for media queries.

If anyone has other ideas or info – please comment.

[edddwin]

Hi, as I understand, in 2018 in Storefront were .scss files. I tried to find them, but here's only style.css in wp-content/themes/storefront. I found here @media (min-width: 768px) and changed the value but it doesn't do anything. Help me please.

[nielslange]

I just had an idea of which I'm not sure if it's genius or nuts. I thought by myself, what about creating four (resp. eight) different styles:

• phone.scss → phone.css
• tablet.scss → tablet.css
• laptop.scss → laptop.css
• desktop.scss → desktop.css

And then enqueue these styles based on break points defined in the customizer:

wp_enqueue_style('storefront-phone', 'phone.css', array(), false, get_theme_mod('styles_phone') );
wp_enqueue_style('storefront-tablet', 'tablet.css', array(), false, get_theme_mod('styles_tablet') );
wp_enqueue_style('storefront-laptop', 'laptop.css', array(), false, get_theme_mod('styles_laptop') );
wp_enqueue_style('storefront-desktop', 'desktop.css', array(), false, get_theme_mod('styles_desktop') );

Please note that the code above is not 100% accurate, but pseudo-code for demo purposes.

@jconroy, @haszari, @Aljullu & @tiagonoronha Does this sounds like something worth creating a prototype or would you say it's a rather pointless idea?

[haszari]

Thanks for brainstorming solutions @nielslange !

And then enqueue these styles based on break points defined in the customizer:

I think the challenge here is that this wouldn't change when these media queries take effect - i.e the breakpoints.

Depending on how the media queries are set, you could implement some limited flexibility this way. For example, if tablet.css was defined as "up to" some pixel width, not enqueueing phone.css might cause tablet styles to apply on phones and smaller. However in this situation, if phone.css was enqueued and tablet.css not enqueued, the laptop/desktop styles would not apply to tablet.

So this allows a little flexibility, but not enough to make it worthwhile in my opinion. Especially since it could be quite an extensive change.

The only way to have dynamic (user tweakable) breakpoints that I know of is to generate the css dynamically using PHP. This is not practical in Storefront, as our styles are mostly implemented in scss.

[Franz333]

Hi, Do you guys have any news regarding setting custom breakpoints?

[iiLearner]

Is this ever going to be looked at? or has already been looked at perhaps?

[Skateboardb]

I'm looking at doing this now.. my client has a lot of buttons on the navbar, and the content gets reflowed well before the pre-defined breakpoint. It's not a good look. Has anyone come up with a sustainable solution?

[ckanitz]

Please add this! It's been nearly three years now but such a basic possibility for customization.

[draney]

Please do something about this. For a realistic situation where menu has more than HOME & SHOP, it doesn't work well for mid-size devices, because the menu items begin to wrap to second row.

[dchristof]

2024 and we're still struggling with this.. can you at least propose a solution?

[kmanijak]

Hi @dchristof and others!

2024 and we're still struggling with this..

TBH It's unlikely we will focus on it anytime soon. We are currently prioritizing work in blocks and block themes while the previous discussions on this issue prove that solving it would require a lot of effort.

can you at least propose a solution?

One option would be to fork the repo and apply all desired changes including different breakpoints.

[brucemacg]

thanks, I'll play around. 1064 does look better, and it's pretty easy to change

thank you, Bruce

On Thu, 14 Nov 2024 at 01:59, jimlongo56 @.***> wrote:

I can't see a way to do this in a child theme, but assuming you're willing to edit the parent css every time it upgrades ...

Search for 768px in the parent storefront > style.css (it's a compressed css file so I can't give you a line number). It's the only occurrence and should land you at @media(min-width: 768px){table.shop_table_responsive tbody tr td,table ...

Change the 768 to your desired value. I'm using 1064px.

I tried 1200 but it messed up the position of the hamburger menu on mobile, and ruined the margins between 1200 and 1064, that's how I settled on 1064px. At least it gives you a mobile menu on an iPad Pro in landscape.

I'm not using Woo Commerce (and this is not a very complex site) so not aware of any issues there.

But it might get you in the ballpark, enough that you can deal with any problems in your child theme, and it's a simple edit to make in the parent which doesn't update that often in my experience.

YMMV

— Reply to this email directly, view it on GitHub https://github.com/woocommerce/storefront/issues/991#issuecomment-2475065511, or unsubscribe https://github.com/notifications/unsubscribe-auth/AICJXHFUDCFTB6RQQT3N4VD2APRVPAVCNFSM6AAAAABRXVGV4OVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDINZVGA3DKNJRGE . You are receiving this because you are subscribed to this thread.Message ID: @.***>