In my react app, using tailwind css, is there any global settings i can adjust so that my fonts scale with the screen size. For example, at screens larger than 2xl, i would like my text-sm to be 1 rem instead of the default 0.875rem
In your CSS you can add:
#media (min-width: 1536px) {
.text-sm {
font-size: 1rem !important;
}
}
This will essentially overwrite the font-size property of any element which is tagget with the text-sm class.
The 1536px comes from the official Tailwind references which explain responsive design in detail.
You need to add !important in order to force the CSS to apply.
Related
I'm using Bootstrap 5.1 and want to change the form-label and col-form-label default font-size. If I add something like below, it overrides .col-form-${size}-label. So, I couldn't go in this way. Is there a way to change the font-size?
.form-label, .col-form-label {
font-size: 1rem;
}
Add an extra class to that element then set the CSS like this:
.extraclass.form-label, .extraclass.col-form-label {
font-size: 1rem;
}
With that, the font-size will be changed only for that element, not for all the elements with classes form-label or col-form-label.
I am implementing mat-button in my css to use calc() to auto increase or decrease the font-size
When I first add the .mat-icon-button without calc(),
at max, I use font-size: 1.5vw. When the window resizes or container width is resized to a smaller width, I like font-size: 0.75vw
.mat-button {
...
font-size: font-size: 1.5vw;
}
I have many buttons and of course the crowded look appears as the container width is shrunken.
I looked up If I can use conditional inside CSS but no luck. Then I tried calc() like so
.mat-button {
...
font-size: calc(100%);
}
Made progress and the button width and height will shrink according to the container size
But the font-size is too small and the buttons are too tiny. Not a great UX experience
I am looking up if I can do min and max in CSS button but the min is not working
.mat-button {
...
font-size: min(calc(100%), 2rem);
}
I was thinking in CSS I can do min/max like the following but no luck so far
.mat-button {
...
font-size: min(max(calc(100%), 2rem), 1rem);
}
Any help is appreciated.
Thanks in advance
This can be done best using media query, so you can set the font size according to your needs. like this:
#media only screen and (max-width: 600px) {
body {
font-size: 1.5rem;
}
}
if you need a more precise size, you will need to use SASS for adding conditional to your styling.
First, let me say I've looked all over for this solution and am completely stuck. I've followed suggestions of importing media queries from a separate file after my other css rules, I've used an ancestor to target the span in the query to try and override the inline styling, I've tried just about everything else I can think of.
Currently, I have a span with nested spans that I want to render when the page width is between 0px and 600px. I am using react so I had to follow their guidelines for inline styling. Essentially I created an object with the display: none styling rules as the key-value pair. I then passed that to the JSX for the span. So essentially, it looks like this.
const hidden = {
display: 'none'
}
...
<span className="blah" style={hidden}>
<span>blah</span>
<span>: </span>
{deleteButton2} //this is a separate span generated conditionally, doesn't relate to this.
</span>
So now I have in my media query:
#media screen and (min-width: 0px) and (max-width: 600px) {
//other rules that work fine
...
.blah-ancestor > .blah {
display: inline //I've tried inline, inline-block, and block, none of which are working.
}
}
Please, I really need some help here. I'm quite literally pulling my hair out over this and I have 0 tools in my toolbelt to deal with this kind of bug as I've never run into something quite like this yet.
Inline styles always have priority over internal or embedded CSS, and over external CSS. This is shown to some degree on the <style> MDN documentation.
You could simply remove the inline styles and use two media queries or the mobile-first approach to show/hide the .blah.
Here is the mobile first approach:
// Smallest screens 0px - 600px, no media query
.blah-ancestor > .blah {
display: inline;
}
// Small screens above 600px
#media screen and (min-width: 601px) {
.blah-ancestor > .blah {
display: none;
}
}
This way you completely get rid of inline CSS and with that, you eliminate some of the priority issues.
When using rem units in Google Chrome (or firefox), the result is unexpected. I'v set up a page with the root font-size set to 10px to make it easier the translate a pixel based design to html/css.
This is my css. My expectation would be a page with one 500px wide box and if the screen is wider than 500px the background should turn red.
html {
font-size: 10px;
}
#media screen and (min-width: 50rem){
body{
background-color: red;
}
}
.test{
width: 50rem;
background: black;
height:100px;
}
But, despite both values being defined as 50rem, the results is a 500px wide box with the page turning red at 800px.
https://jsfiddle.net/tstruyf/puqpwpfj/4/
What am I doing wrong or why is this?
It's meant to work like this, it's just a little confusing if you don't know what's going on.
If you're not using rem in media query declarations then they are based off the root html base font size. If you don't declare this, then in most modern web browsers it's 16px.
As you have declared it as 10px a rem will be 10px throughout your code. Unlike em units, where it is based on the closest parent declaration size.
The confusion comes in that media queries declarations do not base themselves on the declared font-size that you apply to html and instead always use the default size - which as I said is 16px in pretty much all browsers.
That's why 50rem is coming out as 800px - 16px * 50.
Note, this is only for the declaration of the media query breakpoint, if you assign something to be 1rem tall inside the media query, then it will base itself on the base html size.
html {
font-size: 10px;
}
#media screen and (min-width: 50rem){ // 800px (uses base font-size)
div.somediv {
width: 50rem; // 500px (uses the declared html font-size)
}
}
You're not doing anything wrong, this is how rem in media queries are meant to work. As per the spec:
Relative units in media queries are based on the initial value, which
means that units are never based on results of declarations. For
example, in HTML, the em unit is relative to the initial value of
font-size, defined by the user agent or the user’s preferences, not
any styling on the page.
So any styling you apply to the base font size doesn't have an effect on the media query calculation.
Here's the relevant part of the spec.
If you really want to use rem and have them use a font-size basis of 10px, you could always write a SASS mixin to do the conversion for you. Other than that, it might be less confusing to stick with px for media queries.
The size of 1rem in media queries is not affected by changes to the base font size. But you could calculate the correct breakpoint yourselves. You can calculate the breakpoint in pixels based on your new base font size and the desired size in rems.
pixels = desired-rem-value * current-base-font-size
For example for a base font size of 18px and a breakpoint at 20 "rem":
20 * 18px = 360px
There are a few options how to calculate the pixel value:
1. calculate by hand:
html {
font-size: 18px;
}
/* For a breakpoint at 20 times your base font size*/
#media(min-width: 360px) {
...
}
2. Use calc():
#media(min-width: calc(20 * 18px)) {
...
}
3. Use a CSS prepocessor function:
(For example in scss or something similar.)
$base-font-size: 18px;
html {
font-size: $base-font-size;
}
#function media-rem($rem) {
#return $rem * $base-font-size; // $rem must be unitless
}
#media(min-width: media-rem(20)) {
...
}
Based on the rem CSS Specification:
When used outside the context of an element (such as in media
queries), these units refer to the computed font metrics corresponding
to the initial values of the font property.
So, in this case, which media query, rem refers to the initial values of the font property (Default browser's font-size = 16px).
I've created a responsive site and want to use em's to control the font size.
I've set the body font base size to 64.5% as recommended to create a base of 10px.
However, though the sizing seems OK, it does not change with the size of the browser. What am I missing?
http://jsfiddle.net/XaUz9/
See if this helps you: http://jsfiddle.net/panchroma/qK8j2/
In your example, you have explicity set the font sizes and there's nothing instructing the fonts to scale as the viewpont changes.
Setting
body{ font-size:62.5%; }
simply sets the font size (relative to the browsers default setting), it won't result in any scaling.
A couple of ways you achieve what you want is to either set sizes for h1, h2, p etc as the viepoint changes using #media queries , eg
#media (max-width: 480px) {
h1 {font-size: 2em }
h2 {font-size: 1em}
p{font-size:1em}
}
or you could set a default body font size at different viewpoints and the font sizes will scale relative to the setings you have at the head of your CSS file, eg
#media (min-width:481px) and (max-width: 767px) {
body{
font-size:90%;
}
}