I have the following CSS in order to get an image on my page background, and a color around it.
#home{text-align:center;background:Red url('/Content/image.png') no-repeat fixed center;}
When I run it on my computer with any browser (I prefer Chrome), everything is fine. However, when I open the website on my phone (also using Chrome), I only see the background color, not the image. However, as soon as I remove the center part (background position), I can see it.
Any idea?
After some searching, I found that images wider than 1024px don't display on iDevices. I used a media query to change the background, like this:
#media all and (max-width:900px), (max-device-width:900px){
body{
background-image: url('smaller-image.gif');
}
}
Hope that helps someone.
I faced a same problem, then I applied background:url("../img/pic1.jpg") no-repeat center; its working you can try if you faced problem in ios.
Nowadays it doesn't really matter whether picture is wider than 1024px. The issue for me that caused not displaying background-image was: background-attachment: fixed;
In this case, just change this line to background-attachment: scroll; with #media query
[link removed] on iPhone, the top banner will not stretch all the way. Solution?
heres a screenshot: ![enter image description here][1]
Here's the CSS ive applied to the div:
#banner {
background-color: #F7F7F7;
background-size: cover;
box-shadow: 0 0 30px 2px #DCCFBF inset;
display: inline-block;
height: 200px;
width: 100%;
Issue 2. In chrome, when I resize the browser window, the bottom two nav icons shift (graphic design and social media). I put them in a container to try to keep them in place but it still happens... only on chrome. I realize the whole site shifts, but the other icons in the nav stop after a while and the bottoms one overlap them and it looks bad. Any suggestions?
The banner doesn't stretch all the way because your content is wider than what mobile Safari treats as the full width. It then scales down the whole page to fit the content and strands the header a bit.
see this answer to a similar question
It is usually fixed by adding
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
to the <head>
As for the icons, Chrome seems to be respecting the #media query value of width: 100% on #home (line 528 of main.css) as you shrink the browser window while Firefox does not, and retains the first value width: 1020px (l. 91)
I've got a div with a background image that includes both the normal and hover state, so when you mouse over, the bottom half of the background image is shown. I'm making a mobile version of the same site, and I'd like for only the first half of the image to be shown as the same div grows in height. However, as it is currently, when the div grows, I obviously see the second half of the background image. Any thoughts on how to hide the bottom half of the background image while still showing the top?
.community a{background: url(images/migtea.jpg) 0 0 no-repeat #FFF; display:block; float:left; margin:0 10px 10px 0; padding: 10px 10px 10px 151px;}
.community a:hover{background-position: 0 -131px;}
Well only problem is that "clip-path", "mask" and "filter" (no not the
IE "filter" but SVG "filter") only works for Firefox and Safari (yes
no Chrome). And they do it differently. Firefox needs an svg clippath
specified via an id eg:
.box { clip-path: url("roundedrect.svg#cp1"); }
while Safari just uses
the shape itself to create clippath from:
.box { clip-path: url("roundedrect.svg"); }
I have yet to discover a
way to do it in Opera and Chrome.
But for FF and Safari "cross browser" example i have created this:
http://tokimon.dk/testing/css-svg-test.html.
Otherwise maybe you can get something out of the background
manipulation in CSS 3: http://www.css3.info/preview/
Tokimon
(source: Showing only part of background image using CSS3)
Else, all you can do is either separate the background images, or put a container (div) with a solid background over it and "hide" the part you want to hide (but it's not a very elegant solution)!
Hope this helps!
I am creating a responsive website, and have just noticed a strange behaviour in my content pages when viewed on the iPhone. It scales correctly when loaded in portrait mode, and also when rotated to landscape. However, when rotating back to portrait the page seems to shift left, or not zoom correctly, and there is a strip of white space down the right-hand side. This white space also seems to be present on first loading in portrait as the user can swipe the page left
Rather than complicating the explanation any further, here's a link to a sample page where this behaviour is occurring. Have a look on an iPhone, then have a look at the home page which does not have this issue.
If you need to see anything further, just me know :)
Fixed it! The issue was coming from one particular div - to find it, it was a process of deleting the different elements until the issue went away.
To fix it I needed to add overflow-x: hidden to that div and it sorts it out! Hope this is useful to others with a similar issue.
I had the same problem, I fixed it by setting:
html, body { width:100%; overflow:hidden; }
This problem occurs when width of any division is greater than the width of iPAD's screen.
In my case, some divisions were having size of 1000px, so I just went for width:auto and it works. overflow-x:hidden also does the same thing, but is not a preferred way.
I don't have an iphone to test this on but I have come across something similar with websites I've created in the past. In my case its because there was a bug in safari mobile that messed with the scale when going from port to land.
The following code fixed it for me (can't remember where I got it from at the moment)
if (navigator.userAgent.match(/iPhone/i) || navigator.userAgent.match(/iPad/i)) {
var viewportmeta = document.querySelectorAll('meta[name="viewport"]')[0];
if (viewportmeta) {
viewportmeta.content = 'width=device-width, minimum-scale=1.0, maximum-scale=1.0';
document.body.addEventListener('gesturestart', function() {
viewportmeta.content = 'width=device-width, minimum-scale=0.25, maximum-scale=1.6';
}, false);
}
}
Using "overflow-x: hidden" solves part of the problem, but screws the scroll, acting with strange behaviors (as Jason said).
Sometimes, the hardest part is to discover what is causing the problem. In my case, after a few hours, if found that the problem was in Twitter's Bootstrap:
If you're using Twitter's Bootstrap with "control-group" zones for your forms, the problem could be there. In my case i solved the problem with:
.control-group .controls {
overflow-x: hidden
}
Now the white space on the right was gone :)
I'd like to add to Navneet Kumar's solution because it worked for me. Any div tag styled with width=100% cannot also have left or right padding. The mobile browsers (I noticed the problem on iPhone and Android devices) interpret the div as having a width greater than 100%, thereby creating the extra space on the right side. (I knew this regarding fixed widths, but not percentage widths.) Instead, use width=auto in conjunction with padding.
I know it's a while since this topic was opened but I came across a similar situation and found it was because I had an element with the following properties right: -999999px; position: absolute; hidden off screen.
Changing the above to left: -999999px; position: absolute; solved the same issue the OP had (white screen to the right and ability to swipe right).
I'm using Bootstrap 3.3. I tried all of these solutions, and nothing worked. Then, I changed my <div class="container"> to <div class="container-fluid"> in the section that I was having trouble with. This solved the problem.
I tried all what has been suggested here, nothing works. Then I've relized that it connect with scale of page. So then I added <meta name="viewport" content="width=device-width, initial-scale=1.0"> to header.php in my main theme's folder and it 's fixed problem.
Seems as though results are varying for different circumstances but a sitewide
html, body { width:100%; x-overflow:hidden; }
seems to have worked for me!
Fixed!
Had a similar problem. Fixed it by setting the width to a current device width.
body, html {
max-width: 100vw;
margin: 0 auto;
overflow-x: hidden;
}
SOLVED ¡¡
Since installing protostar joomla template 3.X and start adding content in the module K2 I noticed that annoying scroll with a blank space on the right side, visible especially in iphones.
A correct partial answer was gave for Eva Marie Rasmussen, adding to the body tag in the file template.css these values:
width: auto;
overflow-x: hidden;
But this solution is only partial.
Search div class or label that is causing this problem and once detected add to that class in the file templete.css the same values:
width: auto;
overflow-x: hidden;
In my case add to the class "span" these two lines to finally look like this:
[Class * = "span"] {
float: left;
min-height: 1px;
margin-left: 20px;
width: auto;
overflow-x: hidden;
And it´s working now¡¡
I have a page containing an empty div with a gradient in it, like this:
<div class="prodGradientArea"></div>
.prodGradientArea {
background: -moz-linear-gradient(center bottom , #ECEAE9 0%, #E4E3E2 50%) repeat scroll 0 0 transparent;
display: inline-block;
float: left;
height: 10px;
width: 420px;
}
This looks brilliant in FF, IE, Chrome and Safari ... on a computer. When checked in Safari on an iPad or iPhone, I get a tiny border around the div. This is removed if I write text in the box or if I zoom in a lot but not if I write a non-breaking white space. I have even tried putting in a transparent pixel with but it made no difference to the imaginary border. Also tried setting border=0 but this was of course not the problem (it is not a real border, just a visual "feature").
So the only thing that removes it is to add pure text. I guess I can add a dot and hide it with color or so but it would break my little heart to make such an ugly fix.
Please help!
Jenny
Insert in your index.php this code in the <head>-area to avoid artifacts from bad zoom interpretation of iOS:
<meta name="viewport" content="initial-scale=1, maximum-scale=1">
Then go to your css-file and insert a 1px negative margin, to avoid this. In my website this was the footer div:
.unten {
margin-top: -1px;
}
I hope this will help you, too!