Re: Smaller fonts in production?
I agree that the site based zoom that others have mentioned is
probably at fault.
If not, have you tried to narrow it down with some random
troubleshooting, like:
- Does this happen in any browser, on any system?
- Does the source look identical?
- Have you inspected the affected elements with Firebug and compared
the computed CSS?
That's all I can think of, for now. There should be a clue in there
somewhere.
Good luck,
Tom
On Jan 5, 1:01 am, Carson Cole wrote:
> My fonts appear 25% smaller in production on Heroku vs in development
> locally. Have only one style sheet 'main.css' that I load '<%=
> stylesheet_link_tag 'main' %>' that shows correctly in source code in
> production. What gives?
>
> Here's my stylesheet:
>
> /* DEFAULTS */
> * {
> margin: 0;
> padding: 0;
> border: 0;
>
> }
>
> body {
> background-color: #fff;
> height: 100%;
> width: 100%;
> font: 13px "Lucida Sans", Tahoma, Verdana, sans-serif;}
>
> a {
> margin-left: 7px;
> margin-top: 4px;
> float: left;}
>
> h1 { font-size: 2.5em; }
> h2 { font-size: 1.8em;}
> h3 { font-size: 1.6em; }
> h4 { font-size: 1.5em; }
> h5 { font-size: 1.4em;}
> p { font-size: 1.2em; }
> .clear { clear:both; }
> .right { float: right; }
> .left { float: left; }
> .email {
> margin-top: 5px;}
>
> .header { width: 100%;}
> .facebook_icon { margin-top: -1px;}
> .follow {
> background-color: #5f9e52;
> text-align: center;
> width: 100%;
> margin: 0 auto 0 auto;}
>
> .follow .frame {width: 350px;}
> .follow_text {
> font-size: 1.8em;
> color: #fff;
> float: left;
> margin-top: 3px;
> margin-left:8px;
> margin-right: 20px;}
>
> form {float: left;}
> form input {
> border: thin #fff solid;
> padding: .2em;
> font-size: .8em;}
>
> #footer {
> clear: both;
> text-align: center;
> margin-top: 1em;
> margin-bottom: 1em;
> font-size: .8em;
> color: #5f9ef2;}
>
> .frame {
> width: 650px;
> margin: 0 auto;}
>
> .marketing {
> font-size: 13px;
> background-color: #D0EBCA;}
>
> .marketing .frame {
> padding-top: 1em;
> padding-bottom: 1em;}
>
> .marketing h1 {
> margin-top: 0.5em;
> margin-bottom: .5em;
> font-weight: 500;
> color: #18649b;}
>
> .marketing h2 {
> font-weight: 500;
> margin-top: 1em;
> margin-bottom: .4em;
> color: #18649b;}
>
> .marketing p {
> font-size: 1.1em;
> line-height: 1.5em;}
>
> .logo {
> margin: 1em 0;
> width: 12em;}
>
> .notice {
> float: right;
> text-align: center;
> margin-top: 1em;
> width: 300px;
> color: #fff;}
>
> .notice .regular {
> padding: 10px;
> background-color: #18649b;}
> .notice .error {
> padding: 10px 20px;
> background-color: #f02311;}
> p.special_message {
> width: 300px;
> background-color: #18649b;
> text-align: center;
> color: #fff;
> padding: 10px;
> margin: 1.2em auto 1.3em auto;}
--
You received this message because you are subscribed to the Google Groups
"Heroku" group.
To post to this group, send email to her...@googlegroups.com.
To unsubscribe from this group, send email to
heroku+unsubscr...@googlegroups.com.
For more options, visit this group at
http://groups.google.com/group/heroku?hl=en.
Re: Smaller fonts in production?
> My fonts appear 25% smaller in production on Heroku vs in development Heroku compresses data for improved performance. :-) -- You received this message because you are subscribed to the Google Groups "Heroku" group. To post to this group, send email to her...@googlegroups.com. To unsubscribe from this group, send email to heroku+unsubscr...@googlegroups.com. For more options, visit this group at http://groups.google.com/group/heroku?hl=en.
Re: Smaller fonts in production?
Hi Carson
You probably already tried this, but
In your browser, for local dev, could you check your zoom level?
You may have enlarged your font with command plus.
There is a menu option for resetting it to normal view. (exact verbiage escapes
me but should be near increase font size in view or window)
Hope that helps
--Keenan
On Jan 4, 2011, at 7:01 PM, Carson Cole wrote:
> My fonts appear 25% smaller in production on Heroku vs in development
> locally. Have only one style sheet 'main.css' that I load '<%=
> stylesheet_link_tag 'main' %>' that shows correctly in source code in
> production. What gives?
>
> Here's my stylesheet:
>
> /* DEFAULTS */
> * {
>margin: 0;
>padding: 0;
>border: 0;
> }
>
> body {
>background-color: #fff;
>height: 100%;
>width: 100%;
>font: 13px "Lucida Sans", Tahoma, Verdana, sans-serif;
> }
> a {
>margin-left: 7px;
>margin-top: 4px;
>float: left;
> }
> h1 { font-size: 2.5em; }
> h2 { font-size: 1.8em;}
> h3 { font-size: 1.6em; }
> h4 { font-size: 1.5em; }
> h5 { font-size: 1.4em;}
> p { font-size: 1.2em; }
> .clear { clear:both; }
> .right { float: right; }
> .left { float: left; }
> .email {
>margin-top: 5px;
> }
> .header { width: 100%;}
> .facebook_icon { margin-top: -1px;}
> .follow {
>background-color: #5f9e52;
>text-align: center;
>width: 100%;
>margin: 0 auto 0 auto;
> }
> .follow .frame {width: 350px;}
> .follow_text {
>font-size: 1.8em;
>color: #fff;
>float: left;
>margin-top: 3px;
>margin-left:8px;
>margin-right: 20px;
> }
> form {float: left;}
> form input {
>border: thin #fff solid;
>padding: .2em;
>font-size: .8em;
> }
> #footer {
>clear: both;
>text-align: center;
>margin-top: 1em;
>margin-bottom: 1em;
>font-size: .8em;
>color: #5f9ef2;
> }
> .frame {
>width: 650px;
>margin: 0 auto;
> }
> .marketing {
>font-size: 13px;
>background-color: #D0EBCA;
> }
> .marketing .frame {
> padding-top: 1em;
> padding-bottom: 1em;
> }
> .marketing h1 {
>margin-top: 0.5em;
>margin-bottom: .5em;
>font-weight: 500;
>color: #18649b;
> }
> .marketing h2 {
>font-weight: 500;
>margin-top: 1em;
>margin-bottom: .4em;
>color: #18649b;
> }
> .marketing p {
>font-size: 1.1em;
>line-height: 1.5em;
> }
> .logo {
>margin: 1em 0;
>width: 12em;
> }
> .notice {
>float: right;
>text-align: center;
>margin-top: 1em;
>width: 300px;
>color: #fff;
> }
> .notice .regular {
>padding: 10px;
>background-color: #18649b;}
> .notice .error {
>padding: 10px 20px;
>background-color: #f02311;}
> p.special_message {
>width: 300px;
>background-color: #18649b;
>text-align: center;
>color: #fff;
>padding: 10px;
>margin: 1.2em auto 1.3em auto;}
>
> --
> You received this message because you are subscribed to the Google Groups
> "Heroku" group.
> To post to this group, send email to her...@googlegroups.com.
> To unsubscribe from this group, send email to
> heroku+unsubscr...@googlegroups.com.
> For more options, visit this group at
> http://groups.google.com/group/heroku?hl=en.
>
--
You received this message because you are subscribed to the Google Groups
"Heroku" group.
To post to this group, send email to her...@googlegroups.com.
To unsubscribe from this group, send email to
heroku+unsubscr...@googlegroups.com.
For more options, visit this group at
http://groups.google.com/group/heroku?hl=en.
Re: Smaller fonts in production?
Hi Carson,
I submitted this *exact* same question about a month ago after banging
my head against a brick wall for a few hours.
Press Cmd+0 (Mac) or Ctrl+0 (Win) to reset the zoom on your browser.
I have to admit, I was a little embarrassed at the time. But now I'm
glad I'm not the only one (presuming this works for you!)
Chris
On Jan 5, 12:01 am, Carson Cole wrote:
> My fonts appear 25% smaller in production on Heroku vs in development
> locally. Have only one style sheet 'main.css' that I load '<%=
> stylesheet_link_tag 'main' %>' that shows correctly in source code in
> production. What gives?
>
> Here's my stylesheet:
>
> /* DEFAULTS */
> * {
> margin: 0;
> padding: 0;
> border: 0;
>
> }
>
> body {
> background-color: #fff;
> height: 100%;
> width: 100%;
> font: 13px "Lucida Sans", Tahoma, Verdana, sans-serif;}
>
> a {
> margin-left: 7px;
> margin-top: 4px;
> float: left;}
>
> h1 { font-size: 2.5em; }
> h2 { font-size: 1.8em;}
> h3 { font-size: 1.6em; }
> h4 { font-size: 1.5em; }
> h5 { font-size: 1.4em;}
> p { font-size: 1.2em; }
> .clear { clear:both; }
> .right { float: right; }
> .left { float: left; }
> .email {
> margin-top: 5px;}
>
> .header { width: 100%;}
> .facebook_icon { margin-top: -1px;}
> .follow {
> background-color: #5f9e52;
> text-align: center;
> width: 100%;
> margin: 0 auto 0 auto;}
>
> .follow .frame {width: 350px;}
> .follow_text {
> font-size: 1.8em;
> color: #fff;
> float: left;
> margin-top: 3px;
> margin-left:8px;
> margin-right: 20px;}
>
> form {float: left;}
> form input {
> border: thin #fff solid;
> padding: .2em;
> font-size: .8em;}
>
> #footer {
> clear: both;
> text-align: center;
> margin-top: 1em;
> margin-bottom: 1em;
> font-size: .8em;
> color: #5f9ef2;}
>
> .frame {
> width: 650px;
> margin: 0 auto;}
>
> .marketing {
> font-size: 13px;
> background-color: #D0EBCA;}
>
> .marketing .frame {
> padding-top: 1em;
> padding-bottom: 1em;}
>
> .marketing h1 {
> margin-top: 0.5em;
> margin-bottom: .5em;
> font-weight: 500;
> color: #18649b;}
>
> .marketing h2 {
> font-weight: 500;
> margin-top: 1em;
> margin-bottom: .4em;
> color: #18649b;}
>
> .marketing p {
> font-size: 1.1em;
> line-height: 1.5em;}
>
> .logo {
> margin: 1em 0;
> width: 12em;}
>
> .notice {
> float: right;
> text-align: center;
> margin-top: 1em;
> width: 300px;
> color: #fff;}
>
> .notice .regular {
> padding: 10px;
> background-color: #18649b;}
> .notice .error {
> padding: 10px 20px;
> background-color: #f02311;}
> p.special_message {
> width: 300px;
> background-color: #18649b;
> text-align: center;
> color: #fff;
> padding: 10px;
> margin: 1.2em auto 1.3em auto;}
--
You received this message because you are subscribed to the Google Groups
"Heroku" group.
To post to this group, send email to her...@googlegroups.com.
To unsubscribe from this group, send email to
heroku+unsubscr...@googlegroups.com.
For more options, visit this group at
http://groups.google.com/group/heroku?hl=en.
Smaller fonts in production?
My fonts appear 25% smaller in production on Heroku vs in development
locally. Have only one style sheet 'main.css' that I load '<%=
stylesheet_link_tag 'main' %>' that shows correctly in source code in
production. What gives?
Here's my stylesheet:
/* DEFAULTS */
* {
margin: 0;
padding: 0;
border: 0;
}
body {
background-color: #fff;
height: 100%;
width: 100%;
font: 13px "Lucida Sans", Tahoma, Verdana, sans-serif;
}
a {
margin-left: 7px;
margin-top: 4px;
float: left;
}
h1 { font-size: 2.5em; }
h2 { font-size: 1.8em;}
h3 { font-size: 1.6em; }
h4 { font-size: 1.5em; }
h5 { font-size: 1.4em;}
p { font-size: 1.2em; }
.clear { clear:both; }
.right { float: right; }
.left { float: left; }
.email {
margin-top: 5px;
}
.header { width: 100%;}
.facebook_icon { margin-top: -1px;}
.follow {
background-color: #5f9e52;
text-align: center;
width: 100%;
margin: 0 auto 0 auto;
}
.follow .frame {width: 350px;}
.follow_text {
font-size: 1.8em;
color: #fff;
float: left;
margin-top: 3px;
margin-left:8px;
margin-right: 20px;
}
form {float: left;}
form input {
border: thin #fff solid;
padding: .2em;
font-size: .8em;
}
#footer {
clear: both;
text-align: center;
margin-top: 1em;
margin-bottom: 1em;
font-size: .8em;
color: #5f9ef2;
}
.frame {
width: 650px;
margin: 0 auto;
}
.marketing {
font-size: 13px;
background-color: #D0EBCA;
}
.marketing .frame {
padding-top: 1em;
padding-bottom: 1em;
}
.marketing h1 {
margin-top: 0.5em;
margin-bottom: .5em;
font-weight: 500;
color: #18649b;
}
.marketing h2 {
font-weight: 500;
margin-top: 1em;
margin-bottom: .4em;
color: #18649b;
}
.marketing p {
font-size: 1.1em;
line-height: 1.5em;
}
.logo {
margin: 1em 0;
width: 12em;
}
.notice {
float: right;
text-align: center;
margin-top: 1em;
width: 300px;
color: #fff;
}
.notice .regular {
padding: 10px;
background-color: #18649b;}
.notice .error {
padding: 10px 20px;
background-color: #f02311;}
p.special_message {
width: 300px;
background-color: #18649b;
text-align: center;
color: #fff;
padding: 10px;
margin: 1.2em auto 1.3em auto;}
--
You received this message because you are subscribed to the Google Groups
"Heroku" group.
To post to this group, send email to her...@googlegroups.com.
To unsubscribe from this group, send email to
heroku+unsubscr...@googlegroups.com.
For more options, visit this group at
http://groups.google.com/group/heroku?hl=en.
