I have two installations of Laravel including Bootstrap.
As far as I can see both include and have Montserrat on the body tag.
One of the installations needs no declaration of that in the app.sass (meaning it gets included with the bootstrap directly).
However, the other needs it, otherwise it defaults to the browser default font.
And yet, even when both installations have the same Montserrat #import-ed, they look different. I suspect the wrong one is really Montserrat, while the right one is some kind of Bootstrap sugar-coating that the other one can't do.
In order to check it out, please follow:
Desired effect: This link and once you log in with maximilian.berbechelov#gmail.com and 123456 click it again. I know it's Cyrillic, but I don't think it matters.
Problematic effect:
This link - no login required.
I have a body font-family declaration in the sass file (the desired one has no such declaration), because without it the font is the browser default.
You can see your font adding !important after the font-family name like this.
body {
margin: 0;
padding: 0 0 50px 0;
min-height: 100vh;
font-family: "Montserrat", sans-serif!important;
background-image: linear-gradient(45deg, #1de099, #1dc8cd);
}
.navbar-brand {
letter-spacing: 3px;
font-family: 'Montserrat', sans-serif;
font-weight: 300;
font-size: 2.1rem;
}
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
So I made a small change on the page (gesher-jds.org/giving):
Donate Now, Pay Later
to
Donate Now, Pay Later
and now the design of the right calculator has changed (more like the button as I see). How do I fix it? Both of them looked the same (besides the text). I tried to add the code below to the CSS but it still didn't work. What I'm doing wrong?
CSS
a#payLater {
background: #60426c;
width: 100%;
display: inline-block;
margin-top: 20px;
padding: 10px;
text-align: center;
color: #fff !important;
font-size: 20px;
text-transform: uppercase;
letter-spacing: 1px;
font-weight: bold;
text-decoration: none !important;
}
If you apply the styling in the dev tools it works like expected. The reason it does not work in your working environment is probably because your styles are overwritten by different styles. Check the dev tools to see which styles are applied
Potential fixes:
1) Tidy up the "!important" rules.
2) Build stronger selectors -> keyword to look for knowledge [CSS Specificity]
If you set !important in one CSS rule, it'll become hard to overwrite that because !important = 1000 Specificity points so the rule is really strong
I am trying to rebuild this website in Polymer: http://qprogrammers-mockup.webflow.io/. So I can extend it easily in the future. I have everything down and I am using the same font, font-weight, font-size and I checked this with a chrome extension whatfont?.
But the fonts seems different. The example website is still much sharper. I read the css, but I cannot find out why. I also added:
body {
background-color: e8e8e8;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing:grayscale;
font-family: 'Open Sans', sans-serif;
font-weight: 300;
}
Given your example, I cannot tell how much more CSS you have. But this may just be a case of you not invoking the webfont Open Sans and your browser is reverting to whichever sans-serif it is using. You could add the following line to the top of your CSS and see if it makes a difference:
#import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300,300italic,400italic,600,600italic,700,700italic,800,800italic);
Finally, you are missing a '#' on your background color property:
background-color: #e8e8e8;
I ask this because when I try to create a CSS font stack for multi-language content, such as English and Chinese, the final rendering is affected by the first font in the stack (usually Latin ones, since most Chinese font comes with Latin support).
See this Codepen, for example.
div.a p {
overflow: hidden;
}
p {
background-color: red;
border: 1px solid black;
display: inline-block;
}
.chinese-only {
font-family: "Hiragino Sans GB", sans-serif;
font-size: 24px;
line-height: 48px;
}
.english-chinese {
font-family: "Avenir Next", "Hiragino Sans GB", sans-serif;
font-size: 24px;
line-height: 48px;
}
.chinese-english {
font-family: "Hiragino Sans GB", "Avenir Next", sans-serif;
font-size: 24px;
line-height: 48px;
}
What I am seeing:
Since Chinese glyphs only appear in the Hiragino Sans GB, I expect all Chinese blocks to use the same line height. But they are apparently affected by adding the Avenir Next font at the top of the stack.
Since both Firefox and Chrome on OSX renders my example the same, I wonder if the CSS specification mentions anything about this. CSS 2.1 fonts spec doesn't appear to state what to do with line height when you fallback on missing glyphs.
Updated: Safari does render differently, but unfortunately the difference is due to overflow: hidden, not glyph fallback. My updated example may show this a bit clearer.
On Chrome and Firefox
On Safari
And if you are really into font-related headaches, try this example showing different font stacks, and see how they differ on each browser.
This is pretty much going to come down to the user agents. Any time the CSS specification says, “not defined by this specification”, that’s code for “we’ll let browsers do whatever they think is best and then try to get them all to behave consistently after a few years of doing it differently”.
Furthermore, the latest CSS Inline Layout Module states right at the top of Section 1 (Line Heights and Baseline Alignment):
This section is being rewritten. Refer to section 10.8 of [CSS21] for the normative CSS definition or the 2002 Working Draft if you want pretty pictures. (But ignore the old text, half of it’s wrong. We’re not specifying which half, that’s to be determined.)
That’s from last month. So, you know, good luck and Godspeed, basically.
Interestingly, I see a different result in Safari 6.2.2 than you posted:
If there’s a difference between that and the latest Safari, you might be able to track down a bugfix between the two versions that explains why it changed.
When using a <h1> tag for example, is there a reusable formula for getting the outer border of that element to PERFECTLY follow edges of the type? In theory I would expect this to work:
h1{
display: block;
font-family: sans-serif;
font-size: 38px;
line-height: 100%;
height: 38px;
}
So the line height is set to be the same as the absolute text height, which is also the height of the block. However this never works. Here is an example of what does work for sans-serif 38px;
h1{
display: block;
font-family: sans-serif;
font-size: 38px;
line-height: 28px;
height: 35px;
}
Here is another working example.
h1{
display: block;
font-family: sans-serif;
font-size: 25px;
line-height: 19px;
height: 22px;
}
This is all well and good, but it has to be calculated manually in firebug each time. There is no formula I can find to do this.
Additionally, it would be nice if any solution also worked with #font-face fonts, but I understand there is more to take into account there. (like the top alignment that only occurs on Mac).
Does such a formula exist? Is it possible to write one? How about some LESS CSS fancyness?
I agree with #ToddBFisher in the comment, and at this point for me it's more of an usability issue. Consider people can also vary the font sizes in their browsers... in that case using ems would be better. But browsers also render font differently, so something that looks amazing in a mac will look pixelated in a pc. If you want something to look perfect, use images.
Check this other question for more info on line-height: How to achieve proper CSS line-height consistency
Or this one: CSS Line-Height Guide
You can also check the usability stack for discussions about these things: https://ux.stackexchange.com/ There are pretty amazing posts in there.