title: SASS bootstrap media queries/sass files
body: <p>I'm trying to make a responsive website with SASS Bootstrap but I'm having problems with sass stylesheets.</p>
  
  <p>When I include the sass version of my style sheet it only picks out certain elements of my HTML, like the top level elements, not anything that is inside a row or a column, whereas the CSS version works perfectly fine.</p>
  
  <p>I have also made a separate stylesheet for my media queries and it is not responding!</p>
  
  <p>Head:</p>
  
  <pre><code>&lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
  &lt;link href="css/sass-bootstrap.css" rel="stylesheet"&gt;
  &lt;link href="sass/main.scss" rel="stylesheet"&gt;
  &lt;link href="sass/media-screens.scss" rel="stylesheet"&gt;
  </code></pre>
  
  <p>Scripts:</p>
  
  <pre><code>&lt;script src="https://code.jquery.com/jquery.js"&gt;&lt;/script&gt;
  &lt;script src="js/sass-bootstrap.min.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>Media Queries:</p>
  
  <pre><code>$screen-lg-min: 1200px;
  $screen-md-min: 992px;
  $screen-sm-min: 768px;
  
  /* Extra small devices (phones, less than 768px) */
  /* No media query since this is the default in Sass Bootstrap */
  
  /* Small devices (tablets, 768px and up) */
  @media (min-width: $screen-sm-min) { 
  
  }
  
  /* Medium devices (desktops, 992px and up) */
  @media (min-width: $screen-md-min) { 
  
  }
  
  /* Large devices (large desktops, 1200px and up) */
  @media (min-width: $screen-lg-min) { 
  
  .header .navigation ul.primary-menu &gt; li a {
      font-size: 1.145em;
      padding: 0 1.24em;
  }
  }
  </code></pre>
  
  <p>I'm probably doing something wrong but if anyone could be of any help I would appreciate it.</p>