CODEWITHSUNDEEP
htmlcssresponsive-designpixeltext-size
ioan
ioan

Reputation: 295

CSS HTML why do things resize based on screen width when I specify width in px?

How come text resizes proportionally when the screen resizes even though I set the font size in px instead of em or % or something like that? I'm pretty sure the pixels on my monitor don't change size...

When I set the px value to look normal on a wide screen it ends up way too small on small screens like cellphones. I want to be able to use something like @media screen and (max-width: 1000px) to specify what the text should be on small screens instead of it shrinking on its own.

I made a very simple page to make sure nothing I did earlier messes with it. I have the text sized to be readable on a regular pc screen:

enter image description here

But if I resize the screen to less then 1000px width the text shrinks without me specifying the new text size or using em or % values.

enter image description here

The text should fill like half the empty space.

HTML:

<html>
<head>
<meta charset=\"UTF-8\">
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body>
<div class="banner">
<div>
    <div class="t_banner">Banner</div>
    <div class="t_banner2">Banner sub text</div>
</div>
<div><span>Phone</span> <span>999-999-9999</span></div>
</div>
</body>
</html>

CSS:

body{margin: 0;}

.banner{background-color: #f0eedb; height: 185px; box-shadow: 0px 4px 15px #555;}

.t_banner{color: #413e3e; font-size: 50px; font-weight: 600; font-family: Roboto Condensed, serif; border-bottom: solid 3px #222;}
.t_banner2{color: #413e3e; font-size: 45px; font-weight: 500; font-style: italic; font-family: Roboto Condensed, serif;}

EDIT: I experimented by removing the height: 185px; from the .banner styles. Then I added some more text to the banner:

enter image description here

I also added a

with no styles between the and the . The banner text is still resizes, but the the phone and

"text" at the bottom doesn't.

Now if I either remove the extra "banner sub text" or bring back "height 185px" then everything, including the completely unrelated p text ends up tiny. Everything seems completely random at this point, and I only have like 2 files with a few lines each

Upvotes: 0

Views: 2602

Answers (1)

David Taiaroa
David Taiaroa

Reputation: 25495

I think what is throwing you off is that you don't have a viewport meta tag in the head of your document, and without this, by default mobile devices will typically scale the page to fit the screen.

Scaling the page usually includes scaling the images, and as you have seen, scaling the font sizes.

To verify this check this codepen: https://codepen.io/panchroma/pen/MERRxy

If you visit the live view at https://s.codepen.io/panchroma/debug/MERRxy/wQAPoZQNRWer on any device I think you will find that the fonts are full size and isn't shrinking.

The HTML and CSS for this example are exactly the same as you have posted above, except that I added a viewport meta tag in the head of the page. You'll see that if you comment out this tag, font sizes will shrink in the live view.

More about viewport meta tags:
https://www.w3schools.com/css/css_rwd_viewport.asp

Hope this helps!

HTML 

<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<meta charset="UTF-8">
<!-- <link rel="stylesheet" type="text/css" href="styles.css" /> -->
</head>
<body>
<div class="banner">
<div>
    <div class="t_banner">Banner</div>
    <div class="t_banner2">Banner sub text</div>
</div>
<div><span>Phone</span> <span>999-999-9999</span></div>
</div>
</body>
</html>

CSS 

body{margin: 0;}

.banner{background-color: #f0eedb; height: 185px; box-shadow: 0px 4px 15px #555;}

.t_banner{color: #413e3e; font-size: 50px; font-weight: 600; font-family: Roboto Condensed, serif; border-bottom: solid 3px #222;}
.t_banner2{color: #413e3e; font-size: 45px; font-weight: 500; font-style: italic; font-family: Roboto Condensed, serif;}

Upvotes: 2

Related Questions