For my application, I want the heading to have two different font sizes for mobile and desktop views.
Here's how I accomplished this successfully:
<h2 class="mb-0 d-none d-lg-block" >My APP Name Desktop</h2>
<h2 class="mb-0 d-block d-lg-none" style="font-size: medium;">My APP Name Mobile</h2>However, instead of using two separate h2 elements, is there a way to merge both into a single heading without relying solely on media queries in the CSS file?
If you want to ensure your font-size is fully responsive, consider using the
font-size: clamp(value1, value2, value3)The first value represents the minimum font size - ensuring it never goes below what you specify.
The second value is the preferred font size that the element will aim to use.
The last value signifies the maximum font size limit for the element.
When setting these values, utilizing em, rem, or vw units can provide a completely responsive outcome. The em unit in particular allows for relative sizing based on parent elements, automatically adjusting when the parent element changes.
For more information on using em & rem with the font-size property, check out this link: https://www.geeksforgeeks.org/difference-between-em-and-rem-units-in-css/
Experiment with different values! Resize your browser window while viewing the example snippet in a new tab to see the impact and versatility of clamp().
body {
width: 800px;
font-size: 40px;
}
div {
width: 50%;
font-size: clamp(0.5em, 8vw, 8em);
}<body>
<div>
Font size
</div>
</body>Implement this: JavaScript Snippet
function checkDevice() { if (navigator.userAgent.match("Android") || (navigator.userAgent.match("Macintosh") && navigator.maxTouchPoints > 0) || navigator.userAgent.match("iOS") || navigator.userAgent.match("iPhone") || navigator.userAgent.match("iPad") || navigator.userAgent.match("BlackBerry") || navigator.userAgent.match("iPod") && navigator.maxTouchPoints > 0) { mobile = true; console.log("This is a mobile device: <TRUE>") } else { mobile = false; console.log("Not a mobile device. <FALSE>"); return mobile; } } //Mobile or not?
if (checkDevice() == true) {
document.getElementById('title').style.fontSize = 'medium'
}
else {
document.getElementById('title').style.fontSize = '20pt'
}
HTML Markup
<div style=font-family:sans-serif; id=title>Hello Universe :-)</div>
Alternatively with CSS
div#title {
font-size: calc(20vw + 20vh / 2.5)
}
Looking to design a circle using CSS with a gradient border, and an inner area that is transparent to achieve this look: https://i.sstatic.net/wN1Mg.png While there are methods for creating a gradient border without transparency, such as the one shown in ...
Has anyone successfully implemented pagination in DataTable to dynamically generate the lengthMenu (Showing 1 to 10 of 57 entries) and only load data when the next page is clicked? I'm currently facing this challenge and would appreciate some guidance ...
My goal is to utilize the bootstrap style for a fixed navigation bar at the top of the page. By using navbar-fixed-top, I can fix an element to the top. The visibility of #subnav will be determined by the value of showsubnav. <div id="backnav"> ...
I am currently using the responsive Bootstrap theme in combination with the application layout control in extlib, but I have been unable to locate any documentation on whether it is possible to modify the predefined Bootstrap classes. In the example below ...
A basic code I have writes out a 'map' or grid. My goal is to define specific areas - for example, if the value for $i or $j equals 1, it should mark the edge of my 'map' by setting the cell's class to 'edge', which curre ...
When using React, I encountered an issue with centering a webcam video while maintaining its height at 100% of the screen. Although the video fills the screen vertically correctly, adjusting the width of the window causes the video to lose its centered pos ...
My custom class that wraps Angular Firestore is designed to be extended and used throughout my application. However, after updating to Angular 9, this setup no longer functions properly. For the complete code snippet, visit . The abstract class wrapper: ...
Currently, my header has a grey background with a width of 100% and a maximum width of 1000px. To extend the grey background beyond the 1000px limit, I have a separate div with an absolute position behind the header div. The issue arises when the user scro ...
I'm utilizing ngbTypeahead for typeahead search feature, and I'm curious about passing parameters to the search function. <input id="typeahead-basic" type="text" class="form-control" [(ngModel)]="model" ...
Struggling to figure out a simple task using the angular-tree-component - given how amazing the component is, I'm sure it's something straightforward in the API that I am missing. I am trying to dynamically display a node by expanding all its pa ...
userdata:any ={}; constructor( public navCtrl:NavController, public http:Http ) { this.userdata.username=""; this.userdata.password=""; let url:string = "http://demo.in/app/userdetails.php?userid=""&password="""; let dataP ...
My current issue involves a growing array each time I submit a post. It seems like the problem lies within the second observable where the user object gets updated with a new timestamp after each post submission. I have attempted to prevent duplicate entr ...
I have come across websites that use a technique where when a message box pops up, the rest of the webpage dimmed to emphasize the message. Currently, I am working on building a website using Microsoft Web Developer 2010, specifically an ASP.net site. On ...
I'm new to Directus and I need help styling a card with a background image from a Directus Image. Can anyone guide me on how to achieve this? Here's what I have tried: <Card style={{backgroundImage:"url({someColletion.image.id})" &g ...
When attempting to send an MQTT message to a topic from my angular app, the message needs to be in a specific syntax: { "Message": "hello" //the space after : is mandatory } However, upon sending the message in the correct format, the browser aut ...
Within my component.ts file, I have a method that sends an HTTP request to my Express server to deliver the contents of an email. The issue arises when attempting this post request from my local machine versus deploying to a Digital Ocean server. I am un ...
I'm currently experimenting with creating a color gradient in javascript using numerical values within some of the divs to indicate scale. However, I've run into an issue where as the values get larger, they are cut off due to the float:left prop ...
I've created a customized component called tab. The structure of the template for the tab component is as follows: <ng-content></ng-content> When utilizing the tab component, it is done like this: <tab> <ng-template> . ...
I stumbled upon this codeply link showcasing a straightforward Code Pad button layout that was perfectly aligned with the use of bootstrap 4.1.3: https://i.sstatic.net/8LEBK.png However, upon upgrading to bootstrap 4.5.0, I noticed that the last row was ...
A game has been developed using JavaScript and HTML. The game features a table with cells that are assigned IDs for toggling colors using an onClick function. The objective is simple: when a cell is clicked, all neighboring cells, including the clicked one ...