CODEWITHSUNDEEP
htmlcss
bjbear123
bjbear123

Reputation: 57

When the browser changes size 'squeezes' making the text size lower

All i would like to know is it possible to make text size decrease as i make the browsers size change?

The reason for me doing this is that i am creating a menu bar in pure CSS and when the page gets squeezed currently all the text overlaps each other, I would like to make the text size when browser is 100% 18px and when its squeezed i would like the text to decrease to 12px.

Hopefully its just a simple one line piece of CSS code that allowes me to do this, i am not sure so any help would be appreciated,

Thank you for any help

Upvotes: 1

Views: 494

Answers (2)

JDGuide
JDGuide

Reputation: 6525

Its always recommended to use % for container.You no need to put more effort on this, just apply % instead of px. Example :- 

<div style="widht:100%;height:40%;">
    <div>
      <font size="20px">Hi Mate</font>
    </div>
 <div>
      <font size="20px">How are you</font>
    </div>
</div>

Here the outer <div> is the container ,which should be in % . Its working for me, I have designed more than 5 web site. The text size will automatically change with respective browser .

Hope it will help you.

Upvotes: 1

Joe Cullinan
Joe Cullinan

Reputation: 562

You need to set up media queries.

Media Queries let you define CSS rules based on the way the page is being rendered. So lets say your page breaks when the window is smaller than 1024px.

.myClass { 

    //Default rules for .myClass

    font-size:18px;
  }

@media (max-width: 1024px) { 
    // The rules in here only apply if the window is less than/equal to 1024px
    // So we'll drop the font size so that it fits the smaller screen

  .myClass {
    font-size:12px;
  }
}

I made a JSFiddle here. The media query bases the width off the width of the "Result" frame, so slide that around to make it wider/narrower to see how it works.

Upvotes: 2

Related Questions