I builded a responsive website from phone to big screen.
When I make my screen bigger my font size is getting bigger too.
But when I navigate or open in big screen the font size starts with the 100% as my mobile version. When I change the size again it will load the right font size.
Each 200 added pixel width makes the font size 10% bigger but not if I navigate or I have to resize it so it loads...
Anyone that can help?
There is a bunch of known issues in Chrome when a font-size is set on HTML tag:
https://code.google.com/p/chromium/issues/detail?id=320754
I use this to be on the safe side (you don't have to use rems, of course):
html {
font-size: 62.5%;
}
body, input, select, textarea, table, td {
font-size: 12px;
font-size: 1.2rem;
}
Related
I have a problem with certain CSS applied to my website. I use some CSS to set the color, size and alignment of text. It works fine on the desktop browser, everything looks how it is supposed to be. The problem happens only when I load the page on my android chrome. At certain times it shows the CSS properly, but after I refresh it, the text becomes much smaller. Yet, some other text on the page that uses the exact same CSS does not change at all.
Note that the following CSS property is only applied to a mobile phone screen size. I use the CSS Media Queries to do so.
Here's the CSS I am applying:
.list {
color: white;
padding: none;
display: block;
margin-left: 0px;
margin-right: 10px;
text-align: left;
font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif;
font-size: 100%;
}
It also happens with some other CSS on the page. It keeps on changing upon refreshing the page.
Added information:
This is what it is suppose to look like.
This is how it looks like most of the time.
Both list uses the exact same CSS properties.
Please do provide me with some help. Thank you.
The main reason is that you are using % try rem. You may need to do mobile queries for font sizes on other screen types.
font-size: 100%;
change to:
font-size: 1.8rem;
This could be too big
Because you're using a percentage for font size, it's based on the size of the parent container. A better approach is to use rem or px. Here's a nice article explaining all of your options
I have set the base font size of my website like this:
html {
font-size: 62.5%;
}
Given that most browsers default font size is 16px this results in a font size of 10px. I have then used REM measurements on all elements.
What I would like to do is this:
At a screen size of 1440px I will add a media query breakpoint and make the base HTML font-size responsive – so that all of my site shrinks proportionally. 10px at 1440px results in the following:
html {
font-size: 0.6944444444444vw;
}
Then when everything starts to get too small I'll add in another media query breakpoint and do something like:
html {
font-size: 56.25%; /* 9px */
}
This work brilliantly, but I haven't seen websites using vw units on the base HTML font-size. Are there issues with this?
I'm building a react app using SASS. All my font-sizes, image sizes, and margins are in em units.
I added this to my SASS file so that when displaying content at 1920px width resolution or greater, the font size is increased by 1.25.
$base-font-size: 1em;
body {
font-family: Gilroy, sans-serif;
font-size: $base-font-size;
#media (min-width: 1920px){
font-size: $base-font-size*1.25;
}
}
However, upon doing this, all elements that are sized in em units become enlarged (fonts and images). The font is enlarging just fine but images are getting enlarged as well (which is not what I'm after). That's despite applying the property to font-size only
Take a look at the below link
https://css-tricks.com/confused-rem-em/
Em is causing problems here because it's relative to ancestor's font size.
Rem might be a good alternative for You because it's related to root / html font size
Safari 6 (desktop) is rendering all of my fonts at a smaller size than what I'm assigning in my stylesheets.
The (mis)calculation is always proportional and affects every font on my site. Fonts that should be 18px are 16px, 28px is calculated as 25px, 24px is appearing as 21px, etc.
I'm using the 62.5% font-sizing technique with rems:
html {
font-size: 62.5%;
}
body {
font: normal normal 400 18px/1 sans-serif;
font-size: 1.8rem;
}
h1 {
font-size: 28px; // renders at 28px if the next line is disabled
font-size: 2.8rem; // renders at 25px
}
Web Inspector shows that all of my font-size rules are being enforced:
But for the same body element, it is showing a calculated font size of 16px:
No other browsers are doing this, including Mobile Safari on iOS 7.
If I disable the rem font-size rule in Web Inspector, fonts display as they should.
I thought it might be related to my use of the shorthand rule on the body element, but switching to long-form has no effect.
I checked other sites (besides my own) to make sure it wasn't a browser setting I wasn't aware of, and it's occurring on both local development sites and in live production.
Has anyone else run into this or can anyone see why this might be occurring?
I'm using a fluid baseline grid template as a starting point for a site I'm working on and am hoping for a pointer on typography. The CSS font-size declaration is set by the grid template as follows:
/* DEFAULT FONT SETTINGS */
/* 16px base font size with 150% (24px) friendly, unitless line height and margin for vertical rhythm */
/* Font-size percentage is based on 16px browser default size */
body, button, input, select, textarea {font: 100%/1.5 Arial, Helvetica, sans-serif; *font-size: 1em; color: #333}
I'm wary of adjusting this setting but if I need the default font to be smaller than this. If I leave the declaration above as is, then set all p, a, ul fonts to be .9em for example, then this (expectedly) results in font sizes decreasing relative to their parent element. I don't think I should be setting the font size in pixels either - so can anyone advise a good solution for this (probably very simple!) issue?
I have just reduced the px down from 24px to 20px seams to work fine, are you using the Drupal theme?, and if so have you got it to work in IE 6-8, it breaks and displays in 1 column see the drupal demo site in IE to see http://themes.arborwebdevelopment.com/fluid-baseline-grid-theme-demo
This is a issue I've been trying to work out for a month now.