CODEWITHSUNDEEP
htmlcsssassbootstrap-4
morgred
morgred

Reputation: 1117

How to change Bootstrap 4 heading font sizes on various screen widths with SASS?

The goal is pretty straightforward: i need different font sizes for different screen sizes. I'm striving to code smartly here but it doesn't work like i expected. Upon researching the only thing that occurred to me is that there might be a problem between how the queries and variables play with each other, but i'm not sure. Here's what i tried expecting it to work:

@media (max-width: 768px) {
    $h1-font-size:                $font-size-base * 1.944;
    $h2-font-size:                $font-size-base * 1.555;
    $h3-font-size:                $font-size-base * 1.333 !default;
    $h4-font-size:                $font-size-base * 1.222 !default;
    $h5-font-size:                $font-size-base * 1.111 !default;
    $h6-font-size:                $font-size-base !default;

    .mixin-testix {
        font-size: 40px;
    }
} 


@media (min-width: 768px) and (max-width: 992px) {
    $h1-font-size:                $font-size-base * 2.222;
    $h2-font-size:                $font-size-base * 1.777;
    $h3-font-size:                $font-size-base * 1.388 !default;
    $h4-font-size:                $font-size-base * 1.222 !default;
    $h5-font-size:                $font-size-base * 1.111 !default;
    $h6-font-size:                $font-size-base !default;    
} 


@media (max-width: 992px) and (max-width: 1200px) {
    $h1-font-size:                $font-size-base * 2.777;
    $h2-font-size:                $font-size-base * 2.222;
    $h3-font-size:                $font-size-base * 1.666 !default;
    $h4-font-size:                $font-size-base * 1.222 !default;
    $h5-font-size:                $font-size-base * 1.111 !default;
    $h6-font-size:                $font-size-base !default;
}

Upvotes: 1

Views: 1254

Answers (1)

Carol Skelly
Carol Skelly

Reputation: 362380

You can't reassign the value of a variable inside a @media query, but you can use the value of a variable inside a @media query. For example,

@media (min-width: 768px) and (max-width: 991.98px) {
    h1, .h1 { font-size: $font-size-base * 2.222; }
    h2, .h2 { font-size: $font-size-base * 1.777; }
    h3, .h3 { font-size: $font-size-base * 1.388; }
    h4, .h4 { font-size: $font-size-base * 1.222; }
}

Demo: https://www.codeply.com/go/8wiWhxkaFZ

Also note: there's a typo in your largest media query. It should be min-width not max-width.

@media (min-width: 992px) and (max-width: 1200px) {

Upvotes: 1

Related Questions