Just confused - I have this css rule on my table making the table stack on mobile. Seems to work fine in Chrome and android.
But on the apple devices it is not stacking and I cannot work out why, If anyone has any idea why could you please let me know.
#media handheld, only screen and (max-width: 480px){table td {
display: block!important;
clear: both;
width: 100%!important;}}
Figured out it was the .doctype
Related
The problem is happening on Chrome/Android and possibly Chrome on other mobile devices. I have only been able to test it on a Nexus 5x so far. I am using Handlebars.js to dynamically display quotes inside paragraph tags. Whenever the displayed quote is less than three lines, the font-size shrinks. I am having a difficult time debugging this font sizing issue because it only seems to be happening on Chrome for Mobile. The issue does not replicate in Chrome dev tools responsive mode. The font resizing does not happen in IOS Safari or Firefox Mobile.
If you have Chrome on a mobile device would you please have a run through of the game and see if you notice the issue? LINK HERE
Here are two pictures side-by-side that illustrate the problem. Font in left picture is bigger than font in right picture:
Here is the code for that section of the site (link to repository):
#game-screen {
margin-top: 2%;
#media (max-width: 550px) {
margin-top: 4%;
}
#game-quotes {
width: 90%;
margin: 0 auto;
#media (max-width: 550px) {
width: 95%;
}
p {
font-size: 3.6rem;
#media (max-width: 750px) {
font-size: 2.4rem;
}
#media (max-width: 550px) {
font-size: 1.4rem;
}
}
}
}
<div id="game-screen">
<div id="game-pictures">
</div>
<div id="game-quotes">
<h6 class="center">Quote {{counter}}/10</h6>
<p>"{{content}}"</p>
</div>
</div>
Does anyone have an idea of what might be causing this font-resizing?
Thanks in advance if you can offer any help.
Link to Repository
Edit: Thanks to all of you who helped me!
For cross compatibility for my web pages I tend to use the following:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
This seems to work with no additional styling with CSS needed for the mobile platforms. Not sure if it what you want though.
Can you check if your Chrome font size is at 100% in settings on your phone? Chrome for Android has an option to render font at a different value. You can find this option in: Menu -> Settings -> Accessibility. I did a mistake like this some weeks ago and I want to be sure that is not the case here. Sorry if I'm out of the line here.
I also found that for some unknown reason sometimes Chrome for Android set this font setting wrong at installation time. I could not replicate this behavior but I got one phone, of a relative, with this so it might be possible that you are not aware of the fact that this setting is not set at 100%.
i added a * after your paragraph selector to selects all the paragraph's. maybe this will solve your problem. please tell me if it worked, i wanna know the outcome :)
#game-screen {
margin-top: 2%;
#media (max-width: 550px) {
margin-top: 4%;
}
#game-quotes {
width: 90%;
margin: 0 auto;
#media (max-width: 550px) {
width: 95%;
}
p *{
font-size: 3.6rem;
#media (max-width: 750px) {
font-size: 2.4rem;
}
#media (max-width: 550px) {
font-size: 1.4rem;
}
}
}
}
I'm not sure if this is the answer to your question but I find this consistent for CSS:
body {
/** Setting the 'font-size' property of the <body> to 62.5%
* allows you to use the 'em' measurement as you would in 'px' form.
* ...hope that's clear.
*/
font-size: 62.5%;
}
#someDivInBody {
font-size: 1.65em; /* or '16.5px' by CSS */
}
This method has allows me to use the em measurement as I would in px but with more consistency and control.
The rem unit is unlike px or em.
When you resize the window, using rem will keep the ratio of the text and the window size the same.
Try using em or px to resolve the issue :)
This may be because of the resolution of the phone or tablet. It may be best to customize your webpage to stay the same size, no matter the device.
try using max-width:Resolution;
You will have to apply this to the body class for this to apply to everything.
I.E.
`.body {`<br>
` max-width: 3840px;` /*4K resolution, for 4K displays*/
This SHOULD fix the text issue. If not, please refer to https://www.w3schools.com or https://developer.mozilla.org/en-US/. it may be able to help you.
I have experienced this same issue and it's very annoying. I filed a bug for Chrome (see details here: https://bugs.chromium.org/p/chromium/issues/detail?id=877833#c9) and they basically said it wasn't worth it to them to fix it. In my case, as suggested by #Cheesy, my android's accessiblity was set to larger than standard font size. That does not invalidate the issue, IMO. If large font size makes ALL font larger great. But it should not inconsistently be resizing font in some places on the page while ignoring others.
The only way to fix this for my React application was using this CSS rule:
* {
max-height: 999999px;
}
I have no idea why this works.
It was an extremely specific issue that I had with my Samsung Note 8 and nothing else worked.
I also tried different meta tags combinations and all possible text-size-adjust values, nothing worked but this.
Hopes this helps someone from diving into this rabbit hole that I just came out of.
For me, I had to include minimum-scale in the meta tag:
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1"/>
I've written a new post to my blog and the page looks fine in all browsers, except Chrome for Android 4.4.4 (KitKat). Update: didn't work for Android Marshmallow too.
The only different thing this particular post has is a scrollable table, styled on a custom stylesheet:
.article_body table {
width: 100%;
}
#media screen and (max-width: 479px) {
.article_body table {
width: auto;
display: block;
overflow: auto;
overflow-x: scroll;
white-space: nowrap;
border-collapse: collapse;
border-spacing: 0;
clear: both;
-webkit-overflow-scrolling:touch;
touch-action: auto;
-ms-touch-action: auto;
}
}
The table is scrollable in all browsers, except Chrome on Android. But the most important thing is that the post is showing a white block from some point on, until the end of the post, as shown on the screenshots below:
Beginning of the error
End of the error:
TESTS:
PC, Win 7 (IE 11, Chrome, Firefox) - OK
iPhone, iOS 9.3.1 (Chrome and Safari) - OK
Windows Phone (IE) - OK
Moto G - Mozilla Firefox - OK
Moto G - Google Chrome - failed (portrait only)
All the other posts within my blog are ok on all these browsers.
CSS test:
After some tests I've found out the error relies on display:block;.
If I change or remove this property, the white block disappears on Chrome, but the layout is awful in all other browsers.
What should I do to fix this?!
Blog post: http://blog.virtuacreative.com.br/upgrade-jekyll-2-to-3-gh-pages.html
Android version: Android 4.4.4; XT1032 Build/KXB21.14-L1.40
Chrome: 49.0.2623.105
I found the problem for the white area. It lies in the animate.css Change the following line;
<div class="header-color col-sm-9 col-sm-offset-3 animated fadeIn">
Into this:
<div class="header-color col-sm-9 col-sm-offset-3">
I suspect that the transition (fadein), which has a 2000px value in it, is the one causing the problem with the white space/cut off.
You can probably also multiply this value by 10 to solve this problem.
Well, thanks to #JoostS insights I managed to fix this annoying error myself with this #media query for Chrome only:
/* #media queries for Chrome 29+ only */
#media screen and (-webkit-min-device-pixel-ratio:0)
and (min-resolution:.001dpcm) and (max-width: 479px) {
.fadeIn {
display: initial;
margin-left: 5% !important;
}
article {
padding-left: 5%;
padding-right: 5%;
}
}
See https://gitlab.com/snippets/17238 for more Chrome media queries.
I have a problem with a web application. I have these CSS rules to make sure that if text is overflowing it will be shown with three dots. It works perfectly on all browsers that I have tested(desktop and mobile). One big except is android stock browser and more importantly only RTL mode (I have attached an image of the rendered output).
display: inline-block;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
The output should be Option 1, Option 2 and so on. There is enough space to fit this small text there but is cut off.
I have tried to use text-rendering: optimizeLegibility option and it helps in some cases but not all.
Does any one have any ideas what might be a solution for this problem?
Thank you for your time!
Hey I'm having a problem with a wordpress site I'm working and for some reason the logo doesn't margin to the left on the safari for the Ipad. The media query I added doesn't effect the logo change in portrait view. It works fine with android devices and all other devices except IPAD,Can someone please help here's the link to the site, Thanks really appreciate yet.
link: www.annesub17.com
here's the code
#media (max-width: 999px){
.logo {
margin-left: -17px;
}
}
I have a page that uses border-radius. It doesn't show up rounded in the native Android browser; it shows up with square corners. It shows up rounded in desktop Chrome, IE, FF, etc fine, but not in the native phone browser. Does anyone know if this is a problem with the browser itself, some additional CSS extension that I'm not using, etc?
Here's my CSS (in the demo):
.bigButton2
{
width: 320px; height: 200px; margin: auto;
padding: 20px;
background-color: #521c0b; color: #FFFFFF;
border: 3px solid #e3b21e;
border-radius: 30px;
-webkit-border-radius: 30px;
-moz-border-radius: 30px;
}
I've set up a JSFiddle: http://jsfiddle.net/VJvQA/
I have tried with padding, without padding, with box-sizing, without box-sizing, and it just shows up as sharp corners. Any help or insight would be appreciated.
I realize that someone posted this already under (border-radius style doesn't work in android browser), but he didn't provide any code, JSFiddle, and it was incorrectly answered with a general question without any real answer; I'd downvote it if I could, but I assumed prodviding an actual well-written question would be better. Thanks!
Turns out, this issue is specific to the Android browser on the Galaxy S4 and S4 Active. It looks like they've broke support for the condensed border-radius property, but if you specify each corner individually, it works fine. I'm posting a bug report to Android. So, if you do this:
border-top-left-radius: 10px;
border-top-right-radius: 10px;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
It works fine; if you just have border-radius: 10px; it gets ignored.
This was answered under this post:
Galaxy S4 stock browser CSS3 border-radius support?
I'm just repeating it here. But I did test their solution, and it is working fine now on the Galaxy S4 Active as well.
Unfortunately, some browsers just don't support certain HTML5 and CSS3 properties. My advice and the general advice you'll find on the web is design your site so that it functions and looks nice across all browsers, and then go back and add CSS3 and HTML5 elements as an extra.
This is a well designed and laid out table showing HTML5 and CSS3 support across browsers, it doesn't, however, show the support for mobile browsers.
This link, shows support for mobile devices.
EDIT 2019-11-07
With HTML5 and CSS3 widely supported across all modern browsers dating back several years, plus many JavaScript plugins designed to provide polyfills should you need to support much older browsers, this question and my original answer are both severely outdated.
On that note, it's pretty amazing how far we've come in just 5 or so years :)
New answer: HTML5 and CSS3 all the things!
I see this on another topic.
and to work on mobile just do this:
border-collapse: separate;
with border-radius (im also try border-radius separated)
border-top-left-radius: 20px;
border-top-right-radius: 20px;
border-bottom-left-radius: 20px;
border-bottom-right-radius: 20px;
border-collapse: separate;
Tell me if works. Cya
I think your code is not wrong, it can not display on tablet devices by do. background border should have to fix this error you should delete the lines
background-color: #521c0b;
color: #FFFFFF;
or deleting row
border: 3px solid red
I think this is not a bug and I've met a lot of work as above :)
p / s: sorry my english is not very good