Responsive Display Headings

I really like these larger, thinner headings that are provided:

<h1 class="display-1">Display 1</h1>
<h1 class="display-2">Display 2</h1>
<h1 class="display-3">Display 3</h1>
<h1 class="display-4">Display 4</h1>

As shown here: https://v4-alpha.getbootstrap.com/content/typography/#display-headings

But I've find that on smaller screens, these are almost always way too large. Could you consider adding responsive breakpoints like so:

<h1 class="display-l-1">Display 1</h1>
<h1 class="display-l-2">Display 2</h1>
<h1 class="display-md-3">Display 3</h1>
<h1 class="display-md-4">Display 4</h1>

so that the text can return to the standard h1 h2 etc font style on smaller screens?

This could be solved with #23816
Result: http://martijncuppens.github.io/rfs/docs/4.0/content/typography/#display-headings

This is still an issue. Any plans to fix?

I'm still facing the same issue. They haven't fixed it yet, I guess.

I just added this in my custom.scss, which worked for the sites I've been working on:

@media (max-width: 575.98px) {
//Manage Display Headers for Mobile Devices
.display-1 {
font-size: 3rem;
font-weight: 300;
line-height: 1.0;
}

    .display-2 {
        font-size: 2.75rem;
        font-weight: 300;
        line-height: 1.0;
    }

    .display-3 {
        font-size: 2.25rem;
        font-weight: 300;
        line-height: 1.0;
    }

    .display-4 {
        font-size: 1.75rem;
        font-weight: 300;
        line-height: 1.0;
    }

}

Closing this due to the Responsive Font sizes PR.

am curious, why this is not incorporated into the framework itself yet?

@anandchakru

@anandchakru, kind of wonder why, seems like a good fix??

Navigation Menu

Repository navigation

Responsive Display Headings #22104

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Responsive Display Headings #22104

Description

Activity

MartijnCuppens commented on Dec 26, 2017

knalette commented on Mar 20, 2018

prashaddey commented on May 7, 2018

knalette commented on May 8, 2018

XhmikosR commented on Oct 21, 2018

anandchakru commented on May 20, 2019

ck9sky commented on Jun 30, 2019

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions