I am coding HTML emails and would like to change the font size on mobile. I have used the code that google used as a text but changed it a bit and added font size. Below is the code that I tested. The color changed but the font size did not. Any hints or ideas where I might find an answer?
Thank you in advance for the help, it is muchly appreciated.
Vince
<html>
<head>
<style>
.colored {
color: blue;
}
#body {
font-size: 14px;
}
#media screen and (max-width:500px) {
.colored {
color:red;
}
p {
font-size: 10px;
}
}
</style>
</head>
<body>
<div id='body'>
<p>Hi Pierce,</p>
<p class='colored'>
This text is red if the window width is
below 500px and blue otherwise.
</p>
<p>Jerry</p>
</div>
</body>
</html>
You may just need to add the !important flag.
p {
font-size: 10px!important;
}
Related
HTML CODE:
(Image is present in the right directory)
<html lang="en-US">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="styles/style.css">
</head>
<body>
<header>
<h1>Sample Header</h1>
</header>
<main>
<article>
<h2>Sample Header 2</h2>
<p>Sample Paragraph 1</p>
<p>Sample Paragraph 2</p>
</article>
</main>
</body>
CSS CODE:
html{
font-family: 'Open Sans', sans-serif;
background-image: url('images/pattern.png');
background-color: burlywood;
}
body {
width: 100%;
max-width: 1200px;
margin: 0 auto;
background-color: white;
position: relative;
}
header {
height: 150px;
}
h1 {
font-size: 50px;
line-height: 140px;
margin: 0 0 0 32.5px;
}
main {
background: #ccc;
}
article {
padding: 20px;
}
h2 {
margin-top: 0;
}
p {
line-height: 2;
}
background-image does not work in the above form,but when the same css-code is included in style tag,background-image works perfectly fine,why not in external stylesheet?
I think this is a path issue for the background-image: url(...). I can't reproduce at the moment because of lacking information but please be aware of your folder structure. When you use <style> for CSS the starting point for the relative path is your root folder (or where the HTML is located).
In case of the style.css the starting point is the folder styles. So mind that in that case the path might have to change. You can use the Firefox developer tools or Chrome developer tools to modify your path on the fly. This way you can easily find out yourself where the issue with the path originates or if the background-image rule was applied properly on your element.
Updated: added links to developer tools (Mozilla, Google)
I'm trying to use the font 'Cabin Sketch'
I incluced the font like it says on the google web font page:
html:
<link href='http://fonts.googleapis.com/css?family=Cabin+Sketch:400,700' rel='stylesheet' type='text/css' >
css:
body {
font-family: 'Cabin Sketch';
font-style: normal;
font-weight: 400;
color: #dbdbdb;
font-size: 14px;
}
Letters from a-z are working but any other charakters like .!# are not working.
In the google web font preview all characters are working.
Other fonts are working perfectly.
I'm using firefox 11.0 and Ubuntu 11.04.
I also created a issue on google font directory:
http://code.google.com/p/googlefontdirectory/issues/detail?id=124
Thank you in advance.
That seems right, Which browser are you using it with? It should work for all alphabets that it uses. I tested it and it works just fine. Make sure your browser supports #font-face
jsfiddle
http://jsfiddle.net/
html page
<head>
<link href='http://fonts.googleapis.com/css?family=Cabin+Sketch:400,700' rel='stylesheet' type='text/css'/>
</head>
<body>
<div id="font">
<p>Hey yo</p>
<p>1234</p>
<p>! # .</p>
</div>
<div id="normal">
<p>Hey yo</p>
<p>1234</p>
<p>! # .</p>
</div>
</body>
css
body {
padding: 100px;
}
div {
margin: 10px;
}
#font {
font-family: 'Cabin Sketch';
font-style: normal;
font-weight: 400;
color: #333;
font-size: 14px;
}
Preview in Chrome
So it is correct, as you see above, it supports non alphabetical characters. Run the fiddle to see yourself. Hope that helps!
I am encountering issues with aligning a CSS Search Input Box like the Google style one found on this tutorial page.
I have edited the code to suit my design but for some reason I am unable to get this to align properly within the iPhone/iPad with the right element not aligning with the left element at the bottom.
The alignment issue can be seen here
The code is as follows:
HTML:
<div id="search">
<form name="" action="" type="">
<input type="text" name="field" id="field" />
<div id="delete"><span id="x">x</span></div>
</form>
</div>
CSS:
#search {float:left; margin:11px 0 0 156px;}
#field {float:left;width:200px; height:22px; line-height:22px; text-indent:0px; font-family:arial,sans-serif; font-size:12px; color:#999; background: #fff; background:url('search-icon.png') no-repeat left center; padding-left:25px; border:solid 1px #d9d9d9; border-right:none; -webkit-appearance:none; -webkit-border-radius:0px;}
#field:focus {outline:none;}
#delete {float:left; width:16px; height:24px; line-height:22px; padding:0 0 0 6px; font-family:"Lucida Sans", "Lucida Sans Unicode",sans-serif; font-size:14px; background:#FFFFFF; border:solid 1px #D9D9D9; border-left:none; -webkit-appearance:none; -webkit-border-radius:0px;}
#delete #x {color:#999999; cursor:pointer; display:none; }
#delete #x:hover {color:#666666;}
I noticed that changing the height:24px below:
#delete {float:left; width:16px; height:24px; line-height:22px; padding:0 0 0 6px; font-family:"Lucida Sans", "Lucida Sans Unicode",sans-serif; font-size:14px; background:#FFFFFF; border:solid 1px #D9D9D9; border-left:none; -webkit-appearance:none; -webkit-border-radius:0px;}
To height:27px; aligns correctly in Safari on the iPad/iPhone but then doesn't display correctly on IE/FF/Chrome.
Any help would be very much appreciated with this. Thanks
I tested locally it works, if you add the following on top of your page then the problem should be fixed.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Set #delete {height:22px;}
The height on your #field is set to 22px so it must be the same on #delete.
As a side note, I'm sure you do already, but if not, Firebug or Chrome tools can be very helpful in debugging CSS, HTML, Javascript, and much more.
THE FIX
OK. I troubleshooted further for you. This seemed to work for me (and made sense), but I didn't have a good way to test on iOS, so you will have to update the link. For some reason, it was adding padding - 1px - to three sides of the #field form. Try changing #field { padding-left:25px } to #field { padding: 0 0 0 25px; } This should work as long height is set to the same value on both #field and #delete. Let me know if it works, and I'll update my answer.
So how can I had a td which has only 1 class?
For example:
<td class="ss_label ss_class">Hello</td>
<td class="ss_label">World!</td>
I this case I want to display:none the second one.
This works: $('[class="ss_label"]').hide(); but I don't want to use Javascript or any library such as jQuery. Just pure CSS.
In the real life example, the td I want to hide is the sixth and seventh.
You can use that attribute selector from jQuery in CSS as well:
td[class="ss_label"] { display: none }
This will match a <td> element whose class attribute is exactly "ss_label" with no other additions to it. Works in all major browsers except IE6 (if you consider it a major browser).
You can do:
.ss_label { display: none }
.ss_label.ss_class { display: table-cell }
for this specific case.
As far as I know, there is no general solution.
<style type="text/css">
.ss_label {
display:none;
}
.ss_label.ss_class {
display:block;
}
</style>
The last rule overrides the first one
Maybe you can use the attribute selector (works in safari)
<html>
<head>
<style>
div.hide { color: green }
div[class=hide] { display: none }
</style>
</head>
<body>
<div class="hide">Hide me</div>
<div class="no hide">Don't hide me</div>
</body>
</html>
It looks like if the font in UIWebView is by default some kind of "Times New Roman". I guess I would have to figure out what font apple uses for [UIFont systemFontOfSize:15] ... or is there some intelligent way to do it?
How are you inserting text in the UIWebView? Assuming you are setting the HTML you can change the font either by full CSS, inline CSS or deprecated font tags.
<html>
<head>
<style>
BODY { font-family: 'Times New Roman'; font-size: 15px; }
</style>
</head>
<body>
Here is some text
</body>
</html>
Of course tweak style and size appropriately.
[myWebView loadHTMLString:[NSString stringWithFormat:#"<html><head><style>BODY { font-family: 'Arial-Bold'; font-size: 16px; }</style></head><body>%#</body></html>",htmlBodyString] baseURL:nil];