Stylesheets enqueued with media query (min/max width) lose that restriction

  • I was trying to track down why simply combining CSS was making styles that I know should be mobile-only for a plugin (The Events Calendar) appear on the full-width, desktop screen width.

    I’ve nailed it down to the mobile stylesheet from that plugin being enqueued with a $media parameter of “only screen and (max-width: 768px)”

    WooCommerce does it too.

    What seems to be happening in the minifier is that the contents of those stylesheets are being dumped into the same file, promoting them to apply to “all” instead of the intended screen size.

    If it doesn’t already exist (because I could have missed an option somewhere, that’s very possible), is there any way the minifier can have some logic built in that will preserve those media attributes in the combined file by wrapping them in @media queries?

    • This topic was modified 7 years, 11 months ago by rlamb2. Reason: title was weird
Viewing 3 replies - 1 through 3 (of 3 total)

  • you need to exclude this stylesheet from minifying

    Thread Starter rlamb2

    (@rlamb2)

    Yeah, that’s a solution for right now…

    Doesn’t help what I can only assume are a not-small number of people who have both W3TC (with 1+ million installs) and TEC (500,000+) or WooCommerce (3+ million) installed, but are missing out the speed enhancements of minifying some or all their CSS because it breaks how the other plugins look on their computers (that’s assuming they notice at all—I missed it since activating it yesterday).

    I know it’s not a simple two lines of code fix, but I’d definitely suggest it somehow gets added either here or to that w3-total-cache-fixed project over on GitHub. Need an issue there? I’ll write one. ??

    Thread Starter rlamb2

    (@rlamb2)

    Or, to resurrect a dead thread and correct myself a bit, how can I help write this functionality that I think would be useful for other people?

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Stylesheets enqueued with media query (min/max width) lose that restriction’ is closed to new replies.