Skip to main content
W
Weat01
Inspiring
May 30, 2021
Answered

Make Jumbotron heading smaller in mobile display

  • May 30, 2021
  • 4 replies
  • 1262 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 has been closed for replies.
    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.

    4 replies

    Nancy OShea
    Community Expert
    Nancy OSheaCommunity Expert
    Community Expert
    May 30, 2021

    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
      BenPleysierCommunity Expert
      Community Expert
      May 30, 2021

      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
        May 30, 2021

        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
        BenPleysierCommunity Expert
        Community Expert
        May 30, 2021
        quote

        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
        May 30, 2021

        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
          May 30, 2021

          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
          May 30, 2021

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

          BenPleysier
          Community Expert
          BenPleysierCommunity Expert
          Community Expert
          May 30, 2021

          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
          BenPleysierCommunity Expert
          Community Expert
          May 30, 2021

          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!
          Terms & ConditionsAccessibility statement
          Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices