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;
}
Related
This is how my website looks like in an iOS browser.
IOS view
But when my friend opens my website in an Android browser it looks horrible: Like this Picture
Please suggest some advice what to do with this kind of problem.
Here is my background code.
body {
background-image: url(images/contact.jpg);
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: 100% auto;
background-color:#245528;
}
/* For mobile devices */
#media only screen and (max-width: 767px) {
body {
background-image: url(images/background-photo-mobile-devices.jpg);
background-size: cover;
}
}
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;
}
/* 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%;}
I build a html website showing on my mobile device, while there's no problem showing image background on my Android device Galaxy S4 like this(The profile is showing!) , on the other hand, the profile background is not showing correctly like this . I had adjust the background-size so on, but all is vain. So this is my CSS code below:
#media only screen and (max-device-width: 640px) {
.hrader-part{
background: url(../images/bg_android.jpg);
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
background-size: cover;
padding-bottom: 2em;
width: 200px;
height: 300px
}
}
#media only screen and (max-device-width: 1080px) {
.hrader-part{
background: url(../images/bg_android.jpg);
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
background-size: cover;
padding-bottom: 2em;
width: 365px;
height: 100%
}
}
Thanks a lot buddies!
I do not have access to an iPhone, but I was able to reproduce your bug in Safari 7 on Mac OS X, using the iPhone user agent. The css from the media query was not being applied to the element. Changing max-device-width to max-width fixed the problem.
Also regarding your media queries: The max-device-width: 1080px query overrides themax-device-width: 640px query, since it comes later in the stylesheet. If you add a min-width attribute to the second media query, it will allow both queries to function:
#media only screen and (min-width: 641px) and (max-width: 1080px)
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;
}
}