Short and painless, I've tried many ways to get an element, e.g. info text, absolutely centered (H/V) without using divs, Javascript, jQuery or whatsoever.
The problem is not getting this to work and there are many different ways, but I'm losing my hair trying to get it cross-browser-compatible.
And it should be so simple.
For example, in the following scenario, FF21 interprets a margin-top of 50% as 100% for no logical reason. (Mobile devices don't, though).
I'm using <meta name="viewport" content="minimum-scale=1.0, width=device-width, maximum-scale=1.0, user-scalable=no" />
Relevant CSS:
body {
margin: 50% 0 0;
padding: 0;
border: 0;
display: block;
vertical-align: middle; /* removing this made no real difference at all */
font-family: Helvetica, Arial, MS Sans Serif;
font-size: 11pt;
text-align:center;
background-color: rgb(10, 50, 100);
color: #ddd;
}
Notes:
In Firefox, the expected vertical centering is set with a margin-top of 25% (which looks wrong in mobile browsers, then again).
Using HTML5
Trying to AVOID any form of script and precalculated, negative margins. The browser is supposed to center properly, as you request it to.
JS-Fiddle: http://jsfiddle.net/sfaVg/
Without an element containing the text, i doubt you will be able to position it dead center like you wish. Once you write proper markup (put the paragraph in a <p> where it belongs, for instance) it is quite possible though, with the following css;
p {
display: table-cell;
vertical-align: middle;
text-align:center;
}
Also make sure its container (body in your case) gets display: table; and 100% width/height
Demo at http://jsfiddle.net/sfaVg/3/
Also, a bonus alternative method (requires two containers) can be found at http://zoffix.com/new/absolute-center-random-width-height.html
A third solution, for when you know the dimensions of what you're centering: http://reisio.com/examples/deadcenter/
Related
I experienced a weird bug in Android´s (6.0.1) Chrome Browser (54.0.2840.68) when it comes to text-shadow rendering with large fontsizes and blur. It was also reported to appear in MacOS Chrome although i could not reproduce it.
I condensed the problem into a small pen for further investigation:
http://codepen.io/quarkus/pen/BQaBGj
This is, in short the styled headline i am trying to render.
h1 {
font-family: sans-serif;
text-transform: uppercase;
font-size: 60px;
margin: 0;
color: white;
line-height: 1.2;
}
h1.shadow {
text-shadow: 0 0 0 transparent, 0px 0px 40px rgba(0, 0, 0, 1);
}
The classes .filter, .fix3d and .fix are just attempts to fix this problem by rendering the headlines in a 3d context (or by creating the shadow as a blurred :before).
This is how it looks an most android devices:
s.codepen.io/quarkus/debug/BQaBGj on the device
Has anyone ever experienced that kind of rendering and can point me to a solution ?
Thanks
Markus
EDIT: forgot one thing. it occurs only if the page is "scaled" either by the user itself or by stting an meta-tag like:
<meta name="viewport" content="width=device-width, initial-scale=1">
as it is in the pen.
I'm definitely getting this on Browserstack devices (Galaxy and Nexus phones), I've not seen it on a device, but I don't have tons of devices to check.
However what fixed it for me was transforming and blocking the text:
.text {
transform: translateZ(0);
display: inline-block;
}
Not an excellent fix as I need my text to display: inline but it works.
I'm creating small web-site, that contains forms with some text-inputs. I'm using this meta tag:
<meta name="viewport" content="width=device-width" />
to display some elements correctly on mobile device. I'm checking it using Android Chrome.
It causes problem: my border of form(simple div) and borders of text-inputs become very thick, but it is set 1px. So, this is form without meta tag:
And this is form with meta tag:
So, the first question is:
How to prevent 1px increasing with device-width meta-tag?
Also, as we can see, top and bottom padding are different for text-inputs and even for button(which is div, but not submit-input!). It is more visible on second image. I've understood, that it is caused by Android typing-underlining(at least for text-inputs). When you start typing word it is underlined for auto-correction or smth like that.
In first situation underline-width is also one pixel, so difference isn't so bad(but I want to fix it too). In second it is also thick, so there is big difference:
So, logical question is:
How to prevent underlining-width increasing with device-width meta-tag?
And of course, I don't understand.
WHY does this increasing mechanism affects simple div's??? There is no typing inside
This is div code:
<div id="form-submit">ЗАБРОНИРОВАТЬ</div>
div#form-submit {
display: table;
margin-bottom: 1em;
border: 1px solid black;
background-color: white;
outline: 0px;
font-size: 0.24em;
font-family: inherit;
padding-left: 0.3em;
padding-right: 0.3em;
padding-top: 0.5em;
padding-bottom: 0.5em;
border-radius: 0.7em;
margin: 0 auto;
margin-bottom: 1.6em;
cursor: pointer;
}
Finally, you can see difference between the second and the third image. When I started typing, button text moved to center a little bit...
It will be great, if somebody give explanation of any issue...
Your problem is that your site is not tailored for mobile devices, but you are trying to view it on a mobile.
Mobile devices have a .. let's call it a feature, where, upon selecting an editable field such as an input box, it will zoom in on that section (so you can read the text you are typing.) If your mobile did not do this automatically, with how your page has been coded, you are unable to read the text.
You can stop mobiles from zooming in by editing your <meta /> tag:
<meta name = "viewport" content = "width = device-width, user-scalable = 0, initial-scale = 1.0, maximum-scale = 1.0" />
This tells the browser:
Set the initial width to the viewport width (width of the screen.)
Do not allow the user to zoom the page
Set the initial zoom of the page to 100%
Set the maximum possible scale of the page (initiated by browser or user) to 100%.
The last property is the one that will prevent the mobile from zooming in on the text fields.
However, you ought to make your website mobile compatible, if you want people to view it on a mobile, but not allow them to zoom in. Not allowing them to zoom in, on a for-desktop designed site, is bad practise.
Google responsive design for ideas and techniques to retrofit your desktop design to be mobile friendly.
I am using a default custom skin 'GHD' folder (which is not responsive) have downloaded the blanco theme, which is under 'GHDNew' folder, This is where the style.css is based and the responsive media queries.
I am using trying to style the Iphone but cannot get the portrait to work to fit the width of the device. The width is long, I can't explain it but have a look here ghd.ecommerceit.co.uk. The Landscape is working fine.
none of the page is actually fitting, and I'm having to use margins to bring everything in but struggling. Also it's my first time trying to make it responsive. Can anyone advice what I can use to bring different elements in and make them fit according to device width? i.e. Search, Navigation, Logo, Header Links, Body etc...
I don't want to use Margins but in the interim, it's working.
Mayur
The (or at least one) reason this does not fit is
.page {
position: relative;
width: 100%;
min-width: 750px;
min-height: 100%;
}
in your style.css
Check out a css framework for responsive design, like bootstrap or pure css.
You do not have a viewport meta tag in your header, try adding
<meta name="viewport" content="width=device-width, initial-scale=1">
In case your example page is ghd.ecommerceit.co.uk (without www), the (or at least one) problem is
#wrapper {
width: 1004px;
margin: 0px auto;
overflow: hidden;
text-align: left;
}
in your all.css
Above image indicates the problem - the three boxes have a 1px border around them which doesn't entirely show when on 100% zoom on mobile chrome. The version of Chrome being used is 34.0.1847.114.
There's nothing special about the Css being used:
background: #FBFEFF;
border: 1px solid #3BA8E7;
padding: 5px 6px;
font-size: 14px;
outline: none;
I suppose you already solved it by now, but the lack of answers bothers me. It seems that 1 pixel border is lost in scaling because of fallback width (google developer).
Add viewport information on pages so that devices have correct scaling information:
<meta name=viewport content="width=device-width, initial-scale=1">
I have some CSS and HTML where the font-size is explicitly styled to be 13px, and for the most part it stays that way, but occasionally Chrome on the Nexus 7 sometimes displays a part of the same page as 14px;
Unfortunately, I have been unable to recreate the issue in jsfiddle, so I'm not sure what is going on.
Some if the styles I use to influence the font-family and font-size can been seen at my attempt to recreate the issue at http://jsfiddle.net/K9hyG/2/.
When using the Chrome debugger, I can see the following in the Computed Style for one of the offending paragraphs:
border-collapse: separate;
color: rgb(51,51,51);
display: block;
font-family: Optima, Lucia, 'MgOpen Cosmetica', 'Lucida Sans Unicode', sans-serif;
font-size: 14px;
font[size="2"] - 13px default.aspx:427
body - 13px default.aspx:2
height: 36px;
text-align: left;
text-shadow: rgb(255,255,255) 0px 1px 0px;
width: 877px;
The text-shadow is generated by my usage of jQuery Mobile. In the Chrome debugger, two instances of the text-shadow directive appear. One inherited from div.ui-page.ui-body-c.ui-page-active (ui-body-c is the activating component) and the other from body.ui-mobile-viewport.ui-overlay-c, (ui-overlay-c is the activating component), but both definitions from the same section of CSS in the theme file.
If I deactivate one of them, the offending paragraph actually changes to 13px in Chrome Debugger, but still looks the same on the device. If they are both deactivated in Chrome Debugger, then it goes back to 14px. This still happens, even if the text-shadow set to rgb(255,255,255) 0px 0px 0px.
I've seen this post, but that issue is largely unresolved as well.
A colleague of mine has discovered the answer. It looks like I am the unwitting victim of Font Boosting
As per the link, Font Boosting can be disabled by providing max-height: 1000000px on the element in question or on body, body * for all elements.
Your problem is likely due to Chrome's text scaling setting, which sets text at a particular scale for accessibility reasons. A lot of users use this who struggle to read small text on their mobile. You cannot fix this and shouldn't try to resolve it, especially with sites that support mobile devices.
I recommend you either ignore it or modify your CSS so that it supports slightly differing text sizes.
After some tests this rule helped me out. Must be added either to the element containing boosted text or it's parent depending on the div/table structure.
element or parent element {
/* prevent font boosting on mobile devices */
width: 100%;
height: auto;
min-height: 1px;
max-height: 999999px;
}
Maybe the width and heigth values must be corrected according your needs.