I have created a website for a client that works on all web browsers as I intended except for Android. For reasons unknown the Android browser resizes my Menu bar as well as the part depending which phone it is running on.
If you would like to see the code please go to this link
This is a screen shot from the Galaxy Nexus
screen shot from Galaxy Nexus
As you can see the text has been pushed into a tall thin column. I have no idea why it is doing this.
Any help would be much appreciated.
Delete everything in the #AboutUs From the #AboutUs in Style.Css line 445.
Before
#AboutUs
{
height: 655px;
}
After
#AboutUs
{
}
As for the footer, remove the width from its css (#legal) (Line 693 in Style.CSS)
Before
#legal
{
position: relative;
font-size: 10px;
margin: 0px auto;
width: 130px;
padding: 0px;
line-height: 1.1em;
text-align: center;
color: #606060;
top: 5px;
}
After
#legal
{
position: relative;
font-size: 10px;
margin: 0px auto;
padding: 0px;
line-height: 1.1em;
text-align: center;
color: #606060;
top: 5px;
}
Related
I am building an app using Ionic Framework. While I was working on an app, I faced the problem.
When I tested on browser(using Chrome) and Galaxy Note5, everything was fine. However, when I tested the same app on Galaxy Note3, it gave me undesired result.
display: flex with align-items:center should align span inside ion-row vertically middle. But it only works in browser such as Chrome (I only tested on Chrome) and Galaxy Note5, not on Galaxy Note3.
What is the cause of the problem? How could I solve this problem? Any suggestion or advice would be appreciated.
Thank you in advance.
Html
<ion-row (click)="(!this.driver_docs.Insurance ? takePicture('Insurance') : (!this.driver_docs.Insurance.Examination ? view(this.driver_docs.Insurance.ori_info, 'Insurance', 'False') : view(this.driver_docs.Insurance.ori_info, 'Insurance', 'True')))">
<img class="management-icon" src="assets/images/mypage/insurance.png" />
<span class="title">Insurance Managment</span>
</ion-row>
CSS
ion-row {
position: relative;
height: 57px;
display: flex;
align-items: center;
border-bottom: 1px solid #E3E3E3;
}
.title {
position: absolute;
left: 43px;
font-size: 15px;
font-weight: 400;
color: #545556;
}
Used flexbox with prefixes
ion-row {
position: relative;
height: 57px;
display: -webkit-box;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-moz-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
border-bottom: 1px solid #E3E3E3;
.title {
position: absolute;
left: 43px;
font-size: 15px;
font-weight: 400;
color: #545556;
}
}
It may be a mobile responsiveness issue, galaxy note 5 resolution is 1140x2560 , while galaxy note 3 is 1080x1920 ..you can try to add #media styles to these resolutions to solve the issue.
On desktop it works but on Android as if taking the position: absolute or nothing or I don't know.
This is my code:
#only_900{
display: block !important;
position: fixed;
bottom: 73px !important;
z-index: 999;
width: 100%;
left: 0;
--backface-visibility: hidden !important;
--webkit-transform: translateZ(0);
}
#grid1wrap{
--webkit-backface-visibility: hidden !important;
--backface-visibility: hidden !important;
display: block !important;
position: fixed;
bottom: 73px !important;
z-index: 999;
width: 100%;
left: 0;
--webkit-transform: translateZ(0);
}
I'm pretty sure that this problem is because of the way the various browsers interpret the code. I think that new browsers only make the html as big as the content inside, therefor the HTML and body are not reaching the bottom. Try adding the following CSS code.
html,
body {
height: 100%;
}
I have a section of text created via the following Jade (an HTML templating engine):
header
div(class="header-logo") Order Of The Mouse:
div(class="header-phase") Phase 1.7 --
div(class="header-title") Operation Silk Scarf
This is styled using the following CSS:
header {
background-color: #78B82A;
color: #FFF;
text-shadow: 2px 2px 2px #000000;
text-align: center;
height: 115px;
}
.header-logo {
font: 1.5em Arial, sans-serif;
float: left;
position: relative;
display: inline;
margin-left: 1%;
margin-top: 7px;
}
.header-phase {
font: 12px Arial, sans-serif;
position: relative;
display: inline;
}
.header-title {
font: 3.4em Arial, sans-serif;
position: relative;
float: right;
top: 10px;
left: 12px;
}
(I know the CSS needs tidying up a bit, it was written in a hurry last night while quite tired).
My question is this: why does the left margin not scale for mobile devices? It seems to scale ok on my laptop in different browsers and when the window is resized, but when I access with my android device (again I've tried two different browsers) the div text is way over to the right of the screen, instead of slightly indented from the left, as I would have expected.
I can include screen-shots on mobile and non-mobile devices if necessary.
Also, it used to and should look like this:
Now the code above displays as follows in a non-mobile browser (and similarly in a mobile browser):
Which is no good at all.
When the Jade is converted to HTML it currently looks like this:
<header><div class="header-logo">Order Of The Mouse: </div><div class="header-phase">Phase 1.7 --</div><div class="header-title">Operation Silk Scarf</div></header>
Ok, I looked over it again with fresh eyes and it looks as if this was the solution to the resizing issue:
header {
background-color: #78B82A;
color: #FFF;
text-shadow: 2px 2px 2px #000000;
height: 115px;
}
.header-logo {
font: 1.5em Arial, sans-serif;
float: left;
position: relative;
display: inline;
margin-left: 1%;
margin-top: 7px;
}
.header-phase {
font: 14px Arial, sans-serif;
position: relative;
display: inline;
left: 6px;
top: 10px;
}
.header-title {
font: 3.4em Arial, sans-serif;
position: relative;
top: 12px;
left: 80px;
}
Lord alone knows how it managed to look right last night with the code I had but somehow it did. Strange times.
I've this small issue, I've created an HTML5 website with ASP.NET where the header is fixed, but on iPad and iPhone it scroll really slow so I had to use this small code in my CSS:
-webkit-overflow-scrolling: touch;
-webkit-transform: translateZ(0);
The scroll issue is gone but the fixed header doesn't work anymore on apple products. But on Windows and Android it works like a charm.
Also I had an autoplay video that plays when its visible and now it doesn't work anymore on any device.
My code:
<style>
body, html, form {
width: 100%;
height: 100%;
min-height: 100%;
overflow-x: hidden;
-webkit-transform: translateZ(0);
}
#wr {
width: 100%;
height: 100%;
-webkit-overflow-scrolling: touch;
}
#header .fixed-menu {
position: fixed;
width: 100%;
z-index: 100;
}
#header .menu {
float: right;
font-family: 'Oswald', sans-serif;
font-size: 14px;
}
</style>
Please help (and sorry for my bad English)
I have the following HTML markup:
<div class="news_detail">
<span class="newspaper_icon"></span>
<span class="small_story_newspaper">Sky News</span>
</div>
and the following CSS applied:
.news_detail {
width: 33%;
float: right;
margin: 5px 0px;
text-align: center;
}
.newspaper_icon {
width: 17px;
height: 17px;
float: right;
margin: 0px 5px;
background: url("images/Mobile/hdpi.png") no-repeat scroll 0px -342px / 215px auto transparent;
display: inline-block;
}
.small_story_newspaper {
float: right;
font-size: 12px;
color: rgb(41, 169, 224);
}
It works perfect on all but android devices with Kitkat.
Any ideas?
I know that on Kitkat the WebView is using chromium now. Does chromium has issues with <span> that I need to know?
My guess would be that inline-block is not supported on mentioned device. Try display block with float. Also kitkat is only running on 1% of android devices, so I wouldnt bother