I'm trying to make a responsive website with SASS Bootstrap but I'm having problems with sass stylesheets.
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.
I have also made a separate stylesheet for my media queries and it is not responding!
Head:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="css/sass-bootstrap.css" rel="stylesheet">
<link href="sass/main.scss" rel="stylesheet">
<link href="sass/media-screens.scss" rel="stylesheet">
Scripts:
<script src="https://code.jquery.com/jquery.js"></script>
<script src="js/sass-bootstrap.min.js"></script>
Media Queries:
$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 > li a {
font-size: 1.145em;
padding: 0 1.24em;
}
}
I'm probably doing something wrong but if anyone could be of any help I would appreciate it.