Bpptstrap media inquiry: Where does it go?

Previous Topic Next Topic
 
classic Classic list List threaded Threaded
1 message Options
Reply | Threaded
Open this post in threaded view
|

Bpptstrap media inquiry: Where does it go?

Ralph Shnelvar
Bpptstrap media inquiry: Where does it go? I have the following code in ~/app/assets/stylesheets/application.scss:

/*
* This is a manifest file that'll be compiled into application.css, which will include all the files
* listed below.
*
* Any CSS and SCSS file within this directory, lib/assets/stylesheets, or any plugin's
* vendor/assets/stylesheets directory can be referenced here using a relative path.
*
* You're free to add application-wide styles to this file and they'll appear at the bottom of the
* compiled file so the styles you add here take precedence over styles defined in any other CSS/SCSS
* files in this directory. Styles in this file should be added after the last require_* statement.
* It is generally better to create a new file per style scope.
*
* require_tree .
* require_self
*/

// See
//  https://www.youtube.com/watch?v=vcBXXOdPfgE&index=8&list=PLYM1n9xxMy4ClO2GjX73U3BLsXx9Z7wh5
$navbar-default-bg: red;

// Shnelvar
//   See https://github.com/twbs/bootstrap-sass
@import "bootstrap-sprockets";

// Custom bootstrap variables must be set or imported *before* bootstrap.
@import "bootstrap";

// Shnelvar
//   For ralph-shiny-button etc.
@import "ralph";

// Shnelvar
//   See https://stackoverflow.com/questions/33404154/bootstrap-change-the-navbar-font-size
//   See https://teamtreehouse.com/community/how-do-you-change-the-bootstrap-font-style
.nav a{
   color: white !important;
   // font-size: 3.8em !important;
   font-size: 2.8em;
   }

and the navbar works correctly.


I'd like to add
// See https://getbootstrap.com/docs/4.0/layout/overview/
h1 {
 @include media-breakpoint-only(xs) {
   color: red;
 }
 @include media-breakpoint-only(sm) {
   color: green;
 }
 @include media-breakpoint-only(md) {
   color: blue;
 }
 @include media-breakpoint-only(lg) {
   color: yellow;
 }
 @include media-breakpoint-only(xl) {
   color: orange;
 }
}

but am clueless where to put this code so that h1 changes color as the window size changes

If I place the above Bootstrap media queries at the end of ~/app/assets/stylesheets/application.scss then I get the error:
Undefined mixin 'media-breakpoint-only'.

--
You received this message because you are subscribed to the Google Groups "Ruby on Rails: Talk" group.
To unsubscribe from this group and stop receiving emails from it, send an email to [hidden email].
To post to this group, send email to [hidden email].
To view this discussion on the web visit https://groups.google.com/d/msgid/rubyonrails-talk/1856722714.20180827005838%40dos32.com.
For more options, visit https://groups.google.com/d/optout.