Bootstrap Media Queries Rails Error

I am trying to make the font on my app larger for small devices by overriding bootstrap media queries. I am trying to do it like this, by setting the font size for h1's using boot

Solution 1:

Looks like this number explains what was going on on the bootstrap migrating to bootstrap 4 website:

https://v4-alpha.getbootstrap.com/migration/

All @screen- variables have been removed in v4.0.0. Use the media-breakpoint-up(), media-breakpoint-down(), or media-breakpoint-only() Sass mixins or the $grid-breakpoints Sass map instead.

If you're using sass you can do something like this for small devices:

@include media-breakpoint-up(xs) {
  strong {
    font-size: 5rem;
  }
}

But I ended up ultimately setting the values:

@media (min-width: 576px) {
  strong {
    font-size: 4rem;
  }
}

Solution 2:

The media query should say:

@media (min-width: $screen-sm-min) {
  h1 {
    font-size: 5rem;
  }
}

variables in css start with a dollar sign. Assuming the variable is actually called screen-sm-min, you should be good. You also forgot the semi-colon after font-size: 5rem just FYI