My instructor requires it to be done through css.
I can't figure out where I slipped up, though I'm sure it's staring me in the face.
/* font: font-style font-variant font-weight font-size/line-height font-family; */
/* font: italic small-caps normal 13px/150% Arial, Helvetica, sans-serif */
body {
font: normal normal normal 14px/1.3em arial, sans-serif;
}
h1 {
font: normal normal; padding: 1.5em;
}
li {
display: inline;
}
.nav {
font: normal normal bolder 30px/1.5em arial, sans-serif; background-color: #526063;
}
a {
color: #ff4300;
}
body {
background-image: url(../Project Img/camping sky.jpg);
}
Just use quotes and then whitespace is okay. Single or double:
background-image: url('../Project Img/camping sky.jpg');
The h1 font-size percentage isn't changing the text size according to the screen and just stays at 20px. Am I missing something?
html {
background-color: #fff;
color: #555;
font-family: 'Lato', 'Arial', sans-serif;
font-weight: 300;
font-size: 20px;
text-rendering: optimizeLegibility;
}
h1 {
margin: 0;
font-size: 200%;
font-weight: 300;
text-transform: uppercase;
letter-spacing: 1px;
word-spacing: 3px;
}
Try using this instead.
font-size:2em;
Ems are a more appropriate relative size unit for text. Also, without seeing your html structure, it's hard to know if there isn't some other element obstructing this font-size change.
I have this code:
li
{
width: 200px; height: 22px; overflow: hidden;
float: left;
line-height: 22px; letter-spacing: -1px;
font-weight: 400; font-size: 14px; font-family: "Helvetica Neue";
text-transform: uppercase;
}
I noticed that if I write all the font properties separated, then I'll have my text in the li box vertical-aligned middle.
font: 400 14px "Helvetica Neue";
Else, if I use the compact form, the text is vertical-aligned top.
I'd like to understand why this happens.
Thank you all in advance.
DEMO
CSS shorthand peoperties described as
selector {
font: font-style font-variant font-weight font-size/line-height font-family;
}
1) In your case: font: 400 14px "Helvetica Neue";
here you not defining any line height hence its taking default line height and Text seems to be vertically aligned top
2) if you use font: 400 14px/22px "Helvetica Neue";
here you are defining line height - 22px and this will be vertically middle aligned
Sidenote
vertical align middle works because height of LI = line height
Article URL
I have the following example Jsfiddle where i've posted all 12 columns and the required css. the next piece of code i think it's the one that's causing the problems. In the live example you will notice that these two columns at less than 320px screen width will break the container and scrollbar will appear. I've tried fixing this problem but i didn't find a solution so far. Anyone around who can help me out ?
<div class="col-mb-2 col-8 col-dt-5"><p> </p></div>
<div class="col-mb-2 col-2 col-dt-8"><p> </p></div>
Update:
Added a picture to see the portion of the problem
so you need to write media query
#media (max-width:312px) {
.col-dt-5, .col-dt-8{padding:0px 2px !important}
}
(max-width:312px) means, the width of the scree is 312px or less
I think the problem is with this class:
.testgrid p {
background: #5d68c2;
margin-bottom: 2em;
font-size: 0.75em;
line-height: 1em;
padding: 1em; /* <--- this is the problem */
color: #ffffff;
text-transform: uppercase;
font-weight: 800;
font-family: "Open Sans", Helvetica, Arial, Sans-serif
}
you need to remove left and right padding:
.testgrid p {
background: #5d68c2;
margin-bottom: 2em;
font-size: 0.75em;
line-height: 1em;
padding: 1em 0px; /* updated */
color: #ffffff;
text-transform: uppercase;
font-weight: 800;
font-family: "Open Sans", Helvetica, Arial, Sans-serif;
}
I tried box-sizing but not worked.
view this: DEMO
some elements on my website display perfectly, while other elements of the same font look grainy and choppy. I can't figure out why since I specify the style in the same way.
Here's my website:
http://violetoeuvre.com/
The side bar navigation (me, about, writing contact) is totally fine while the paragraph, h2, and footer styles are grainy and look like a rough version of the same type face.
CSS:
/* Fonts */
#import url(http://fonts.googleapis.com/css?family=Playfair+Display:400,700,900,400italic,700italic,900italic);
Funky styles:
h2 {
font-family: 'Playfair Display', sans-serif, 20px;
font-weight: 100;
line-height: 2em;
color: #000000;
letter-spacing: -1px;
margin: 0;
}
h3 {
font-family: 'Playfair Display', sans-serif, 12px;
font-weight: 100;
line-height: 2em;
color: #000000;
letter-spacing: -1px;
margin: 0;
}
#foot a:link {
font-family: 'Playfair Display', sans-serif;
font-size: 15px;
font-weight: 100;
color:#000;
text-decoration: none;
letter-spacing:0.2em;
}
These are functioning fine:
#emma_home a:link{
font-family: 'Playfair Display', serif;
font-size: 75px;
font-weight: 200;
color:rgba(255,255,255,1);
text-decoration: none;
letter-spacing:-4px;
}
#nav_menu a:link{
font-family: 'Playfair Display', serif;
font-size: 30px;
font-weight: 100;
color:rgba (255,255,255,1);
text-decoration: none;
text-align: center;
letter-spacing:0.2em;
}
#side_wrapper_text a:link{
font-family: 'Playfair Display', sans-serif;
font-size: 32px;
font-style: italic;
font-weight: 100;
color:#000000;;
text-decoration: none;
text-align: right;
letter-spacing:0.2em;
}
Also, on a PC the top Emma and Navigation (writing, blog, contact) are about 20 pixels ABOVE the black line, but on my Mac, the letters touch the white like I want.
What gives with these discrepancies??
Thanks.
I think you should move font-size property from font-family tag
and add it
font-family: sans-serif;
font-size : 12px;
check this W3 Schools they define 2 properties
Browsers behave differently with css some adapt the error some not
EDIT
You can save yourself from repeating code by putting the selector that have same styles mostly and then you can overwrite that style. for ex
h2,h3 {
font-family: 'Playfair Display', sans-serif;
font-size : 20px;
font-weight: 100;
line-height: 2em;
color: #000000;
letter-spacing: -1px;
margin: 0;
}
h3 {
font-size: 12px;
}
I see your a link has font weight property double than you defined for other so that may be the case for a tags but i dont see any other significant difference
I was confused as to why Playfair Display appeared grainy in my headings and paragraphs, but NOT in my sidebar navigation.
After some frustration, I realized that the typeface just looks bad at a certain (small) font.
Search for Playfair:
http://www.google.com/fonts/
As you can see, Normal 400 looks very weird, but in larger, bold, or italic styles, it looks just fine. The only thing to do was to choose a similar typeface for smaller styles, so I'm using Jacques Francois.
I'm a designer that works mostly in web but occasionally print as well. I think your issue may actually be with the Playfair font itself which I have just discovered is missing certain font styles when it displays on PCs (Macs look fine). I would test with another font before losing much more time.
As far as I can see IE prefers ttf format over woff and that specific exports is wrong. I simply downloaded the google font mercurial repo any converted original (otf) files with font squirrel, now it works.