I have a responsive WordPress Theme on http://www.haraldlabout.nl and before I was able to make changes with Microthemer for all my different screen sizes.
I have setup Microthemer Media Queries for:
– All Devices
– Desktop: @media (max-width: 1980px)
– Large Tablet: @media (max-width: 1024px)
– Small Tablet: @media (max-width: 767px)
– Phone: @media (max-width: 480px)
I started using Microthemer a couple of month ago and I was able to make changes for all screen layouts and was very happy with it.
Some changes I only applied for a specific screen size and that was working very well.
Now lately, and it started before the WordPress 4.7 update, I can only make changes for the All Devices in Microthemer, all other changes for different screen sizes are not working anymore.
This All Devices adjustment will show in all screen sizes but individual changes for a specific screen size are not working anymore.
I did not make any changes to my WordPress site, the only thing I changed was to update WordPress to version 4.7, and that did not change a thing.
Has anyone had the same issue and was able to solve it.
Any tips are much appreciated.
I see your problem. There is some invalid CSS output on the following selector: Sidebar LH >> Language selector position. When browsers hit invalid CSS in a stylesheet they don’t apply any subsequent styles, including your responsive styles.
This is the invalid CSS in your stylesheet:
/** Sidebar LH >> Language selector position **/
.wpml-ls-sidebars-menu_widgets_after, .wpml-ls-sidebars-menu_widgets_after .wpml-ls-sub-menu, .wpml-ls-sidebars-menu_widgets_after a {
margin-left: auto;
margin-right: auto;
.wpml-ls-sidebars-menu_widgets_after, .wpml-ls-sidebars-menu_widgets_after .wpml-ls-sub-menu, .wpml-ls-sidebars-menu_widgets_after a { {
margin-right: auto !important;
margin-left: auto !important;
}
The curly braces are a bit off. I’m curious as to how this happened. If you wouldn’t mind sending me login details for your site via this secure contact form I can check your install for any errors. Of course it may have been a copy and paste slip perhaps?
Thanks for your quick reply and great observation.
I have deactivated this CSS and now all other functions are working fine again.
I know exactly how this entry has occurred: This setting was advised by the WPML team due to the fact that I could not get the language selector centered. Now I have deactivated that code the language selector is not centered anymore, looking very strange on mobile view.
I will find an other solution for that, the most important fact is that microthemer is working again.
I really love this plugin.
Thanks again.
.wpml-ls-sidebars-menu_widgets_after, .wpml-ls-sidebars-menu_widgets_after .wpml-ls-sub-menu, .wpml-ls-sidebars-menu_widgets_after a {
margin-right: auto !important;
margin-left: auto !important;
All working fine.
It is indeed strange that de CSS code was duplicated, that was not the info from WPML.
I think I accidentally made this error somewhere in the process.
Yes really enjoying Microthemer, it is one of the best WordPress add-ons I have installed.
It is really great for altering my Photocrati Theme especially to make some differences for multiple screen formats.
One short question: how could you see that there was an invalid CCS in my style sheet?
Would be great to know for future trouble shooting.
In the View menu at the top right, you can choose to view the CSS Microthemer generates in active-styles.css. This CSS content is loaded with syntax highlighting and warnings/errors in the left pane. You can generally ignore the yellow warnings, but a red error needs to be addressed. I saw a red error around the lines I referenced above.
Currently, if you enable SCSS via Preferences > SCSS Microthemer will throw an obvious error when the SCSS isn’t perfect. Because unless the SCSS is perfect, it can’t be compiled to CSS. Now I think about it, this functionality would be helpful for people using the default vanilla CSS mode. I’ll add it to our TO DO list.
Have you done a find and replace on your WordPress database recently? Looking at your stylesheet I can see that the @media rule has your domain name in it. It is as follows:
@westnorwoodfeast.commedia (min-width: 1200px) {
When it should be
@media (min-width: 1200px) {
Were you trying to update emails addresses in the DB by any chance?
You can fix this by editing Microthemer’s media queries using the icon to the left of the tabs.
Think that’s a result of a recent search and replace fiasco which appeneded the site url to all email addresses (and broke the contacts forms!) so forgot to check the @media queries!
