It should be simple, but for whatever reason rem isn't working for me.
For example I have
<div id="big_paragraph">
<p>I will make sure you get upvoted,</p>
<p>if you answer this simple question</p>
<p>for me. Thanks!</p>
</div><!-- big_paragraph -->
And I want the font-size to be responsive, so in my CSS I have
* {
margin:0;
padding:0;
border:none;
}
html{
font-size: 62.5%;
/* I also tried font-size: 16px; to no avail */
}
body{
font-family: 'Muli', sans-serif;
}
#big_paragraph{
margin-top:101px;
font-size: 4.1rem;/*41px*/
text-align:center;
}
I don't know if it matters but I also have the following in my head section of my html
<meta name="viewport" content="width=device-width, initial-scale=1.0">
This should work but would probably only work in modern browsers.
.some-paragraph{
font-size: 5vw !important;
}
I believe you have to change it based on the media query. So, cleaning it up a bit, this worked for me. Hope this helps.
body{
font-family: 'Muli', sans-serif;
font-size: 62.5%;
}
#big_paragraph{
margin-top:101px;
font-size: 4.1rem;/*41px*/
text-align:center;
}
#media only screen and (max-width: 720px) {
#big_paragraph {
font-size: 150%;
}
}
<div id="big_paragraph">
<p>I will make sure you get upvoted,</p>
<p>if you answer this simple question</p>
<p>for me. Thanks!</p>
</div><!-- big_paragraph -->
Your code seems to be working just fine for me.
I would however recommend using a class instead of an id so that you can reuse the css if needed later.
I would have made this a comment, but I do not have that ability yet.
Related
I am trying to draw a text-based GUI in HTML (just for fun) which looks like an old terminal app and I have ran into a problem:
When I have two lines (divs) and I put graphic characters in them like these:
░░░
░░░
I can't align the lines properly (vertically). If I just put terminal characters in my divs like this:
<div class="line">░█║▄▀</div>
<div class="line">░█║▄▀</div>
there is a little spacing between them. (probably height/line-height issue).
If I style them like this:
.line {
height: 1em;
line-height: 1em;
}
they overlap. I tried to fine-tune the values by hand but it seems that height and line-height does not work together well for example with font-size: 40px and line-height: 40px I have to use a height value of 45.5px. What is the problem with my approach? Is there a simple way to align my lines without fine-tuning?
Note that I zeroed all spacings/margins/paddings and I also checked the calculated css in developer tools so it is not an issue with either of these.
My base css is this:
* {
margin: 0;
padding: 0;
}
body {
font-family: 'Source Code Pro', monospace;
}
I'd add font-family: monospace at least, see fiddle.
But to be honest I'd go with a pre tag and if neccesary spans - and not do line by line div.
I've tested this on the edge browser. I don't know what will happen on other browsers.
Bare in mind that for smaller font sizes (under .5em), some glyphs may become obscured based on monitor resolution, browser, and size.
<!DOCTYPE html>
<html>
<head>
<title>page title</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
font-family: 'Source Code Pro', monospace;
}
.line {
/* height: 1em; */
/* line-height: 1em; */
font-size: 5em;
}
</style>
</head>
<body>
<div class="line">░█║▄▀</div>
<div class="line">░█║▄▀</div>
</body>
</html>
I'm using these google fonts in my web page (I'm also using Bootstrap - don't know if that changes anything, I'm kinda new to this coding thing):
.initial {
font-size: 1.5em;
font-family: 'Euphoria Script', cursive;
}
p {
font-family: 'Open Sans', sans-serif;
}
<html><head>
<link href='https://fonts.googleapis.com/css?family=Euphoria+Script&subset=latin-ext' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Open+Sans&subset=latin-ext' rel='stylesheet' type='text/css'></head>
<body>
<p><span class="initial">S</span>ome text here. And some more. We seriously need a lot of text.</p>
</body>
</html>
Problem is that, since the euphoria font is taller, when the line breaks there's more space between the first line and the second than between all the other lines. Is there some workaround? I don't care if the text is near the initial or indented.
Thanks!
Consider using float: left (+ first-letter selector if you don't care with supporting old browsers:
p:first-letter {
font-size: 1.5em;
float: left;
padding-right: 5px;
padding-bottom: 5px;
color: red;
}
See http://jsfiddle.net/zr8qarw9/
Specify the line height on your text, so all text will have the same height despite the difference in the font size. Try this:
.initial {
font-size: 1.5em;
font-family: 'Euphoria Script', cursive;
}
p {
line-height: 1.2em;
font-family: 'Open Sans', sans-serif;
}
<html><head>
<link href='https://fonts.googleapis.com/css?family=Euphoria+Script&subset=latin-ext' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Open+Sans&subset=latin-ext' rel='stylesheet' type='text/css'></head>
<body>
<p><span class="initial">S</span>ome text here. And some more. We seriously need a lot of text. And some more. We seriously need a lot of text. And some more. We seriously need a lot of text. And some more. We seriously need a lot of text. And some more. We seriously need a lot of text. And some more. We seriously need a lot of text.</p>
</body>
</html>
I'm trying to import google fonts, the thing is i follow the steps and actuallyit works if a use
<h3 style="color:white ; font-family:signika; padding:2%"> Whatever </h3>
but what i want to do it's set the Signika font as the default one, so i do
html {
font-family: 'Signika', 'Signika:700' , sans-serif;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
but it does not wor,i still have to set it in every html tag, i even tried to put it specificly like
h1 {
margin: .67em 0;
font-size: 2em;
font-family:'Signika';
}
but still, not working!
Add this line to your index.html file in the <header>
<link href='http://fonts.googleapis.com/css?family=Signika' rel='stylesheet' type='text/css'>
If font-family: signika works inline use that in the css file too.
html {
font-family: signika, sans-serif;
}
The rule 'Signika:700' would not do anything, what I think you're trying to do should be written as:
font-family: signika;
font-weight: 700;
I figured out i was putting the rule font-family in h1 but that was not the only instance of h1, therefor i had to look further and i found the respective h1 sentence to use the font-family, so it was missplaced after all, thank you for you help, was very useful!
I'm trying to code a responsive design email-- I've combed through here and couldn't find anything that exactly helped. I'm really not seeing any part of my #media query coming through-- the images are staying at the size I coded in the #media query, and not resizing back in browser. The mobile style for the fonts I've coded also aren't sticking. Here's some of the code:
<style type"text/css">
body {background-color: #e5e5e5}
p {
font-size: 13px;
font-family: verdana;
line-height: 21px;
color:#4B5460;
}
a {
font-family: verdana;
font-weight: bold;
text-decoration: underline;
color: #4B5460;
}
.footer_link {
font-weight: normal;
text-decoration: none;
color:#0c5bba;
font-size: 11px;
}
#media screen and (max-width:480px) {
.graf_font {
font-size: 16px;}
}
.reg_button {
max-width:200px;
}
.mobile_hide {
display: none;
}
.chiclets {
max-width: 100px;
}
.snapshot {
max-width:75px;
}
}
</style>
Let me know if you need more code-- I'm a beginner with this, so I know I'm missing something glaring!
Thanks!
It looks like you have an extra closing bracket.
.graf_font {
font-size: 16px;} /* <-- remove this bracket */
}
Also check to make sure the email client your in even supports media queries.
https://litmus.com/help/email-clients/media-query-support/
Max-Width is not fully supported for email. I have found using percentages to be a useful alternative (e.g. width=80%). If you can make images take up a certain percentage of the screen or table cell on mobile images instead of being a particular pixel width it may be more successful. If you still aren't having success, try adding !important after your CSS.
Also, you'll want to style your text inline, as a lot of that will get stripped by different email clients.
I would also suggest that you check out https://litmus.com/community. It is a newly free source with a lot of up-to-date info on email design and people who know a lot more about email design than me.
I've taken to using rem's to size fonts in recent projects, then using px as a fallback for older versions of IE.
I've also been setting a font-size of 62.5% on thehtml so I can more easily set font sizes later on in the stylesheet, I then set a font-size of 1.4rem on the body so unstyled elements have a base font-size of at least 14 pixels, see the code below:
html { font-size: 62.5%; } /* font-size: 62.5% now means that 1.0 rem = 10px */
body { background: #fff; font-family: arial; font-size: 1.4rem; line-height: 1.6rem; }
The problem is, Chrome seems to handle this in a strange way ... Chrome seems to set the font sizes correctly on the inital page load, but on subsequent refreshes the font sizes are way bigger than they should be.
SEE FIDDLE (HTML copied below for future reference)
<!DOCTYPE html>
<html lang="en-GB">
<head>
<title>Page Title</title>
</head>
<body>
<p>This is a test, this font should have font-size of 14px.</p>
<p>This is a test, this font should have font-size of 14px.</p>
<p>This is a test, this font should have font-size of 14px.</p>
</body>
</html>
Remember, you might need to hit run once or twice in Chrome to see said effect.
Does anybody know what is causing this or if there's a way around it? Am I committing a crime by setting a 62.5% font-size on the html element (I realise there are arguements against doing so)?
The easiest solution that I have found is to simply change the body definition to
body {
font-size: 1.4em;
}
Because it is the body, you don't have to worry about compounding – just use rems everywhere else.
Try:
html { font-size: 62.5%; } /* font-size: 62.5% now means that 1.0 rem = 10px */
*{font-size: 1.4rem;line-height: 1.6rem; }
body { background: #fff; font-family: arial; }
Seems to look better on refreshing the page :)
FIDDLE
Yes, this is a known bug in Chrome, which has been linked already.
I found
html { font-size: 100%; }
seems to work for me.
The * selector is very slow, as the author of this bug in Chrome, I'd advise a workaround like this until the bug is fixed:
body > div {
font-size: 1.4rem;
}
Provided you always have a wrapper div anyway ;)
This seems to be a Chrome bug; see Issue 319623: Rendering issue when using % + REMs in CSS, and/or a partly-merged duplicate: Issue 320754: font-size does not inherit if html has a font-size in percentage, and body in rem
The answer of Patrick is right.
We have the same issue on Android 4.4.3 WebView.
Before:
html {
font-size: 62.5%;
}
body {
font-size: 1.6rem;
}
After:
html {
font-size: 62.5%;
}
body {
font-size: 1.6em;
}
With em and not rem, it works !
The way I fix this is by setting an absolute font-size in the body-element. For all the other font-sizes I use rem:
html {
font-size: 62.5%;
}
body {
font-size: 14px;
}
.arbitrary-class {
font-size: 1.6rem; /* Renders at 16px */
}