I'm having problems trying to stop chrome from making the body fit the screen on here http://www.lgbtgamers.com/sessions . In Firefox it does not and it looks like the footer extends, in chrome it just leaves a white gap.
The CSS for this part:
*{
margin: 0;
padding: 0;
vertical-align: baseline;
-webkit-font-smoothing: antialiased;
-moz-font-smoothing: antialiased;
-o-font-smoothing: antialiased;
}
html{
font: 13px/1.4 Helvetica,arial,freesans,clean,sans-serif,"Segoe UI Emoji","Segoe UI Symbol";
font-family: 'Open Sans', sans-serif;
color: #4F565A;
background: #151515;
}
body{
background: #E5E5E5;
}
The problem seems to be missing DOCTYPE declaration.
Just add the following at the very top of your html (even before the <html> element, on a line of its own, it must be the very FIRST LINE of the document):
<!DOCTYPE html>
This prevents Chrome going into quirks mode emulating odd behaviours of old browsers.
Related
Whenever I want to change the font-size of my text, the font-weight seems to revert back to it's default value in what I see on the browser.
When I inspect it, both font-size and font-weight seem to be applied and working fine. Not sure what the issue is. When I disable the font type I have linked below, it seems to be working fine.
The thing is, I have been using the same font below, and this issue just started occurring overnight. No clue what could have changed. Thank you.
body {
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
#element {
font-weight: 700 !important;
font-size: 20px !important;
}
<div style="display: flex; flex-direction: column; width: 40vw; margin-left: 20px;"><div style="font-size: 24px; font-weight: 600;">Sell your clutter</div><div style="font-size: 20px; font-weight: 600;">Athens Locations</div><div style="width: 100%; height: 25vh;">House1</div><div>House2</div></div>
Did you changed or updated the browser that you usually uses ? Take a look at https://github.com/tailwindcss/tailwindcss/issues/1402
Similar thing happened with me. I tried multiple things, then I used Firefox instead of Chrome and it was working fine. Then only I came to know about bug.
Did you check that you're ID's and Classes matched the ones you set up in your HTML page. Either that or your browser might have the issue try updating it to the latest version if you haven't already. Because these days most of the CSS only works on modern browsers.
What is the best way to change Polymer Paper Elements default font from Roboto to a custom font?
I used the --paper-font-common-base: {} mixin to define my font and this works in most places... but not all. In places like the paper-toolbar for example there is still Roboto applied.
Is there another way to do this?
EDIT
I see the offender now. Inside paper-styles/typography.html there are loads of mixins that specifically define the font... eg
--paper-font-title: {
/* #apply(--paper-font-common-base) */
font-family: 'Roboto', 'Noto', sans-serif;
-webkit-font-smoothing: antialiased;
/* #apply(--paper-font-common-expensive-kerning); */
text-rendering: optimizeLegibility;
/* #apply(--paper-font-common-nowrap); */
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-size: 20px;
font-weight: 500;
line-height: 28px;
};
Why are the #apply blocks here commented out? If these weren't commented by default it looks like this wouldn't be a problem. But now I have to go and override every mixin!
EDIT 2
I see there is a note at the top of the typography.html file
/*
Unfortunately, we can't use nested rules
See https://github.com/Polymer/polymer/issues/1399
*/
But this doesn't seem to be true, in Chrome anyway. If I uncomment the #apply(--paper-font-common-base) lines in all the mixins it seems to work. Is this a browser issue?
Overriding the --paper-font-common-base mixin is the correct approach.
The following CSS code should work.
:root {
--paper-font-common-base: {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
};
}
I was unable to find the issue you pointed out, it probably was fixed already. When inspecting the following files, the --paper-font-common-base is being applied as expected.
https://github.com/PolymerElements/paper-styles/blob/master/typography.html
https://github.com/PolymerElements/paper-toolbar/blob/master/paper-toolbar.html
I am using these css commands:
#media all and (max-width:1050px) {
body {
background:#90a830 url(img/bg.png) no-repeat left top;
background-position:-481px 0;
}
}
#media not all and (max-width:1050px) {
body {
background:#90a830 url(img/bg.png) no-repeat center top;
}
}
body {
line-height:1;
margin:0px auto;
padding:0px;
-webkit-font-smoothing: antialiased;
-moz-font-smoothing: antialiased;
-o-font-smoothing: antialiased;
font-smoothing: antialiased;
font-family: 'roboto_condensedregular';
}
This allows me to have 2 different background settings for different screen widths, however....
In older browsers the background is blank, I am guessing its because older browsers cannot look inside the media tag.
My question is, how do i do a fallback for older browsers so if whatever browser doesnt support media tag it still falls back on some other css to show a background?
Thanks
Set the fallback backgroundstyles first, then override them for each screen size
I'm using a CFF font on my page, but it's showing serrated in the browser.
Here you can see how I'm using it: JSfiddle
HTML
<p>Hello everyb#dy!</p>
CSS
body{
font-size: 10px;
}
#font-face {
font-family: Planer_ExtraLight;
src: url('http://www.digitalpersone.com.br/projetos/fonts/planer_extralight.svg#Planer_ExtraLight') format('svg'),
url('http://www.digitalpersone.com.br/projetos/fonts/Planer_ExtraLight.otf'),
url('http://www.digitalpersone.com.br/projetos/fonts/Planer_ExtraLight.eot');
}
p{
font-family: Planer_ExtraLight;
font-size: 4em;
}
Anyone can help me with it?
This should work: http://jsfiddle.net/Allendar/aKGam/1/
p {
font-family: Planer_ExtraLight;
font-size: 4em;
font-smooth: subpixel-antialiased;
-webkit-font-smoothing: subpixel-antialiased;
}
Result
Update
Check the MDN. It seems to not work in most browsers. You might try to look into similar functions of -webkit-font-smoothing in other browsers to add to your styling.
The increase in quality I'm seeing in Safari is humongous tho!
Update 2
I found this might work in Firefox;
browser.display.auto_quality_min_font_size = 0; // default = 20
.. where lower means better quality and slower rendering and vice versa.
Update 3
This is interesting too (https://developer.mozilla.org/en-US/docs/CSS/text-rendering);
text-rendering: geometricPrecision;
Css on the body tag:
body{
font-family: 'Helvetica', Arial, Lucida Grande, sans-serif !important;
font-size: 12px;
line-height: 1.4;
min-width: 1050px;
min-height: 500px;
color: #333333;
}
Works perfect, however it doesn't seem to work on input fields :S For some reason (while those input fields have NO styling) it uses Lucida Grande for input fields text and rest is just Helvetica, I am 100% sure there is no other font-family tag else where.
What is causing this and why?
Input fields usually have their own style set in browser’s default style sheet. This typically means a browser-dependent font family and a font size of about 90%.
To set their font, you need to use a selector that refers to them, e.g. using
body, input {
font-family: 'Helvetica', Arial, Lucida Grande, sans-serif;
font-size: 12px; /* if that’s what you want... */
line-height: 1.4; /* somewhat excessive */
color: #333333; /* if that’s what you want, but it reduces legibility */
background: white; /* always set background when you set color */
}
body {
min-width: 1050px; /* if you really want this... */
min-height: 500px;
}
(but note that this also affects submit buttons).
Try to use following :
input {
font-family: inherit;
}
Or set any other font, and let see does this change issue.