Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>I've written a solution to this using jquery and some js to manage the window resizing dynamically. Basically the function <code>conflayout()</code> manages the setup and this is basically called every time the window is resized and also once at the beginning to set the original.</p> <p>To change the set size at which the design becomes fluid, change 800 in : <br/> <code>if (window.innerWidth &gt; 800) {</code></p> <p>to whatever number you like.</p> <p>when the width of the screen becomes smaller than that number a div is wrapped around the contents of <code>body</code> which acts as a wrapper that remains static.</p> <p>Live Example:</p> <p><a href="http://thepelican.me/liquidcssexample.html" rel="nofollow">http://thepelican.me/liquidcssexample.html</a></p> <hr> <p>The js:</p> <pre><code>var waitForFinalEvent = (function () { var timers = {}; return function (callback, ms, uniqueId) { if (!uniqueId) { uniqueId = "Don't call this twice without a uniqueId"; } if (timers[uniqueId]) { clearTimeout (timers[uniqueId]); } timers[uniqueId] = setTimeout(callback, ms); }; })(); $(window).resize(function () { waitForFinalEvent(function(){ conflayout() //... }, 1, "reloadproperties"); }); function conflayout() { if (window.innerWidth &gt; 800) { $('#left').width((window.innerWidth-$('#sidebar').width())+1) $('#left, #sidebar').css({minHeight: window.innerHeight-$('#header').height()}) $("#wrapper").unwrap(); $('#wrapper').css({width: 'auto !important'}); } else { if($('#contain').size() &lt; 1) { $('body').wrapInner('&lt;div id="contain" /&gt;'); } $('#wrapper').css({width: '800px !important'}); $('#contain').css({width: '800px',position: 'fixed', height: '100%' }) } } $(document).ready(function() { conflayout() }); </code></pre>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
    2. VO
      singulars
      1. This table or related slice is empty.
    3. VO
      singulars
      1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload