CODEWITHSUNDEEP
twitter-bootstrapcss
user5147423
user5147423

Reputation:

Change size of text

I have such part html template. I use bootstrap for stylish.

<div class="row">
  <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 positon-relative-block-down">
     <p class="down">Lorem Ipsum is simply dummy</p>
  </div>
  <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 positon-relative-block-up">
      <p class="up">Lorem Ipsum is simply dummy Lorem Ipsum is simply dummy</p>
  </div>
  <div class="col-lg-7 col-md-7 col-sm-8 col-xs-11 positon-relative-block-describe">
       <p class="describe">Lorem Ipsum is simply dummy Lorem Ipsum is simply dummy</p>
   </div>
</div>

I have such problem: if my window size will be col-xs, my text does not fit. My question is how add style for text for col-xs, which must be smaller?

Upvotes: 1

Views: 57

Answers (2)

Luca Detomi
Luca Detomi

Reputation: 5716

One example could be:

@media screen and (max-width:480px)
{
  [class*='col-xs'] p
  {
    font-size:10px;
  }
}

In this way, you force font-size for all elements containing a paragraph p inside a generic "col-xs" class (col-xs-6, col-xs-3) specifically an only when screen width is lower than typical screen width used by XS suffix of Bootstrap classes.

Upvotes: 1

cesar moro
cesar moro

Reputation: 168

I recomend you to try use vw instead of px for font size, example:

div { font-size:2vw}

The vw is ViewportWidth that will make your font responsive to the device width, try it is very usefull for responsives designs, you could see a example here:
https://css-tricks.com/viewport-sized-typography/
Thats was the solution for me in responsive world. Hope its help you.

Upvotes: 1

Related Questions