#bar{font-size:14px;}
The font size of #bar is set to 14px.
#foobar{font-size:$-2px} // Fictional code
The font size of #foobar is now 12px. (calculated as 14px - 2px)
Is there a way to dynamically alter the value of a selector like this?
#bar{font-size:14px;}
The font size of #bar is set to 14px.
#foobar{font-size:$-2px} // Fictional code
The font size of #foobar is now 12px. (calculated as 14px - 2px)
Is there a way to dynamically alter the value of a selector like this?
You have the option to utilize rem, which is a unit that corresponds to the global font-size.
:root
{
font-size : 14px;
}
#foo
{
font-size : calc(1rem - 2px);
}<div>
I am a 14px text according to the root font-size
</div>
<div id="foo">
I am a 12 pixel text according to the rem font-size
</div>INSIGHT
The rem unit will always take into consideration the global CSS settings. For example, when calculating (1rem - 2px), it actually equates to (14px - 2px).
1. Utilizing the calc() function
I am unsure of what you mean by dynamically changed, but for relative calculations, consider using the calc() method.
Example:
width: calc(100% - 80px);
2. Employing preprocessor such as SASS
You may also want to explore Sass for preprocessing. A notable feature it offers is variables.
You can define variables and perform various calculations with them.
$body-size: 200px;
body {
width: $body-size/2 ;
}
Here is a basic example I put together: jsfiddle
Reference: SASS
3. Using jQuery
If the goal is to adjust sizes based on window size changes, one approach is to use jQuery
$(window).resize(function() {
var width = $(window).width();
var height = $(window).height();
$('#item').width(width);
});
4. Leveraging vw and vh units
In the context of modifying sizes based on viewport dimensions as mentioned in the comment
vw and vh represent percentages of the viewport width and height respectively.
div.responsive {
width: 10vw; /* 10% of viewport width */
height: 10vh; /* 10% of viewport height */
background-color: black; /* Visibility aid during testing */
}
My two cents on the topic.
You can use font-size along with relative units like em to control some properties of elements, but this approach can be cumbersome as it requires specifying font sizes individually for child elements.
.example {
font-size: 20px;
border-radius: .5em; // 10px (20*.5)
padding: 2em; // 40px (20*2)
}
Arrange three columns with a fixed combined width. The center column will have dynamic content, while the left and right columns should fill out the remaining space equally. For example, see this demonstration: http://jsfiddle.net/htKje/ <div class="c ...
When it comes to the html structure: <body> <div> <div> <div> ... </div> </div> </div> </body> Is there a method to create recursive variables that utilize their parent's value: body ...
Is there a way to show the content of an HTML file in an email body using Python, without having to manually copy and paste the HTML code into the script? ...
On my webpage, I want to display a dropdown list populated with objects from a JSON file using JavaScript. Here is the structure of my HTML and JSON: HTML <html> <body> <select id="myid">MyList</select> <script src="m ...
Within my navbar, there is a .dropbtn div that I want to trigger a dropdown function when clicked. However, only the text "TOTAL" seems to activate this function onclick. The <span> and <i> elements inside the .dropbtn do not respond to clicks ...
Greetings! Currently, I am utilizing PHP to include the document name as an example. folder/<?phpecho basename(__FILE__, '.' . pathinfo(__FILE__, PATHINFO_EXTENSION));?>_button.png I have observed that using PHP for this purpose and havin ...
I'm struggling to align some of these divs, especially centering them. I want the page to closely resemble this image: Here are the specific requirements: 1) The header text should be centered vertically and placed in a separate div with a black back ...
My website, redkrypt.com, is functioning perfectly on my laptop. However, I am facing an issue where the css file will only load on my iPhone 4S after I rotate it once. Once I do this, the website works both vertically and horizontally. I have tried variou ...
I have been working on creating a custom widget with a textarea that has multiple rows. I am now looking to change the background color of this widget on the Onfocus and OnfocusOut events. Can anyone guide me on how to achieve this? <!doctype html> ...
I'm having an issue with keeping the footer pinned to the bottom of the page. I haven't applied any specific styles to the footer, just placed it at the end of the content. Everything looks great until there's a page with minimal content, ca ...
There is a perplexing issue that I am unable to resolve. The "Shop" section on this page has an intriguing translucent blue-green background: This background is set using the ID "#left-area". Interestingly, on another page, which can be found at , the sam ...
Currently, as I work on my web page using react.js, I'm facing the challenge of implementing a full-size background. Despite my efforts, the background only occupies the size of the text within the div. Here is the snippet of code I am working with: a ...
Here's a tricky puzzle for you. The gradient below is not displaying correctly in Safari, but it works perfectly fine in Firefox and Chrome: background: linear-gradient(transparent 124px, #de6230); I've even attempted the following fix without ...
UPDATE: Here is the link to the javascript fiddle When the text on the screen becomes too large for the row, it overlaps onto other rows instead of increasing the height of the row. This could be due to setting the row heights as a percentage value in ord ...
After completing a responsive redesign for one of my websites, I noticed an unusual behavior with the links that went unnoticed by testers: When clicking on these links, they are only "activated" but not followed. However, if you click them again, they wo ...
My current setup involves setting <body> to be absolutely positioned in order to fill the entire viewport without needing to specify a height: body { width: 100%; margin: 0; padding: 0; position: absolute; top:0; right:0; bottom: ...
When using this HTML inside an ng-repeat, there is a difference in behavior: This part works fine: <tr> <td ng-class="info.lastInMonth">{{ info.date_formatted }}</td> ... But this section does not work as expected: <tr ng ...
Is there a way to set two values as default in a dropdown list, and when the page is refreshed, the last two selected values are retained as defaults? Thanks in advance! Visit this link for more information ...
Using PHP, I am receiving data as an object and passing it through a mustache template to create a table. My inquiry is about controlling the row breaks for my data. Is there a way to insert a <tr> after every 3 <td> without using JavaScript? ...
Having some trouble removing unnecessary white space on my website. The goal is to have the main text and logo centered on an image background, but I've been unsuccessful so far. I've experimented with different CSS properties like overflow-x: ...