I've made a site where all texts are for some pixels up in android tablet and mobile compared with desktop.
Would like to copy a small example.
Here's my html code:
<body>
<h3>MAKING OF</h3>
</body>
Here's the css code:
body {
text-align: center;
padding-top: 50px;
}
html {
font-size: 62.5%;
}
#font-face {
font-family: MPL;
src: local("MPL"),
url(fonts/MPL.ttf),
url(fonts/MPL.eot);
}
h3 {
font-family: MPL;
font-size: 30px;
font-size: 3rem;
height: 60px;
line-height: 60px;
padding: 0px 12px;
background-color: #5496F2;
color: #000;
}
May anyone know the reason why the text is not properly aligned on tablet.
Here's the screenshot of the right alignment on desktop browser
And here's the screenshot of the issue on tablet browser
On desktop this is working properly both in FF and Chrome, but on android tablet it's wrong aligned as on Chrome as on FF browsers, also it's not properly working on ios Safari browser. Here's the link:
http://inants.com/kadmos/web/kad/a/a
Hope someone will help to understand this issue and will suggest the best solution.
Thanks.
Have faced a similar issue. Looks to be the custom-font that's causing the issue. Try replacing the custom-font with something generic such as Sans-serif.
Not yet sure how to resolve the issue by using the same custom-font that's causing the issue.
Have you tried actually using the "vertical-align" css property? Try this.
Related
I've been trying to center a number inside of a circle, and I just can't quite get it. Every time I think I have it, it seems like it on some platform it doesn't work (whether it's an apple phone, an android browser, Safari on Mac OS X, or Chrome / Firefox on Windows) there's a 1-2 pixel difference.
Here's the code:
.unread-replies {
display: flex;
justify-content: center;
text-align: center;
align-items: center;
background-color: #F24648;
border-radius: 50%;
width: 25px;
height: 25px;
font-weight: 500;
color: white;
font-size: 17px;
border: 1px solid #00000066;
}
* {
box-sizing: inherit;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji" !important;
}
<div class="unread-replies">1</div>
Fiddle copy here: https://jsfiddle.net/3vr2mkfb/3/
In this case it seems like it's not vertically centered on Chrome in my desktop browser, but it is vertically centered on Chrome on my Android phone. Why the discrepancy?
If I try small hacks like padding-bottom: 2px; then it inevitably causes some problem on some other platform. I think I instead need the actual fix, but I don't know if there is one?
add some line-height with the same value as the font-size and see if it fixe anything.
Use Viewport Units like vw for width and vh for height instead of px and % because it will help you make your webpage/website responsive.
It will surely solve your issue but if it doesn't let me know in the coments I will try my best to help you.
I have scoured the web for simple ways to make a progress bar on a website that is consistent across all browsers. I have achieved this for PCs by using elements instead of the progress element and thought all was well until I looked at the website on my android phone using chrome browser app.
It would appear that Chrome for Android does not support this code?!
Can someone point me in the right direction to get this to appear correctly?
#percent {
background-color: black;
border-radius: 10px;
padding: 3px;
color: yellow;
height: 38px;
}
#inner {
background-color: white;
border-radius: 8px;
height: 100%;
width: 100%;
float: right;
}
#bar {
background-color: cyan;
border-radius: 8px;
text-align: center;
line-height: 38px;
color: blue;
height: 100%;
float: left;
}
<br><br><br>
<div id='percent'>
<div id='inner'>
<div style='width: 63%;' id='bar'><b>63% Full (1354.3 GiB Free)</b></div>
</div>
</div>
I tested the code using the (desktop) chrome device emulator and it runs fine on all sorts of devices. This does, however, not emulate the chrome app for android or IOS, but the aspect ratio of the device does not influence if the nested <div> renders or not.
I hope this gives you some insight into your problem.
P.S. Did you check if your chrome version is up-to-date? It might run an outdated version of html/css
I have run into a very strange and incredibly annoying rendering bug in the Android WebView. I have tested this in a bunch of other browsers both on the computer and on my phone, and it does what its supposed to, but not in the WebView.
The blue box should be the same height as the header (30px) with text vertically centered in it, but instead, it is rendered as 25px. The only fix I've found, which doesn't make any sense, is to set the line-height of the blue box to 35px only on Android WebView, but this is a terrible hack.
css
body { margin: 0; }
#header {
height: 30px;
background-color: red;
position: absolute;
top: 0;
left: 0;
right: 0;
}
#button {
float: right;
line-height: 30px;
background-color: blue;
color: wheat;
vertical-align: middle;
}
html
<body>
<div id="header>
<div id="button"></div>
</div>
</body>
This is caused by the font boosting feature from webkit. There is actually a bug assigned to your problem: Bug 84186
Having the same problem as you, I actually created a javascript library that tries to fix the issue automatically. Be warned though, it's still in BETA status.
I'm having issue where the site logo gets cut off in phone but not in desktop. I've tried different things such as using <img/> <a> <div> but same issue.
Here's how it looks in phone: http://saarman.net/storage/123-mob.jpg
Here's how it looks in desktop: http://saarman.net/storage/123-web.jpg
Also notice in mobile the text is less bold than it is in browser. What could be the issue?
Here's the CSS I use inside the <a> where the logo is:
display: block;
width: 300px;
height: 80px;
background-image: url("../image/logo-dark.svg");
background-size: 100% 100%;
background-repeat: no-repeat;
text-indent: -99999em;'
Tested with android phone using chrome browser
It seems to me that your DIV is getting out of the screen.
Probably this would work for you:
width: 100%;
max-width: 300px;
Note: You also might need to play with the height. However the following should do the work
height: auto;
when I build bottom toolbar in HTML I use the following code:
.bottomMenu
{
position: fixed;
bottom: 0px;
width: 100%;
}
.bottomMenu div
{
text-align: center;
white-space:nowrap;
}
the problem is that it work just fine in ordinary browser but it does'nt work in mobile browser such as iphone or android.
how to solve this problem?
thanks in advance.
Kobi
The problem is fixed positioning, which isn't really supported by iOS<5 and Android<3: http://caniuse.com/#search=fixed
Search for 'position fixed iOS' or something like that for lot's of alternative solutions :)