Is there a way of setting all font sizes to scale down x amount in a media query, instead of setting font size for each element ( h1, h2, h3 ).
Currently I have a media query that looks like this:
#media only screen and (min-width : 1200px) {
body {
font-size: 20px;
}
}
This, however, doesn't set sizes for headings. Is there any way to include all text on a site? Thanks
Yes, basically you set font size in pixels for a root element like html and then you can use rem units to set font sizes for other elements. In your #media rule you will have to change just font-size property for html element and it will equally affect other elements since they depend on root's font-size because you use rems.
html {
font-size: 12px;
}
p {
font-size: 1.1rem;
}
.footer {
font-size: .9rem;
}
#media (max-width: 767px) {
/* now the basis for all the font sizes set in
rems is 10px. For example, font-size for p is 10*1.1 = 11px.
Previously it was 1.1*12 = 13.2px. */
html {
font-size: 10px;
}
}
div{font-size:15px;}
#media screen and (max-width:1200px) {
div{font-size:20px;}
}
#media screen and (max-width:600px) {
div{font-size:25px;}
}
#media screen and (max-width:320px) {
div{font-size:50px;}
}
<div>test font size</div>
Related
Recently I am thinking about creating a responsive website that displays really well on high resolution screens, like 2k and 4k screens, I will also make it responsive on desktop and smaller devices.
Problem:
Because different screen sizes will have different font size, padding and margin so there is going to be a lot of similar media query codes and I don't think it's a good idea to repeating similar media query codes so is there any other good approaches?
Example of REPEATING SIMILAR CODES:
#media only screen and (min-width: 900px) {
.title{
font-size: 1rem;
margin-bottom: 0.2rem;
}
}
#media only screen and (min-width: 1200px) {
.title{
font-size: 1.5rem;
}
}
#media only screen and (min-width: 1920px) {
.title{
font-size: 2rem;
margin-bottom: 0.5rem;
}
}
#media only screen and (min-width: 2560px) {
.title{
font-size: 3rem;
margin-bottom: 1rem;
}
}
#media only screen and (min-width: 3840px) {
.title{
font-size: 3.5rem;
margin-bottom: 1.2rem;
}
}
Is above approach the only approach or is there any other ways I can use so I don't need to change font size, padding and margin on every different screen size.
After some trying out, I created a sass mixin to help myself with my responsive design, I am not sure if this works 100% well but I think it might be able to help a little.
code:
#function size-number($base-size, $new-size) {
#if $new-size != 0 {
#return $new-size;
} #else {
#return $base-size;
}
}
#mixin break-points-resize ($properties) {
$PROPERTIES: $properties;
$BREAKPOINTS: ("1920px","2560px","3840px",);
#for $i from 1 through length($BREAKPOINTS) {
#media only screen and (min-width: nth($BREAKPOINTS, $i)) {
#each $PROPERTY-KEY, $PROPERTY-VALUE in $PROPERTIES {
$SIZE-NUMBERS: map-get($PROPERTY-VALUE, "size" );
// [1920px default size => 2], [2560px default size => 3], [3840px default size => 4]
$BASE-SIZES: (size-number(2,nth($SIZE-NUMBERS, 1)),size-number(3,nth($SIZE-NUMBERS, 2)),size-number(4,nth($SIZE-NUMBERS, 3)));
$INDIV-PROPERTY-KEY: $PROPERTY-KEY;
$VALUE-NUMBERS: map-get($PROPERTY-VALUE, "value" );
#{$INDIV-PROPERTY-KEY}: $VALUE-NUMBERS * nth($BASE-SIZES, $i);
}
}
}
}
h1{
// Specify size, it will use the size that is specified (Three breakpoints, three size)
#include break-points-resize(("font-size":("value": 2rem,"size": (2,3,3.5))));
// Specify 0, it will use the default size (Three breakpoints, three size)
#include break-points-resize(("font-size":("value": 2rem,"size": (0,0,0))));
}
Sorry the code is a little messy
I am using Generate Pro theme of Genesis and the biggest con about this theme is the size of the heading when seen in the Mobile. Also the Font.
As the users are shifting more on mobile, is very important for me to make my site look beautiful in Mobile.
What do I mean?
How Title Looks in the Mobile
As you can see it is taking up all the above(up-the-fold) content only for the heading.
All my Content shifts low and I have to scroll for seeing it. Which BTW nobody likes.
Also the Font-Looks Very Bad, it is really light in colour and most of the people have to focus high to see it.
I changed the font with the help of Google Font Plugin but still, the size of H1 is non-changeable, I tried Google Font and also tried changing code font-size in the WordPress but nothing helped. The code I tried changing looks like this.(Below)
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: 'Source Sans Pro', sans-serif;
font-weight: 300;
line-height: 1.2;
margin: 0 0 20px;
}
h1 {
font-size: 36px;
}
h2 {
font-size: 30px;
}
h3 {
font-size: 24px;
}
h4 {
font-size: 20px;
}
h5 {
font-size: 18px;
}
h6 {
font-size: 16px;
}
Using #media CSS, you can do things like this:
#media screen and (max-width: 780px) {
h1 {
font-size: 25px;
}
/* More CSS */
}
As Chris mentioned, you can use media queries to make your styles have different behaviors depending on the size of the screen. Here are some examples:
/* Large Devices, Wide Screens */
#media only screen and (max-width : 1200px) {
}
/* Medium Devices, Desktops */
#media only screen and (max-width : 992px) {
}
/* Small Devices, Tablets */
#media only screen and (max-width : 768px) {
}
/* Extra Small Devices, Phones */
#media only screen and (max-width : 480px) {
}
/* Custom, iPhone Retina */
#media only screen and (max-width : 320px) {
}
Also, making more specific classes you will make the style has more importance. For example:
body .title h1 {}
will have more importance than:
body h1
or
h1
This question already has answers here:
Is is possible to overwrite the browser's default font-size in media queries using EMs?
(2 answers)
Closed 5 years ago.
I'm working in a page that has
html {
font-size: 62.5%;
}
That means 1rem = 10px instead of 1rem = 16px So far, so good.
The problem is that it doesn't affect #media queries.
/*
it should change at 600px and not 960px.
the #media ignores the 62.5%;
*/
#media (min-width: 60rem) {
.el {
background: blue;
}
}
Check this codepen to see the issue.
http://codepen.io/sandrina-p/pen/bqGZjE
I tested on a retina monitor, with Chrome and Firefox. On Safari the issue doesn't happen.
Any solution?
I found the issue.
In #media you need to use em and it will always read the default browser size, ignoring your custom font-size. The same doesn't happen with rem.
So in this case, you need to set 37.5em (600/16), and it will change the at 600px in every browser including safari.
https://zellwk.com/blog/media-query-units/
(...) the only unit that performed consistently across all four browsers is em. There aren’t any differences between em and rem with the exception of bugs found on Safari.
(...) Unfortunately, px media queries remained at 400px in the third experiment, which makes it a no-go if you intend to support users who change their browser’s font-size value.
Hence, my conclusion after these experiments is: Use em media queries.
#media screen and (max-width: 37.5em) {
.el {
background: blue;
}
}
No. It doesn't have to do anything with you html font-size or your .el font-size. Because 1rem is 16px. So you have to calculate it as per 16px.
#media (min-width: 37.5rem) {
.el {
background: blue;
}
}
This would be your 600px media queries breaks.
Try this
<div class="el">
hey there
</div>
// =========== basic template =========== //
$safeArea: 1rem;
body {
font-family: sans-serif;
}
// ======== actual codepen code ========= //
html {
font-size: 62.5%;
}
.el {
background: red;
font-size: 1.6rem;
}
/* it should change at 600 px and not 960px.
the #media ignores the 62.5%;
*/
#media screen and (max-width: 60rem) {
.el {
background: blue;
}
}
see this codepen - http://codepen.io/anon/pen/aJbxOQ
I am trying to get text to be full width on a large device and then stacked on a mobile device with larger text.
I realize I can do something like displaying none for the large text if the browser is small and then setting three text blocks to col-12 for the small device, but that seems like a lot of html duplication. Is there a better way to solve this problem?
My code is below. I recognize I can override the font size with the bootstrap overrides for a small device. I just need help stacking the font.
I included a codepend here: http://codepen.io/anon/pen/pRQZdR
<h1 class="title-text-md col-lg-12"><strong>Example Text to Be stacked with larger font on mobile</strong></h1>
#include media-breakpoint-up(sm) {
.title-text-md {
font-size: 20px;
}
}
Add this css this might do the trick.
#media (max-width: #screen-xs) {
h1{font-size: 30px;}
}
#media (max-width: #screen-sm) {
h1{font-size: 4px;}
}
#media (max-width: #screen-md) {
h1{font-size: 400px;}
}
#media (max-width: #screen-md) {
h1{font-size: 40px;}
}
h1{
font-size: 1.4em;
}
Hope this helps!
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
I'm looking to create a responsive design that can be used across all devices
My css contains the following:
#media screen and (min-width: 200px) and (max-width: 400px) {
html {
font-size: 8px;
}
}
#media screen and (min-width: 400px) and (max-width: 800px) {
html {
font-size: 12px;
}
}
#media screen and (min-width: 800px) and (max-width: 1600px) {
html {
font-size: 16px;
}
}
#banner h3 {
font-size: 3.125em;
letter-spacing: 0.3125em;
font-weight: 900;
text-shadow: black 0 0.0753125em 0;
}
My understanding was that if I set the font-size at html level for different media sizes, then using em will ensure that it will be adjusted accordingly for each element.
So on my desktop my #banner h3 displays in 50px (16px * 3.125).
However, when I minimize my browser to 700px I was expecting that the h3 would reduce in size, but this is not happening.
This is my website: http://ec2-52-0-228-105.compute-1.amazonaws.com/
What am I missing here?
You have a font-size: 14px; on your body. The body is a child element of html, that is why the font-size of the html is overwritten.
em refers to the font size of the nearest parent element with a font size, and in your case that is the body.
It seems that the body style comes from a wordpress theme or something. If you don't want to change the corresponding css file, you can change your code to overwrite the body:
#media screen and (min-width: 200px) and (max-width: 400px) {
body {
font-size: 8px !important;
}
}
#media screen and (min-width: 400px) and (max-width: 800px) {
body {
font-size: 12px !important;
}
}
#media screen and (min-width: 800px) and (max-width: 1600px) {
body {
font-size: 16px !important;
}
}
Another possibility is to use rem instead of em, which is not 100% browser compatible: http://caniuse.com/#feat=rem
I think you are looking for rem, not em.
A value in em is relative to the font-size of the (closest) parent element (or the element's font-size) and if the parent has a fixed font-size (in px, for instance) then em would be consistent.
But rem (root-em) is relative to the value of font-size of the root element directly. In HTML, the root element is <html>.
#banner h3 {
font-size: 3.125rem;
letter-spacing: 0.3125rem;
font-weight: 900;
text-shadow: black 0 0.0753125rem 0;
}
It's worth mentioning that rem is supported in IE9+.
As other answers say you should use rem unit in order to match the size of the root element (html tag).
But a faster way of achieving what you intend to do is to use the vw CSS3 unit which is equal to 1% of your viewport width. So you won't have to use media queries at all.