Adjusting Font Size in Angular Material Design

Recently, I incorporated https://material.angularjs.org/latest/ to optimize the responsive design of my website. One key feature I am focusing on is adjusting the font size based on different screen sizes.

For smaller screens, I intend to set the font size at 5px and for larger screens above medium size, it should be 14px. However, despite my efforts, the font size remains unchanged:

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

This is the CSS code I have implemented:

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

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

Answer №1

There seems to be an issue with your code that needs addressing.

0 - It appears that you are NOT utilizing the class correctly:

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

To correct this, please change it to:

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

Remember, omit the dot when defining a class. The dot is used only as a notation for classes, not in the actual class name. For IDs, you would use # instead.

1 - It seems like you are using variables in CSS. Please note that CSS does not support variables natively. You can use Less/Sass to utilize variables. If you are only using CSS, make sure to specify sizes directly. In Bootstrap, standard sizes are typically:

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

2 - Be sure to incorporate AngularMaterial CSS into your project. They provide detailed Typography documentation on their page: https://material.angularjs.org/latest/CSS/typography. According to their guidelines, they use 10px as a base size and utilize em units for scaling based on classes.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Refresh div content dynamically with anchor tag in place

I have a dilemma with the following div that contains an anchor tag linking to a php script responsible for updating information in a database and returning to this page. My goal is to execute this php script by clicking on the anchor tag, update the datab ...

javascriptphpjqueryhtmlajax

Having trouble with Isotope masonry functionality

While experimenting with Isotope from , I tested the reLayout method using the provided example found at . I copied the css and js to my page () but encountered an issue where clicking on the first element caused all other elements to move to the first col ...

javascriptjquerycss

Click a button to adjust the height of an element

My webpage features a dashboard with tabs on the left and corresponding content on the right. To ensure proper alignment, I have utilized Bootstrap to create two columns - one for the tabs and one for the content. However, I am facing an issue where the bo ...

javascriptjqueryhtmlcsstwitter-bootstrap

Implementing ng-show in the controller using $index variable

I have a list of items displayed using ng-repeat and I want to show the "Status" text next to an item when a certain event occurs, such as a click. I know I can use $index for this, but I'm struggling to understand how to implement it in the controlle ...

angularjsangularjs-ng-repeat

How come the Google fonts won't display correctly within my HTML document?

After importing some fonts into my CSS file, I noticed that they are not displaying correctly in the design. Below is the code for the imported fonts and CSS linking: https://i.stack.imgur.com/9RQ4u.png The output only shows sans-sarif working properly: ...

htmlcssgoogle-fonts

combine a pair of elements simultaneously

I recently developed a nested directive for a multitabbed form, and here is a simplified version: <outer> <inner heading="a" src="'a.html'" active="true"></inner> <inner heading="b" src="'b.html'"></inner ...

javascriptangularjsangularjs-directive

The absence of a datepicker in Bootstrap has become glaringly obvious

My form includes a single date input using <input type='date' class='form-control'>. When utilizing the form-control feature from Bootstrap 5, the default white color is applied to the date picker, matching the rest of the form. ...

htmlcssbootstrap-5

Adding a JSON file to an Angular app hosted on a Grunt server

I'm currently following a beginner's guide for Angular and I need to incorporate a JSON file into my project. I started off by using Yeoman to set up my application, which is running on grunt. var phonecatApp = angular.module('phonecatApp& ...

javascriptjsonnode.jsangularjsgruntjs

What is the method for applying border-corner-radius exclusively to the left side of a button using jquery-ui-1.9.2.custom?

In my HTML code, I have the following: <div id="ot-lang-src"> <button id="rerun"></button> <button id="select">Choose a language</button> <ul id="ui-menu-left"> < ...

javascriptjqueryhtmlcss

Why is the camera access permission dialog not showing up in the WeChat app?

Why is it that when I attempt to open the following links for the first time, Chrome asks for camera permission, but when I access them through WeChat's in-app browser, the camera permission dialog does not appear? Can someone shed some light on this ...

htmlhtml5-videowebrtcgetusermediawechat

Employ a command to distribute an item among various controllers

Here is the structure that I have: <div id="location" ng-controller="locationController">...</div> <div id="markerTypes" ng-controller="filterController">...</div> <div id="map"></div> The "map" element represents a Go ...

angularjsangularjs-directiveangularjs-controller

There is a lack of a responsive page after being redirected from Facebook

Having an issue with responsiveness on my website at . When I access a webpage from the browser on my smartphone, the site is fully responsive. However, when I try to open it from a link in Messenger, it appears like the PC version shrunk down to fit a mob ...

htmlcss

AngularJS: How to locate every occurrence of a directive

I am currently working on creating a directive that will allow users to navigate through different sections of the page using arrow keys. The challenge is that these sections are scattered throughout the DOM and I need to ensure that adding or removing ele ...

angularjsangularjs-directive

Choose all the alternative A radio buttons utilizing JavaScript

If the "4 stars" option is selected at the top, I want all corresponding "4 stars" options in the form to be automatically selected. Similarly, if "3 stars" is chosen, I need all the "3 stars" options to be selected. I attempted to achieve this functionali ...

javascriptjqueryhtmlradio-buttonradio-group

Find and make adjustments to the primary HTML document in your Magento online shop

Trying to enhance the top banner of my Magento website tamween.biz by adding a shadow effect PNG picture. Successfully managed this on my local server using firebug and creating a new class in the coding area with all selector properties modified in the bo ...

htmlmagentolocate

What is the process for altering the active status in pagination?

How can I make the active class in my pagination appear in red? Here's the code snippet I have: In my script.js file: $(".pagination").append("<li class='page-item' id='previous-page'><a class='page-li ...

javascriptjquerycsspaginationanchor

Avoid repeatedly reloading each time an Angular Route alters

How can I cache the rendered jQuery grid on my index page when using Angular? Currently, every time a user changes views (such as add, edit, details) and then returns to the index page, the grid control is recreated. What steps can be taken to preserve t ...

templatesangularjscachinggrid

How can I target specific screen sizes using JQuery instead of @media queries?

I am currently utilizing @media to define certain CSS styles, however now I require an equivalent check for screen size in JQuery. @media ( min-width: 33em ) { } The goal is to hide a button when the screen size is larger than 33em, and to display it wh ...

jquerycssjquery-mobilescreen-size

I'm struggling to figure out why the CSS isn't working properly

i found this markup like shown here i am curious why it appears that lines 12 & 13 .notes:link span, .notes:visited span { ... seems to be functioning .comments span, background-position: -16px -16px; } .permalink:link span, .permalink:visited sp ...

css

The default action is not triggered when the click event occurs

Hey there, I have been working on this <ol> list of events using jQuery (version 1.4.2). Everything is set up within the $(document).ready() function. Something strange is happening where when I click on the <li>, it triggers a click on the co ...

javascriptjqueryhtmlevents