CODEWITHSUNDEEP
htmlcsstwitter-bootstraptwitter-bootstrap-3
THpubs
THpubs

Reputation: 8172

Bootstrap heading font size is small in mobile devices when using rem

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/

Upvotes: 13

Views: 3360

Answers (3)

tohood87
tohood87

Reputation: 728

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.

Upvotes: 13

Rovi
Rovi

Reputation: 259

I don't see any issue. If you still see the issue then there could be 2 ways to resolve this: 1) See that the h1 font-size is not being set again in the media query 2) Check the base font applied to the html & whether it is being reset in the media query

Upvotes: 0

NoChecksum
NoChecksum

Reputation: 1226

rem is a unit relative to the font size of the base (html) tag. The default in browsers is usually 16px if you haven't explicitly declared it. Perhaps the mobile browser has a smaller default?

Try setting the base font size before using rem units:

html { font-size: 16px; }

Upvotes: 0

Related Questions