I have watched the tutorial on how to use Microthemer and really liking it…just picked it up today. I have set everything up on the desktop version of the website. But now I need to fix the mobile settings.
I have reset the Microthemer to 480px like you did on the tutorial video. But I am nervous to make changes because I do not see a tab that says phone like there is on the video. I am still seeing a tab that says all devices. How do I make changes for the mobile phone styles without messing up my desktop css styles?
To see the other tabs click on the icon with a ‘pen’ next to the ‘All devices’ tab. From there you can select other media queries such as mobile. Once you click on it you will have a new tab and the screen will be locked to it’s maximum width.
Just as a note: at the moment the tabs are set per selector basis, which means that if you switch from designing a heading to styling a button you will have to re-open the phone tab again. This might strike as an odd thing. We’re working to change that soon.
Please let me know if that solves your problem and let me know if you have any other questions.
Thanks for directing Susan to the responsive tabs Monika.
@SusanV when you set the preview screen width via the popup window that mostly useful for when you are designing mobile first. When designing mobile first, all the general (All Devices) styles are input with small screens in mind. And so it’s useful to actually view the site on a small screen when applying these general styles.
