Menu
In my app I use Bootstrap and I set 2rem to my h2 element and 1.7rem to my h3 tag. Even if I adjust the browser width in my desktop (to the size of a mobile) the h1 is bigger than h3 which is what I want. But if I use the developer tools to switch to a mobile device view or view the site from my phone the h1 becomes smaller than the h3! What might be happening in here? It happened in multiple sites I created.
Example fiddle (Could not replicate the issue in the fiddle. But it's the code) : https://jsfiddle.net/gor87kg6/1/
The live site which have the issue : http://jayatours.lk/
377
There are no dedicated mixins for typography, but Bootstrap does use Responsive Font Sizing (RFS).
Because Bootstrap 4 uses rem for the font-size unit of most of it's elements, you can set the font-size in px on the HTML element in your own stylesheet and this will change the default sizing Bootstrap applies to your elements.
It is worth mentioning that Bootstrap 4 kept breakpoints in px and not em . From the docs: While Bootstrap uses ems or rems for defining most sizes, pxs are used for grid breakpoints and container widths. This is because the viewport width is in pixels and does not change with the font size.
Bootstrap 5 uses a default font-size of 1rem (16px by default), and its line-height is 1.5.
Following the Bootstrap mobile first approach I noticed your website was not utilising the viewport meta.
Try adding the following to the <head>:
<meta name="viewport" content="width=device-width, initial-scale=1">
Background Information:
Mobile browsers render pages in a virtual "window" (the viewport), usually wider than the screen, so they don't need to squeeze every page layout into a tiny window (which would break many non-mobile-optimized sites). Users can pan and zoom to see different areas of the page.
Viewport Information:
The width property controls the size of the viewport. It can be set to a specific number of pixels like width=600 or to the special value device-width value which is the width of the screen in CSS pixels at a scale of 100%. (There are corresponding height and device-height values, which may be useful for pages with elements that change size or position based on the viewport height.)
I believe this may be the cause of your issue as the use of rem seems to be correctly implemented. It might be more likely down to the dpi/ screen resolution of the mobile/ tablet device itself.
89
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
