I have inherited some flexbox code that's been running fine in iOS using Cordova. We're now trying to deploy to Android, supporting KitKat and above.
I have some flexbox code that works fine in Android 4.4.4, 5.X, and 6.X but fails in 4.4.2. I have an HTC One Mini running 4.4.2 and have tried it on a couple of other 4.4.2 machines with the Amazon Device Farm. I've read that there are some known problems with flexbox in 4.4.2 but no solutions are proposed.
When I run this code on 4.4.2, nothing shows up in the swiper-container. On other versions (and iOS), I get a picture and can then swipe through to see other pictures.
Any thoughts would be greatly appreciated!
Jon
Here is my flexbox css:
.swiper-slide {
margin: auto;
text-align: center;
font-size: 18px;
/* Center slide text vertically */
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
}
#swiperPic1 {
background-image:url(../assets/screen-1.png);
background-size: 100% 100%;
background-repeat: no-repeat;
}
#swiperPic2 {
background-image:url(../assets/screen-2.png);
background-size: 100% 100%;
background-repeat: no-repeat;
}
#swiperPic3 {
background-image:url(../assets/screen-3.png);
background-size: 100% 100%;
background-repeat: no-repeat;
}
#swiperPic4 {
background-image:url(../assets/screen-4.png);
background-size: 100% 100%;
background-repeat: no-repeat;
}
Related
I have an issue with mobile views on iphones. On android devices everything works fine. I also tried to set the specific width and height for iphone xr but it still doesn't work.
I have tested my website in google mobile friendly test and everything was ok.
This is my code that works perfectly for android devices with max-width 700px:
body {
background-image: url('/wp-content/uploads/2020/08/ass-1.png');
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
background-size: cover;
}
#media screen and (max-width: 700px) {
body {
background-image: url('/wp-content/uploads/2020/08/mobiledevicelogo2.png');
background-position: fixed;
background-repeat: no-repeat;
background-size: cover;
}
iPhone XR having resolution max-width:414px
More info : https://www.emailonacid.com/blog/article/email-development/emailology_media_queries_demystified_min-width_and_max-width/
#media screen and (min-width: 414px) {
body {
background-image: url('/wp-content/uploads/2020/08/mobiledevicelogo2.png');
background-position: fixed;
background-repeat: no-repeat;
background-size: cover;
}
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.
/* CSS Dokument */
body{
background-image: url('baggrund.jpg') !important;
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
background-color: #464646;
}
#media only screen and (max-width: 767px) {
body{
background-image: url('baggrund.jpg') !important;
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
background-color: #464646;
}
}
I have added the above code to my CSS document and with the help from bootstrap my website will be responsive.
But the funny thing is, that my responsive works fine on iPhone, but not on Samsung (Tried on S3/S5 mini).
I'm really glad for this simple solution, so I would like to keep it this way.
Mobiletest.me doesn't show a correct screen. It's otherwise when you are doing it physically.
My website is: http://odsgaardklausen.dk/DBS/DBS.php
I solved the problem myself by adding to the CSS :
html {min-height:100%;}
this would be my 1st question here which tells am new at programming.
I have a background image which just isn't getting scaled after using 'background-size :cover' or background-size: 100% 100%;
This problem only seems to occur only on android devices
Min- width and min-height doesn't work and I have encountered several ppl with similar problems but their solutions have not helped
This is my css
body {
background-image: url("../img/bck-img.png");
background-color: transparent !important;
background-position: center center;
background-size: 100% 100%;
-webkit-background-size: 100% 100%;
-moz-background-size: 100% 100%;
-o-background-size:100% 100%;
background-attachment:fixed ;
background-repeat:no-repeat;
/*
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size:cover;
background-attachment:fixed ;
*/
background-repeat:no-repeat;
min-height:100%;
width:100%;
}
html{ /*height:100%;*/ min-height:100%; width: 100%;}
#nav1 {
width: 100%;
height:35%;
margin: 0 0 0 0;
position:fixed;
left:0px;
top:0px;}
The comments are different trial and error soultions
Thanks
I have set a fixed background image on my website and it looks fine on desktops and all browsers on desktop but on android phones it tiles and repeats it. I cannot find a work around this. Here is the code.. If someone has a fix for keeping a background image fixed without repeating on android Chrome please let me know.. thanks. Please exclude any comments that will not help.
the CSS:
html, body {
height: 100%;
margin: 0;
overflow-x: hidden;
overflow-y: auto;
padding: 0;
width: 100%;
background-image: url("images/320htmlbackground.png");
background-attachment: fixed;
}
also tried this but didn't work.........
html {
background: url("images/320htmlbackground.png") no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Try this:
html, body {
height: 100%;
margin: 0;
overflow-x: hidden;
overflow-y: auto;
padding: 0;
width: 100%;
background-image: url("images/320htmlbackground.png");
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
}
I just had a similar problem but I'm not sure if it's the same one or not. My problem was that the background image wasn't staying in the same place as you would expect from a fixed image. I.e. when I scrolled up and down the background image moved with the page.
It turned out that I had set the background on the body tag. It worked fine on all browsers except on my phone. I changed the background to be on the html tag and it stays where it should without moving as I scroll.
For me this works well:
body{
position: relative;
background-position: center top;
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
#media screen and (max-width: 767px) {
height: 100%;
overflow-y: auto;
}
}