I would like to decrease a certain margin's size by 25% in certain cases. I could do this by looking at it's base value and manually entering 75% of the value. However, the margin's base size varies according to client screen resolution.
Therefore I would like to decrease the already defined margin value by 25%.
If one were to be doing an analogous thing in Python programming, the equivalent would thus be:
margin = some_base_value
...
margin = 0.75*margin
Can I do this in CSS, and if so, how?
I recommend you to use Sass or LESS ,
so you can use variables.
Example: (Sass (SCSS))
$margin: 10px;
#element {
margin: $margin*.75;
}
.. if you don't want to use any css preprocessor, you can use css variables with calc function.
Related
Is it possible to get the difference between width and max-width for a CSS class? For example, let consider the following class:
.className {
width: 100mm;
max-width: 100vw;
}
If the container is smaller than 100mm, let's say it is 90mm, then the difference would be 10mm. Then based on that difference apply different styling, similar to as one would with a media query for different screen sizes.
The use case being, className is 10% (10mm of 100mm) smaller than expected and there for all sub-components in it need to be scaled down by 10% to maintain their relative size.
If not possible with straight CSS can this be done with SASS/SCSS or maybe stylus or LESS?
I built a personal website using Hugo and I like the way it turned out with one exception: all of the elements are just a bit too large. Zooming in the browser is able to smoothly reduce the scale of all components globally, and the website at 75% zoom looks much better to my eye.
Is it possible to globally reduce the scale of all components in Hugo or CSS so that the default scale for all components is smaller? I would much prefer a global scale rather than manually adding a scale parameter for every single component.
Website: http://www.markbuckler.com/
Code: https://github.com/mbuckler/personal-website
At 100% Zoom (current):
At 75% Zoom (what I would like 100% to look like):
Add to the 'html' tag 'font-size: 16px' and rewrite all your font-sizes, widths, heights etc to use rem(a ratio of the global font-size you just set as 16px).
Width of a div:
width: 1.5rem; (16px * 1.5)
This way you can scale the entire website based on a single value.
You could try the scale() transform as a quick and easy fix, although longer term it would probably be better to find a less hacky solution and do the proper layout without using transforms.
Maybe also of interest: What exactly changes in the css rendering, when desktop browsers zoom in or out on a website?
define your container max-width:1024px or anything you want and margin:0 auto;
.main-container{
max-width:1024px; /* you can change according to your website */
margin:0 auto;
}
I want to have a smaller font for "Konfuzius" here: http://www.kine-stammheim.ch/index.html
I tried to add a span around "Konfuzius" with the smaller font definition but somehow it does not work...
Here is the CSS file: http://www.kine-stammheim.ch/css/screen/screen-PAGE-layout.css
You need to change your font-size for the class quote-author. As 100% font-size of any inherited font-size which is even though higher than 100%, but 100% shall render the same size irrespective of its inheritance being higher than that. So you need to reduce quote-author class to a value < 100% to your convenient small-size in order to make it smaller.
For Instance,
.quote-author {
font-size: 50%;
}
PS: 50% value is just for illustrative purposes.
Hope this helps.
Seems like you have worked out how to do it because the css was changing every time I reloaded, but the answer as I think you have found is to use
.quote-author {
font-size: Xpx; /*You can also use x%*/
}
You use font-size:100% it represents 100% of the size in its parent (180%) so you don't change anything.
You should use something like font-size:50%; or whatever size you want specified in px...
Using CSS, how can I size a box's height in terms of its (or its parent's) line-height?
This would allow easily making regions of text an exact multiple of a number of lines, e.g. to allow showing exactly three lines.
I don't want a javascript solution as those are generally slow and interact poorly with dynamically re-rendered layouts.
Edit: The line-heights in my case are specified in unit-less numbers, as recommended on MDN, so it'd be handy if line-height units weren't required to get this to work.
I'm not sure I've entirely understood the question, but couldn't you just use relative units - ems?
If the line height is, for example, 2ems (or unitless) and you want the total height of the box to be 3 "lines" high (presumably not taking into account padding) then you could set the height to be 6ems. This way, the line height is flexible based on your base unit (font size) and the height will also be fluid using the same base unit.
Here's an example:
.myBox {
line-height: 2; // this will be twice the value of the font-size
height: 6ems; // equivalent to 3 lines high
To achieve the same thing in SASS you could write:
$lineheight: 2; // this value can be unitless or a unit like ems, px or percentage
$numberoflines: 3;
.myBox {
line-height: $lineheight;
height: $lineheight * $numberoflines;
}
This would have the flexibility for you to move your variables into a settings file so that you (or someone else) can easily alter the values without having to find all the selectors that use the variables.
I'm working with a fluid / responsive layout, based on a photoshop file based on a 960 grid. For one of the elements I want a 9px left margin when the layout is at 960px wide.
I've seen example doing this by computing 9/960, which comes out to 0.009375, and setting:
margin-left: 0.009375%
However I'm using LESS css / LESS.app which can do math on variables and create them dynamically. I've tried these methods but they are throwing errors:
margin-left:9/960%;
margin-left:9/960\%;
margin-left:(9/960)%;
margin-left:{9/960}%;
How can I have LESS do the math on this automatically?
Clarification
If I use margin-left:9/960; LESS will compile but the output css is margin-left: 0.009375; which doesn't include the percentage sign and thus won't be rendered by the browser (AFAIK).
Simply multiply by 100%
$ echo "*{width: (9/960)*100%;}" | .npm/less/1.3.0/package/bin/lessc -
* {
width: 0.9375%;
}