Export/Import Media Queries

Author Posts

kboxdesign July 26, 2018 at 7:22 am

Heads up! this post was created when Microthemer was at version 5. The current version is 7. Some references to the interface may be out of date.

Hi, is there a way to Export a set of media queries that you setup for a site? I have created my own set of media queries but I have to set them up every time when I start a new project.

Sebastian July 26, 2018 at 1:20 pm

Hey,

In the near future, I will add an option for exporting/importing workspace settings. This will include media queries, preferences, and suggested styles (enable Preferences > edge mode to see suggested styles).

But for now, you can try the following workaround:

  1. Go to a site that has all the MT media queries set up
  2. Go to Packs > Export
  3. Name your export ‘Media Queries’
  4. Select at least one folder, and then click the EXPORT button
  5. Go to Packs > Manage, then download the Media Queries pack as a zip file
  6. On the new site, Go to Packs > Manage
  7. Install the zip file
  8. Go to Packs > Import, and import the settings with overwrite (assuming this is a completely new install)
  9. This will also import the actual CSS styles. So to start fresh, choose the History > Reset everything option. That will reset the default empty folders, but won’t overwrite workspace settings (e.g. the media queries you imported).
  10. The media queries will now be there with the correct labels. You may want to delete MTs default media queries, if they are also present

Alternative method

A potentially more convenient option, with the downside that you will have to add the labels again, is as follows:

Create a file with your media queries written as valid CSS code e.g. 

@media (min-width: 1200px) {}
@media (min-width: 768px) and (max-width: 979px){}
@media (max-width: 767px){}
@media (max-width: 480px){}

(It’s OK to have them empty)

  1. On the new site, go to Packs > Import > CSS Stylesheet
  2. Paste the media queries into the CSS code editor
  3. Click Review before importing
  4. You should see your media queries listed in the GUI media queries dropdown menu
  5. Click the Import button
  6. The media query code will be used for the label by default with (imp) at the end. So click the icon to the left of the media query tabs to rename them.

I hope that helps!

Cheers,
Sebastian

You must login or register to reply to this topic.