My site on desktop looks great but on android no.
You can see the image
and my site URL is http://alkhayatt.com
I use bootstrap 3 and RTL and theme.
My code don't show any error and I don't know why that happen.
I did a lot of try but nothing work , so I change classes and make another div,
bootstrap 3 Arabic good style css .
Adding a 100% width to body should do the trick.
body {
width: 100%;
}
Related
In android application i am opening a web site.
In this website i am using rem as unit for width.
For html tag i have added font-size as 1px.
html{ font-size:1px !important; }
But if i see computed styles,i see font-size as 2.90909px
I have checked whether this css is getting overriden somewhere,but it is not.Attaching the screen-shot for the same.
Please let me know what is the issue and what can be workaround as i want html font size equal to 1px.
please see the highligted part,any known issue ?
You need to go deep, this should do it:
* { font-size: 1px !important; }
Using it on HTML tag will not affect some jQuery Mobile elements, like, for example, buttons.
Okay, so I am creating this mobile website where I am trying to change the font-size and color of some text. Now, I have tested my code on my PC, iOS and Android (using Chrome browser) and only on the Android there seems to be a problem. When using an imported CSS document some settings will not change, but if I type then in directly into the element using the "style" attribute everything works.
Font
The font-size seems to have different levels as when I type in:
font-size: 31px;
it gives me this:
Hello
However if I were to change it to:
font-size: 30px;
the font size will now be like this:
Hello
Color
Also, the color on Android never seems to change as the color is always black. I have tried changing it to both other dark and bright colors without any success (note the colors are changing on both my PC and on iOS).
Override
I am thinking that there might be some sort of snippet of code which would override these default settings. If anyone of you have found one when importing CSS to a PHP/HTML doc or have any other solution it would gladly be appreciated!
your style is overwritten by some other CSS class or css styling use:
font-size: 30px !important;
thereby your styling will be applied over all other stylings thereby overwriting all predefined stylings
I am completely at a loss here, and because I don't have an Android device, it's been very hard to figure out what's going on, and can't duplicate it in the simulator. For reasons unknown, Chrome on Android is having issues focusing form fields, and users are starting to complain. Everything works fine on other platforms - including Chrome on Windows/Mac/iOS.
The site having the problems is no longer broken, as the problem was resolved.
Any guidance would be hugely appreciated.
I did some testing locally and confirmed that my comment is correct. If you set the vimeo iframe to display: none; that will allow the form elements to be tapped on android / chrome. So you'll need to make three changes:
css update: set vimeo iframe to display: none
javascript update - where you normally set vimeo's iframe to visibility:visible, you'll also have to set display:block
javascript update - similar to above, where you set vimeo's iframe to visibility:hidden, you'll also have to set display: none
I believe that will solve the problem and have no negative side effects.
Vimeo iframe is taking the focus, hence the input fields are not clickable.
Set the width and padding-top to the modal containing Vimeo iframe only when the modal is selected.
Change following css selector :
.modal .modal-inner.modal-video {
width: 90% !important;
padding-top: 50.625%;
}
to
.modal .modal-state:checked+.modal-window .modal-inner.modal-video {
width: 90% !important;
padding-top: 50.625%;
}
That website is very laggy on my device, perhaps you should reconsider the design. Or make it simpler for tablets/phones.
Nevertheless I found that text fields that follow (including) "What are your three favourite movies?" can be focused properly, and it seems there's some view on top of the first text fields in this form.
Perhaps that can lead you in the right direction. Good luck!
I'm trying to set up a page that looks good in Chrome for Android as well as in desktop Chrome.
I've got it working well in desktop Chrome, as per this screen shot:
.
The two "Answer Choice" lines, including the red "X" buttons, are in a div (called answers). The green "+" button is in the layout after the answers div. I've applied display: inline-block to the answers div, and as you can see, it's working as expected.
However, when I try to do this in Chrome for Android, the inline-block style doesn't seem to be working properly:
I can confirm that the style is being applied (I can use the remote inspector). If I remove the style, the green "+" button moves up a few pixels, showing that it is doing something, just not what I want.
How can I force Chrome on Android to respect the inline-block style?
EDIT: Here's the CSS applicable to the div containing all the answer choices:
.answers {
display: inline-block;
margin-bottom: 5px
}
I had the same issue, and found the solution on another question about div's and inline-block style. It's because of the way white-space collapses in html. You need to change your html so that the first button's close tag has no space between the second button's open tag.
<button class="button1">1
</button><button class="button2">2
</button>
See inline-block elements are line breaking for seemingly no reason?
I've experienced inline-block behaving inconsistently on Android as well. While I haven't been able to track down exactly what's going on, in many cases you can get away with using display: inline, which renders consistently.
Of course, you cannot use margin on inline elements. To address the vertical positioning, you can use vertical-align: middle.
Try to add "!important" to the "display: inline-block;"-attribute. Then it should look like this:
display: inline-block !important;
Creating HTML emails, I have the following seemingly insoluble problem:
Gmail strips out any in the head. You have to use inline styles.
I want my design to be different on mobile (specifically Android) which I can do with a media query in the head
But inline styles over-ride anything in the head.
So how can I make a design, for instance, 600px wide in Gmail but 100% wide on Android?
You can try to embed an <style> tag for email clients that do not remove them and override the inline rules with !important. It would look something like this:
#media all {
width:100% !important;
}
Please let me know if it works...
Use this inline css: style='width:100%; max-width: 580px;'
Once the screen width drops below 580px, the layout becomes fluid.
You can change the values for whatever fits your needs. This way, you don't run into as many cross client issues. Gmail app doesn't support tags btw.