Databases
StackOverflow2013
Postsdbo
POtwitter bootstrap .hidden-lg less not working
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POtwitter bootstrap .hidden-lg less not working
    text
    copied!<pre><code>&lt;!DOCTYPE html&gt; &lt;html class="no-js"&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"&gt; &lt;title&gt;Title&lt;/title&gt; &lt;meta name="description" content=""&gt; &lt;meta name="viewport" content="width=device-width"&gt; &lt;link rel="stylesheet" type="text/css" href="./assets/css/normalize.css" /&gt; &lt;link rel="stylesheet" type="text/css" href="./assets/css/bootstrap.css" /&gt; &lt;script src="./assets/js/less.js" type="text/javascript"&gt;&lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;div class="header-container"&gt; &lt;header class="wrapper clearfix"&gt; &lt;h1&gt;Header&lt;/h1&gt; &lt;nav&gt; &lt;ul&gt; &lt;li&gt;&lt;a href="#"&gt;nav ul li a&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;nav ul li a&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;nav ul li a&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/nav&gt; &lt;/header&gt; &lt;/div&gt; &lt;div class="main-container"&gt; &lt;div class="promo-pod"&gt; &lt;p&gt;Promo pod Promo pod Promo pod Promo pod&lt;/p&gt; &lt;p&gt;Promo pod Promo pod Promo pod Promo pod&lt;/p&gt; &lt;p&gt;Promo pod Promo pod Promo pod Promo pod&lt;/p&gt; &lt;p&gt;Promo pod Promo pod Promo pod Promo pod&lt;/p&gt; &lt;p&gt;Promo pod Promo pod Promo pod Promo pod&lt;/p&gt; &lt;/div&gt; &lt;/div&gt; &lt;!-- #main-container --&gt; &lt;div class="footer-container"&gt; &lt;footer class="wrapper"&gt; &lt;h3&gt;Footer&lt;/h3&gt; &lt;/footer&gt; &lt;/div&gt; &lt;!-- Le javascript ================================================== --&gt; &lt;!-- Placed at the end of the document so the pages load faster --&gt; &lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"&gt;&lt;/script&gt; &lt;!--&lt;script src="assets/bootstrap/js/bootstrap.js"&gt;&lt;/script&gt;--&gt; &lt;script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0-rc1/js/bootstrap.min.js"&gt;&lt;/script&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p>My less for hiding the promo-pod:</p> <pre><code>.main-container { .container(); .make-row(); .main.wrapper { .make-column(12); } .promo-pod { border:1px solid red; .hidden-lg; .make-column(3); } } </code></pre> <p>I decided to change div class="promo-pod" to div class="span4 hidden-lg" and it hid the div, but when it is just div class="promo-pod", all the rules apply except the .hidden-lg;</p> <p>The less file compiles correctly each time I save the file, any help is appreciated.</p> <p>Changed the name to promo, as in , very long, so search for promo in this gist <a href="https://gist.github.com/anonymous/6174366" rel="nofollow">https://gist.github.com/anonymous/6174366</a></p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

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