Responsive Headings

Bootstrap Studio Help
1

For a responsive Main Header Tite Inside a Fluid Container, I have placed two identical text headings (H2, H3) which are also inside nested divs in order to write a smaller H3 Heading at xsm and sm.

This is the structure not exactly the html, just used the Component windows to do it, really.

<body> <container> fluid

<div> H2 Heading is off at xsm and sm <div> H3 Heading is off at xl and l </div> </div>

</container>

This concept works perfectly inside of Bootstrap Studio, but it does not work in Firefox or Edge.

I have also tried <body> <container> fluid H2 Heading is off at xsm and sm H3 Heading is off at xl and l </container>

AND <body> H2 Heading is off at xsm and sm H3 Heading is off at xl and l

Any ideas to make this work, or is it a browser problem? I thought this is what we should be doing for responsive design, Otherwise the title is too big on a phone!

2

I now notice that the smaller H3 Heading is appears to be used by the Cell phone browser, although the Desktop Browsers do not use the smaller H3 when width is restricted down to telephone pixel width. It would be nice to make desktop browsers more responsive to the Bootstrap code (with some specialized formatting perhaps), but perhaps it is not possible.

4

I would assume you are actually using the following?

<*body>
    <h2 class="hidden-xs hidden-sm">Heading</h2>
    <h3 class="hidden-md hidden-lg">Heading</h3>
<*/body>

This should work correctly. You have to use the responsive mode in each of the desktop browsers (F12) Dev tools for it to work right because it uses viewport not element widths.

Saj

5

Thank you Saj, I believe it is basically the same as you show.

<div> <h3 class="text-center text-info visible-xs-block visible-sm-block">1853 Captain Wheeler House</h3> </div>

   <div> 
          <h2 clase="text-center text-info hidden-xs hidden-sm">1853 Captain Wheeler House</h2>
    </div>

You have to use the responsive mode in each of the desktop browsers (F12) Dev tools for it to work right because it uses viewport not element widths. Firefox https://developer.mozilla.org/en-US/docs/Tools/Responsive_Design_Mode Tools > Web Dev > Responsive Design Move (ctrl-shift-m) has to have a check mark to be in that mode. --IT seems to be working now, ...better than before. I learned something new here. Thanks. Saj

Its here http://spring-resonance-9636.bss.design/