Support » Plugin: eShop » Respond.js doesn't work for media queries in eShop.css – workaround

  • Resolved Peter Wooster


    Respond.js must be included after all css files. eShop includes the css file named eshop.css after the files included by header.php in the theme. If the respond.js is included by the header it will be too early to work for styles in the eshop.css file.

    The simplest workaround is move the eshop styles into a file that is included by the theme. These styles must be removed from eshop.css so as to not override those included earlier. I’ve tested this and it works on IE7 and IE8.

    It may be sufficient to just move the media queries, but I haven’t tested that.


Viewing 2 replies - 1 through 2 (of 2 total)
  • Plugin Author elfin


    what specific page are you seeing an issue with? Have you tested in the twenty eleven theme?

    Thanks for the quick reply.

    This is mostly a heads-up to others attempting to make responsive e-commerce sites. So far I’ve found eShop to be far better for that purpose than WP-Commerce or any of the dedicated systems like OS-Commerce and Magento.

    This is only a problem with responsive themes, my theme is a child theme of the toolbox theme. The problem occurs on all pages that use media queries to modify the css. In particular my test responsive catalogue site, but the workaround has been applied to that site.

    Everything works fine if you don’t need media queries to work in IE7 and IE8. The issue relates to any css file that is included after respond.js. Moving the styles into style.css or another file included at the same place will work.

    Respond.js needs to be included as close to the css as possible and should be surrounded with conditional comments to not include it on modern browsers, so it can’t be included at the end of the file or registered and enqueued.

    Thanks again/peter

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Respond.js doesn't work for media queries in eShop.css – workaround’ is closed to new replies.