CODEWITHSUNDEEP
htmlcssangularjsangular-material
fscore
fscore

Reputation: 2619

Angular Material Design text size change

I'm using https://material.angularjs.org/latest/ to make my site responsive. For different screen sizes, I want my font size to change for example,

for small screen, I want font size to be 5px and for greater than medium, 14px.

I have done this so far but font size does not change:

<h3 class=".md-display-1">John</h3>

its css:

@media (max-width: @flex-sm) {
  body{font-size: 2px;}
}

@media (max-width: @flex-gt-md) {
  body{font-size: 30px;}
}

Upvotes: 1

Views: 11181

Answers (1)

joseglego
joseglego

Reputation: 2109

You have some issue with your code.

0 - You are NOT using the class:

 <h3 class=".md-display-1">John</h3>

You must change it to:

 <h3 class="md-display-1">John</h3>

Without the dot. The dot is only to indicate it is a class. And when is id we use #.

1 - You are using variables in CSS. The CSS doesn't support variables. Less/Sass support variables. But if you are using css. You must write the sizes. The standard sizes in Bootstrap are:

/* Extra small devices (phones, less than 768px) */
@media (max-width:767px) {
  body {font-size: 2px;}
}

/* Small devices (tablets, 768px and up) */
@media (min-width:768px) {
  body {font-size: 10px;}
}

/* Medium devices (desktops, 992px and up) */
@media (min-width:992px) {
  body {font-size: 20px;}
}

/* Large devices (large desktops, 1200px and up) */
@media (min-width:1200px) {
  body {font-size: 30px;}
}

2 - Remember use AngularMaterial CSS. They include the Tipography docs in its page: https://material.angularjs.org/latest/CSS/typography . Check there. They use 10px as base. And use em to expand based on clasess.

Upvotes: 2

Related Questions