Twitter Bootstrap: Responsive CSS does not work on mobile devices

When creating my WordPress Theme ShprinkOne I discovered a responsive CSS problem. Resizing the browser reacted as expected on Desktop but not on mobile devices(Phone, Tablet).

As it is well explain on Bootstrap documentation a proper meta tag is needed to turn the responsive CSS behavior on mobile devices. The viewport meta can be used to control how HTML content will appear in mobile devices. It contains a comma-separated list of properties in the form name=value

If it is happening to you, you will have to insert the following meta on your page header to fix the problem for good.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Sources

Twitter Bootstrap: Error compiling mixins.less with lessphp

If you are trying to compile Twitter Boostrap v2.3 CSS using less and lessphp v0.3.8 you have probably faced a “500 Internal Server Error” message.

It is due to a bug on lessphp side. Bootstrap uses less.js and does not support lessphp.

To fix the problem you will need to open mixins.less file and make a change on the following 6 lines.

mixins.less original file

.span@{index} { .span(@index); } // line:578
.offset@{index} { .offset(@index); } // line:584
.span@{index} { .span(@index); } // line:623
.offset@{index} { .offset(@index); } // line:629
.offset@{index}:first-child { .offsetFirstChild(@index); } // line:630
input.span@{index}, textarea.span@{index}, .uneditable-input.span@{index} { .span(@index); } // line:678

mixins.less fixed

(~".span@{index}") { .span(@index); } // line:578
(~".offset@{index}") { .offset(@index); } // line:584
(~".span@{index}") { .span(@index); } // line:623
(~'.offset@{index}') { .offset(@index); } // line:629
(~'.offset@{index}:first-child') { .offsetFirstChild(@index); } // line:630
(~"input.span@{index}, textarea.span@{index}, .uneditable-input.span@{index}") { .span(@index); } // line:678

Sources

Xampp – Open SSL – Don’t know how to get public key from this private key

When enabling OpenSSL you might get this error message if you use Xampp on Windows. Follow this steps to resolve the problem:

  1. Stop your Apache.
  2. In the folder `xamppphp` you will find two DLL: libeay32.dll and ssleay32.dll. Copy them into the folder `xamppapachebin`
  3. Open the `xamppphpphp.ini` file and remove the semicolon in front of `extension=php_openssl.dll`
  4. Start you Apache