Responsive Theme: Micorthemer only changes items in the "all devices Tab".

Tagged: ,

Author Posts

Harald777 December 13, 2016 at 11:23 am

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

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.

Sebastian December 13, 2016 at 1:02 pm

Hi there,

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!
Sebastian

Harald777 December 13, 2016 at 3:47 pm

Sebastian,

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.


Harald777 December 13, 2016 at 4:03 pm

p.s.
Changed the language selector code in:

.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.

Sebastian December 13, 2016 at 4:56 pm

Ah that’s great that you managed to get everything working in the end. And that you’re enjoying Microthemer. It’s always nice to hear!

Cheers,
Sebastian

Harald777 December 16, 2016 at 10:43 am

Sebastian,

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.

Greetings, Harald

sktthemes December 21, 2016 at 8:56 am

nice discussion..

Sebastian December 21, 2016 at 11:13 am

Sorry, I missed your last question Harald.

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.

Cheers!
Sebastian

Harald777 December 27, 2016 at 9:14 am

Thanks for the tip.
Greetings Harald

nuphunk March 27, 2019 at 8:36 pm

Hi There,

I am having a similar issue here , but can’t see anything highlighted in the css view?

Thanks

Pete

Sebastian March 28, 2019 at 10:50 am

Hey Pete,

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.

Cheers,
Sebastian

nuphunk March 28, 2019 at 11:38 am

Doooh

How did i miss that!

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!

Thanks Sebastian!

Sebastian March 28, 2019 at 11:39 am

You’re welcome 🙂

You must login or register to reply to this topic.