This is the third time I have faced this problem.
I don't know what is wrong.
Here are two pictures of how it looks like:
On desktops:
On mobile devices:
As you can see on mobile devices text is not aligned center vertically.
Again this problem is only visible on mobile devices.
What is the problem? What did I miss? This problem is also visible in inputs.
I am using the following code for the buttons:
.button
font-family: 'Gotham Pro', sans-serif
font-size: 14px
color: $color-text--button
padding: 10px 15px
text-transform: uppercase
background: $color-button--default
border: 1px solid $color-transparent
Please note, I use padding for setting height of buttons
UPDATE
I have just tested in mobile android Firefox browser, everything works just fine the issue only with Chrome
There is no line-height specified in your code.
Try setting a specific line-height. In addition I suggest, that you center your text via line-height and not via padding. Set a line-height with the same height the button has.
CSS
.button {
height: 40px;
line-height: 40px;
}
This works of course only for single line texts.
Also have a look at this SO question
Did you specify a media query SPECIFICALLY for mobile?
You may need to add
// you can use any other value of screen width mobiles use like 640, 768
#media (max-width:480px){
line-height: 15px; // The line height you want to show on mobile
}
Not all browsers have a default. Almost always I make a habit of setting styles on the body element
body{
font-size: 100%;
line-height: 1.333%;
}
to take care of things like this.
I had to work with a fancy font today and I noticed that it has different line-height rendering on chrome mobile device and chrome desktop mobile emulator (devtools). Which is apparently a bug to be reported for either dekstop either mobile chrome. Changing line-heights is the option to fix but cumbersome if you have many elements. After some digging I figured out this properties
ascent-override: 92%; /* play with values */
descent-override: 10%; /* one might not be needed */
Futhermore as I needed font change for mobile chrome only I tried media query and it worked.
#media (max-width: 1000px) {
#font-face{
font-family:'FancyFont';
src:url('fonts/FancyFont.ttf');
font-weight:400;
ascent-override: 92%;
}
}
Related
I'm trying to get a button to have a responsive width based on the screen size. I've got it so it works perfectly when I resize a regular Chrome window, but when I toggle the display to mimic a device (any mobile device/ipad/etc.) the width of the button immediately gets much smaller. It looks the same even when I open it on my iPhone, so it's not just some weird issue with Chrome's tools. When I inspect the element, I can see that width has been disabled:
I thought there might be some CSS overriding it, but then that doesn't explain why this behavior disappears entirely when I'm simply resizing Chrome or even picking one of the devices with wider resolutions than any of my rules. I have still tried removing all of my #media rules and the behavior persists.
The button is pretty basic HTML, and it's not even wrapped up in a div that could be causing the issue (unless the fact that there's a flex box right under it could be a problem?):
<body>
<button id="ranking-button" type="button" onclick="openRanking()">RANKING</button>
And all of the relevant CSS is here:
#ranking-button {
position: fixed;
top: 0;
right: 0;
margin: 20px;
font-family: 'Black Han Sans', sans-serif;
font-size: 24px;
color: black;
background-color: #ffcc00;
width: 40%;
height: 60px;
cursor: pointer;
border: 0em;
}
#ranking-button:hover {
background-color: black;
color: white;
}
button:focus{
outline: none;
}
#media (min-width: 600px) {
#ranking-button {
width: 200px;
}
}
I've also tried adding !important to it, and it then did work for mobile - but then stopped changing for any other resolution and was stuck at 40% all the time.
I'd given up on this minor side project, and then randomly realized what I'd done wrong while doing something completely different - in case anyone makes the same mistake as me, I'd managed to forget to set the viewport. Adding this made the CSS work:
<meta name=viewport content="width=device-width, initial-scale=1">
When you use a #media query, it does anything inside it when the 'rules' inside the brackets are accepted.
So, if you say that max-width:1000px then, if your browser is 600px then anything inside it will apply, if not, then it will be ignored.
For screens smaller than 600px, your normal #media css rule will be accepted and there you said width:40%, and you can't measure in %.
#media only screen and (max-width: 600px) {
#ranking-button {
width: 200px;
}
}
On our website we have the following phenomenon: When rendering the website on a desktop browser (Firefox, IE, Chrome), all fonts, in particular those embedded in <td> tags, are rendered in the same size.
However, when rendering the website on a mobile device, the font size of the texts within the <td> tags shrinks. See below. We tried to set
html {
-webkit-text-size-adjust: none;
}
but this only helps with the problem on the mobile safari and opera browser. Using the tips from this website, we added
#media (max-width: 960px) {
td {
font-size: 20pt;
}
}
to the css, but this now miraculously only works for one of our phones held tilted sideways, not in portrait.
How do we prevent the font-size within the table cells to be scaled down?
What Olli and JStephen said, but I also had to add text-size-adjust: none;
html,body {
text-size-adjust: none;
-webkit-text-size-adjust: none;
-moz-text-size-adjust: none;
-ms-text-size-adjust: none;
}
You were most likely looking for this:
Include the following <meta> tag in the document's <head> section:
<meta name="viewport" content="width=device-width, initial-scale=1">
It helped me with the same problem.
Maybe if you also add body to the css like this:
html,body { -webkit-text-size-adjust:none; }
Resource: iPhone/iPod - prevent font-size-changing
I know this is an old post, but I came across it and found the answer that worked for me is just an extension to Olli's. There are more css styles you have to add to support other browsers:
-webkit-text-size-adjust: none;
-moz-text-size-adjust: none;
-ms-text-size-adjust: none;
I had originally put everything in table cells which worked on my nexus, but my samsung phone was still randomly deciding which text to scale and which to keep the set size. I set 13px to everything on the page and it was the only font size styling I did. This was the only way I was able to fix it on all the devices I have.
First of all, font-size should be set relative to a default-value that is defined by the html selector, in case of repsonsive formatting.
For example:
html {
font-size: 100%;
}
h1 {
font-size: 2em;
}
td {
font-size: 1.25em;
}
The reason for this is that different platforms use different default values for 100%. E.g. desktops use 16px but mobile browsers often use 24px.
If you define the font-size of one of your elements to an absolute value, it will not scale with the rest of the items that have been assigned no value or a relative value; thus resulting in this behaviour.
The best solution to this problem: use relative font-sizes with em, rem or even % as the unit, istead of the absolute font-sizes with pt or px as the unit.
Edit for more background on the different default font-size on different platforms:
Because each platform has its own use-case, its own average screen size, average reader-to-screen distance, average DPI-value for its screen and (most important of all) a different viewport width, font-sizes aren't equally legible on each of those platforms if set to a fixed size. That's why the browsers define the default size to something different, as to optimise the experience for the user on that specific platform.
Sure, you could ignore this and keep setting all your font-sizes to something fixed, but that's going against the flow and breaking the user experience. Instead, try to make peace with this fact and be sure that it all scales properly.
Edit2: To warn you about the usage of em vs rem: using em will inherit the parent value and multiply it by the value of the font-size you define in your current element, while using rem will always be based on the value that is set in the root element instead of the parent element. So the following code will result in the following absolute values:
HTML:
<html>
<...>
<body>
<div>
<p>..</p>
</div>
</body>
</html>
CSS:
html {
font-size: 100%; /* we agree on 16px for this example */
}
div {
font-size: 1.25em; /* add a quarter of 16, so 20px is the actual value */
}
p {
font-size: 0.8em; /* subtract a fifth of the value of the parent element: 20 * 0.8 = 16 again */
font-size: 0.8rem; /* subtract a fifth of the value of the root element: 16 * 0.8 = 13.8 (will be rounded by browser to 14) pixels */
}
I have a button class anchor CSSed as follows:
.button {
display: inline-block;
width: 8.0em;
text-align: center;
text-decoration: none;
background-color: #840;
letter-spacing: 1px;
line-height: 2.2em;
padding: 0.5em 0.2em;
border: 4px solid #420;
}
See below for an example with FAQ tapped.
It doesn't happen reliably, but typically only the first time a button is tapped, sometimes when you go back the button is back to normal, other times it is wider, other times it looks larger (meaning width, height and font are larger), other times all the buttons look smaller!
If you want to try it out, you need to use Safari on an iPhone -- iMac and iPad seem to work okay.
I had a similar situation lately on the iPhone (well itouch but it is using the same iOS) I had a paragraph that for some unknown reason the text was reflowing and becoming bigger than the heading text. But rotating the device the text reflowed and changed size. I fixed it with this:
-webkit-text-size-adjust: 100%;
I found this answer originally here:
Fix font size issue on Mobile Safari (iPhone) where text is rendered inconsistently and some fonts are larger than others?
Hope that works for you.
I've created a page with tables of data that I want to be big enough to view comfortably on the screen but when it goes to print I want it to shrink down to fit on the page but when I change the size of the table, td's and fonts it wont work, the code works in chrome but not the other two browsers.
#media print{
.table6{
page-break-inside: avoid;
min-width: 500px;
max-width: 900px;
}
.table6 td{
font-size: 59.35%;
}
.th7{
max-width: 100px!important;
}
.th8{
max-width: 28px!important;
font-size: 58%;
}
}
The CSS works the print css works but only on certain elements and using certain attributes like display: none to hide navigation links etc.
According to http://caniuse.com/#feat=css-mediaqueries, CSS3 media queries are supported as of IE9 and Firefox 23.0
whatever you need to check compatability for, i highly suggest:
http://caniuse.com/css-mediaqueries
hope that helps
Solved the issue, when changing the width inside of #media print{} it can't override the values which exist in the regular css which is suitable for the screen, even when !important is called on it so I put the css for my table inside #media screen{} and it worked.
So if anyone has this issue with changing widths heights or size in general when printing in other browsers make sure your css is split up into #media print{} and #media screen{} otherwise it wont work in IE or Firefox.
(EDIT)
In firefox also if you want something to appear on the screen one way and print another you MUST have your styles for on the screen in #media screen{} if you leave it in the normal css print styles will never override the regular css. For example I had this inside the normal css but it was ignored in firefox when printing
.table6{
float: left;
}
So I had to put it like this
#media screen{
.table6{
float: left;
}
}
Here is a link to the page that is giving me trouble:
http://youtube.thegoblin.net/layoutfix/
If you view the website in firefox and chrome you can see that the spacing is different. The way it looks in chrome is the way I meant it to look.
I have tried linking in the YUI 2: Reset CSS as it as suggested in another question, but I cannot seem to get it to work.
Here's the stylesheet link: http://youtube.thegoblin.net/layoutfix/styles/style.css
You should change line-height on some elements that contains text. These are line-heights for some (maybe all) elements you need to change:
#title: 56px
.yoText: 46px
#buttonTitle: 68px
#buttonText: 34px
Looks like browsers count differently line height for font you choose, so defiantly line-height could make it better.
Just short example, not full fix:
#dl-button #buttonTitle {
color: #37590B;
float: right;
font-family: "TallDark";
font-size: 600%;
line-height: 0.7;
margin-right: 60px;
margin-top: 20px;
text-shadow: 1px 1px #BDF277;
}
makes green button much better, so you may play around with others the same way.