Magic Liquidizer for WordPress FAQ

Magic Liquidizer Documentation

This answers Frequently Asked Questions (FAQs) addressed from Magic Liquidizer WordPress users. But if you’re still having problems or concerns please contact us, or if you wish us to do the installation  for you, you can pay  installation fee instead upon purchase.

About License activation and Implementation

How Magic Liquidizer plugin works?

Easily makes your website responsive to smartphone and tablet screens. It magically converts HTML elements such as images, tables, forms, videos and other HTML elements into fluid feature.

Is this plugin Safe?

Yes. This plugin is 100% safe since this will only execute or run on smaller screens such as tablets and smartphones. You can’t most likely spot any difference on larger screens such as laptops and desktops. It will not wreck your core files as this will only generate pseudo HTML elements to conform with device screens.

Can I install it on other websites?

Yes. If you purchase a personal license, you are only allowed to install it to websites you owned. If you wish to install to 3rd party websites, get a developer’s copy instead. See the license.txt for licensing terms.

Why I couldn’t notice any effect after installing Magic Liquidizer?

Probably because you haven’t activated your plugin, to do this go to your plugin section then activate. After activation go to wordpress Dashboard  > Magic Liquidizer > Setup Wizard.

Still no effect? you should read  our documentation or contact us instead.

Why my website got messy on smaller screen or minimize?

Most websites has incompatible background images, you can disable it via advance settings and custom a background of your own by editing media queries section as long as you are familiar with CSS.

Probably you have inputted wrong fields value.

About Main Settings

Always remember Classes represents (.) and ID’s represents (#) and must be added before their respective names e.g .wrapper, #wrapper.

What main HTML element do you want responsive function to initiate?

You can specify which particular element such as body, html, #container, .wrapper, etc.
html – (currently as a default) means the entire website frame or <html> tag.
body – means <body> tag.
#container – represents an ID <div id=container> that is present in your webpage’s HTML code</div>
.wrapper – represents a class like <div class=wrapper></div>
See the HTML layout below.



<div id=”container”>

<h1>This a heading</h1>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>




Please watch this video tutorial on how to get ID or Class selector from a source code of web page.

What ‘Which particular elements’ means?

This is to specify which specific HTML tag you are going to make responsive. Ideally those elements with fix width let say 300px and above should be included such as body,div,pre,code,cite,header,summary,footer,article,p separated by comma or space.

How about ‘Main Container’?

This should be your main wrapper, its ideal to use html or body tag.

How about ‘Website Layout Width’?

This is numerical value like 960, 1170, 840, etc. The image below shows 1150 website width in px. You can utilize firebug firefox plugin or native Google chrome inspector to check your website main layout width (excluding margins). If you are still having difficulties, please contact us.
Screen shot 2013-10-08 at 11.11.52 PM.

How about ‘Disable Horizontal Bar’?

It is just a CSS trick to hide overflow-x added in the HTML tag to avoid horizontal scroll bar. It is advisable not to use this until your website is tested and ready.

Responsive Navigation Bar Settings

How to determine my website Navigation #ID or .Class

You can use firebug or native Google chrome inspector to see what Class or ID your navigator has together with ‘Navigation Select’.

Advanced Settings

This information is intended for those who will use the advanced option.

How Advanced Settings Works?

You may want to add or remove a particular element to desktop and non desktop screens. All values are safe as this software will only initiate on smaller screens. Again Classes represents (.) and ID’s represents (#) and must be added before their respective names e.g .wrapper, #wrapper separated by comma or space.

In media queries box, you can use .id-tablets and .id-smartphones. Let say you want to do CSS adjustment on H1 font-size tag. You can use

/* CSS for Smartphone Screens */ .ReplacedByYourClass 
	display: hide !important;

/* CSS for Tablet Screens */ .ReplacedByYourClass {
    display: hide !important;

/* For both Smartphones and Tablets */ .ReplacedByYourClass {
   display: hide !important;

For Customizing Media Queries you can read information here.

Elvin is one of the contributors of He has been creating Wordpress Plugins, Magento Extensions, & Mobile Applications. If you find this article useful, please Follow him on .
About Elvin D.

One thought on “Magic Liquidizer for WordPress FAQ”

Leave Your Thought