CODEWITHSUNDEEP
htmltwitter-bootstrapcss
EagleBlind
EagleBlind

Reputation: 25

Bootstrap /media queries to make text smaller

i am just learning how to use bootstrap and media queries for the first time. I am trying to make some text get smaller when the screen gets smaller , however for some reason i am not sure why bootstrap does not do this, does this mean i need to use media queries ? or is there a function in bootstrap ?

HTMl:

  <div class = "Logo">
  <a class="navbar-brand" href="#">
      <h1>Hello</h1>
      <h2>There</h2>
      <h3>You</h3><br/>
    <p>Time To make a change</p>
  </a>  
 </div>

CSS:

@media (max-width: 480px) {

      .Logo {
        Float : left; 
        height : 20px;
        width: 70px; 
      }

}

I want it so that when someone was to launch it in an iphone etc the text which is in the navbar will just shrink and become smaller, but for some reason it is not doing it.

Thanks again for all the help , sorry if this is a basic question but just trying to understand bootstrap etc :)

Upvotes: 0

Views: 472

Answers (2)

testrDev
testrDev

Reputation: 17

you can solve your issue by simply adding 'viewport' meta tag in your html.

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

This meta tag scales your whole content according to the dimensions of the device the web page is currently being viewed on. You can find more about this tag here.

Upvotes: 0

Anne Douwe
Anne Douwe

Reputation: 691

I think you can just use:

@media (max-width: 480px) { .Logo { Float : left; height : 20px; width: 70px; } Logo.h1 { font-size: 80%; } Logo.h2 { font-size: 80%; } Logo.h3 { font-size: 80%; } }

This will make it 80% of the original size.

Source: W3schools

Upvotes: 1

Related Questions