I have just finished my first website and I uploaded it to Github to test it with a couple different devices. I used html5, css3, a little bit of Javascript and a little bit of jQuery and I tried to make it 100% responsive.
So I checked with a smaller Desktop and the website was just as I intended it to be. I checked with an iPhone 4s and it was perfect, and the same thing happened with the iPhone 6s. However, when I tried it with my Samsung S3 mobile phone I saw that a couple sections of my website were not as I intended.
The main problem was with all linear-gradient's. For example:
background:linear-gradient(to right, #f2f2f2, #f7cf9f);
So instead of being gradient it shows no color at all ("transparent" I'm guessing...). And to clarify, this only happened on the android's default browser, if I opened the website with the Samsung S3 but using chrome everything was as intended.
So could anyone help me by telling me how I could fix this? Thank you very much in advance!
I used for my homepage :
background-image: -webkit-gradient(linear, 0% 0%, 100% 100%, color-stop(0, #3f95ea), color-stop(1, #0066FF));
background-image: -webkit-repeating-linear-gradient(top left, #3f95ea 0%, #0066FF 100%);
background-image: repeating-linear-gradient(to bottom right, #3f95ea 0%, #0066FF 100%);
background-image: -ms-repeating-linear-gradient(top left, #3f95ea 0%, #0066FF 100%);
Related
I am facing an interesting issue with my current project site. The background images used on HERO AREA , TESTIMONIAL AREA , CONTACT AREA loads perfect on PC. But those background images don't load / Appear on mobile devices.
I am unable to find out the cause behind this problem.
Here is the live link of my project: http://themebite.github.io/demo/effacy/
How can i load those background images on mobile as perfectly as they loads on PC.
Thanks in advance!
use the media queries to set CSS properties for example background-size: 100% 100%; This will solve your problem
.static-bg {
background: transparent url("../img/bg/hero-bg.jpg") no-repeat scroll center center / cover;
background-size: 100% 100%;
}
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!
I have read 10+ questions concerning this issue, yet no one solved it for me..
I have uploaded the app in a github publich repository, and there is the phone gap build link. I'm testing on PC-Browser (chrome) using "Ripple" simulator, it's working fine. But when I test on my phone (Samsung Note 3), it gives weird transitions other than slide!!
as much as I can tell, it fades then slides, which gives a horrible transition effect. =(...
Please Advice..
[UPDATE] Feel free to edit the repo (if possible)
I couldn't find any suitable solution for this issue but I have something like a hack to overcome it
upgrade your jQuery mobile to JQUERY MOBILE 1.4.0 RC1 or anything above, this will make your animations faster and smoother.
add those lines to your css main file:
/** To fix white flash between transitions**/
.ui-overlay-a {
background-image: url(../img/bg.png) !important;
background-repeat: repeat !important;
background-color: #182633 !important;
}
.ui-page {
-webkit-backface-visibility: hidden;
}
update ".ui-overlay-a" css with corrosponding backgorund color and image.
I'm developing a personal website, and I'm having some issues with Chrome on Android.
I have a background image covering up all the page, and it works fine in every browser I own (Chrome, Opera, Safari, Firefox) and on every mobile browser I own (Chrome on iOS, Safari on iOS, even default Android browser).
Here's the CSS for my body:
body {
width: 100%;
height: 100%;
background: url(../images/background.jpg) no-repeat center center fixed;
background-size: cover;
}
What happens on Chrome for Android is that the background covers only the available viewport (above the fold), while disappearing below the fold.
Here's a screenshot:
Could it be a problem with using body instead of the more classic wrapper #container div? I would really like to resolve this without having to clutter my markup; I'm confident it's something possible since it works in really most browsers.
Maybe it's a Chrome for Android bug?
As suggested in the comments, the problem was explicitly setting height: 100% on the body, which made it stick to the viewport height.
By removing that constraint, now the background extends to all the content.
Switching to min-height: 100% for body and html should give you the same affect.
Otherwise could you provide an example URL or code example of jsbin.com
I have an android app that has has this css for the body background:
html, body {
height:100%
margin: 0;
padding: 0;
color: white;
position: static;
text-align:left;
background: URL(images/aVia_Background_new.png) top center black;
background-repeat:no-repeat;
background-size: cover;
background-attachment:fixed !important;
}
When the page is long enough to be scrolled, the background will scroll right off the screen as the page is traversed downward. It acts as though the background-attachment property is set to scroll, but it certainly isn't. The background works properly when the website is viewed in Google Chrome on my desktop, but for some reason when it's translated to Android via Phonegap, it doesn't work properly. Is this a known issue with Phonegap? And does anyone know anything I could try to remedy this? Thanks to any responses. The more ideas the better.
yes.. the problem is with your `background-attachment:fixed;
As far as I know position:fixed is not working fine. I had the same issue while I was trying to do a fixed header/footer in my app. And used iScroll at last