Inspiring

Answered

Make Jumbotron heading smaller in mobile display

Forum|Forum|5 years ago
May 30, 2021
15 replies
1295 views

Hi,

I have a <h1 class "display -2"> heading in my jumbotron which works great on most size of display, but overflows on the mobile screen.

How would I reduce the heading size, only for the mobile display?

The site is https://www.quodvultdeus.com/

Thank you in advance for your help, which is invaluable.

This topic is closed to new replies. Start a new post to keep the conversation going.

Correct answer osgood_

Unfortunately Bootstrap is very limited in terms of what it gives you to work with hence its display-X properties are set in stone, unless you somehow alter them with media queries.

@media screen and (max-width: 768px) {
.display-2 {
font-size: 3em!important;
}
}

You can do this by either adding the block of css code in the <head></head> section of your page wrapped in <style></style> tags OR linking a seperate css stylesheet to your page, AFTER the link to the default Bootstrap css file.

Nancy OShea

Community Expert

Fix your code errors. You have too many and they will come back to bite you later.

https://validator.w3.org/nu/?doc=https%3A%2F%2Fwww.quodvultdeus.com%2F

Nancy O'Shea— Product User & Community Expert

BenPleysier

Community Expert

Sorry, I did not realise that you were using Bootstrap. Actually Bootstrap 4.3+ has a built in function to do that. This has to be expressly set, while Bootstrap 5 ships with the fuction.

Have a look at https://christianoliff.com/blog/bootstrap-with-rfs/

Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!

O

osgood_

Legend

I dont think RFS is a great solution to be honest - a lot of the headings text look way too large to me at smaller screen sizes. It's a 'lazy' approach but if you're not that fussy, it can work for you.

BenPleysier

Community Expert

I dont think RFS is a great solution to be honest - a lot of the headings text look way too large to me at smaller screen sizes. It's a 'lazy' approach but if you're not that fussy, it can work for you.

By @osgood_

What an uneducated statement! You do not have to use those values if they do not suit your situation. I say,: `adjust the values to suit` as with all examples.

Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!

O

osgood_Correct answer

Legend

Unfortunately Bootstrap is very limited in terms of what it gives you to work with hence its display-X properties are set in stone, unless you somehow alter them with media queries.

@media screen and (max-width: 768px) {
.display-2 {
font-size: 3em!important;
}
}

You can do this by either adding the block of css code in the <head></head> section of your page wrapped in <style></style> tags OR linking a seperate css stylesheet to your page, AFTER the link to the default Bootstrap css file.

W

Weat01Author

Inspiring

Hi, I selected 'screen' in the media query box, then handheld?

When I typed in the code above, I got a rebrace error - not sure why?

@media handheld{
.QVheader {
.display-2 {
font-size: 3em!important;
}
}

W

Weat01Author

Inspiring

sorry, dumb! I took out the extra class ID of QVHeader and error disappeared.

BenPleysier

Community Expert

Although this article uses responsive font size for the whole document, I would advise against that. You could replace `html` with `h1.display-2`

Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!

BenPleysier

Community Expert

The CSS would look like

@media screen and (min-width: 320px) {
    h1.display-2 {
        font-size: calc(16px + 6 * ((100vw - 320px) / 680));
    }
}

@media screen and (min-width: 1000px) {
    h1.display-2 {
        font-size: 22px;
    }
}

Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.