Note that there are some explanatory texts on larger screens.

plurals
  1. POtwitter bootstrap .hidden-lg less not working
    primarykey
    data
    text
    <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>
    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.
 

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