[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)
Related
This is a website with the mobile view.
The website width is 640px but the iPhone renders the document in 678px. In android it look great.
I added viewport meta:
<meta name="viewport" content="width=640, user-scalable">
And the body CSS is:
body,html{
margin:0px;
margin-left:auto;
margin-right:auto;
padding:0px;
font-size:14px;
font-family: "Arial";
background: white;
direction: rtl;
text-align: right;
width:640px !important;
overflow: hidden;}
In iPhone it looks like this:
As you can see it adds 38 pixels on the left side, not related to the body (if I set the body background to blue the side still stays white).
I tried everything but with no luck.
Any ideas?
Firstly it would help to be starting with clean HTML and CSS—your HTML is far from valid, and that can cause all sorts of errors (see here just for the HTML errors...).
Secondly:
<meta name="viewport" content="width=640, user-scalable">
is incorrect. It needs to be:
<meta name="viewport" content="width=640, user-scalable=yes">
and it would be better practice if it was:
<meta name="viewport" content="width=device-width, user-scalable=yes">
(See here).
With a clean starting-point, it will be easier to debug. Also, turn on the Mobile Safari debug console and respond to any messages it gives you.
I finally found a solution.
These lines were added because of the right alignment on the body CSS:
text-align:right;
direction:rtl;
If I remove these lines and add them to a div inside the body it's working fine.
I am working on this wordpress blog http://www.taranmarlowjewelry.com/?page_id=7 (looks fine on a normal web broswer) I tried to edit the CSS so it looks good on an iphone...I added these lines in my iphone css file
.wrapper{
position:relative;
width:840px;
margin:0 auto;
}
.blog #page{
width:840px !important;
}
.blog #main{
width:840px !important;
}
.blog #primary {
width:220px !important;
}
.blog #content {
width: 220px !important;
}
.blog #secondary {
width:200px !important;
float:right !important;
}
but there is a massive space between the blog and the sidebar and the width of this page is too wide, while my home, about page look good with the .wrapper at a width of 840px;
What is going wrong here?
Have you tried using initial scale?
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
Add that in and adjust your CSS accordingly.
The correct way is to use a responsive theme, so you'd be including a base.css stylesheet for all frame-formats and then adding style sheets for each new frame-format. Something like:
http://yourdomain.com/library/css/style.css' type='text/css' media='(min-width:481px)' />
Then you can use functions within that stylesheet to apply more styles to larger frame-formats. Bones Theme (by themble) is a great place to start learning about responsive web design.
Failing that - Sean is right, start with the meta viewport settings and adjust from there. There's a great answer on iPad and iPhone screen sizes here iPad browser WIDTH & HEIGHT standard
Andy
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!
I recently have been working on a pilot mobile website for the company I work for. After performing a small alpha test, I came across several width issues for blackberries and iphones.
When you access my mobile site on a blackberry bold or an iphone, the width container is ending maybe 5-10% shy of the overall width of the view. On a blackberry curve, the container gets cut at maybe 50-60% of the overall width except for the speaker images on the homepage.
Here is the site:
http://www.iirusa.com/upload/wysiwyg/2011-P-Div/P1656/Mobile_web/home.html
I originally found this line of code to help resizing on an ipad, but have had no luck with blackberry/iphone specific issues.
<meta name="viewport" content="user-scalable=no, width=device-width" />
Just as a sidenote, I haven't experienced any width issues on any android devices.
Please help! And let me know if I can provide anymore information!
try this:
<meta name="viewport" content="width=device-width, maximum-scale=1">
EDIT:
After further review, it looks like the issue is with the style on .bottom - it has a width of 100%, but a padding of 10px, so it will be 20px larger than the screen.
I also noticed there's a white bar below your content on the page, I assume you don't want that. It's fixed in the .container style below.
Here's an easy fix for that. Just replace the following styles:
.bottom {
background:#2D3192;
width:100%;
}
.bottom p {
font-size:.70em;
color:#FFF;
font-family: "HelveticaNeue-Light", Helvetica, Arial, sans-serif;
font-weight:400;
padding: 10px;
}
.container {
width:100%;
padding-top: 10px;
background:url(http://www.iirusa.com/upload/wysiwyg/2011-P-Div/P1656/Mobile_web/P1656_mobileBG.jpg) repeat-x #FFF;
margin:0;
top:0;
}
I left the old blocks in so you'll be able to just swap them out with your current ones.
Oh, and you can also change your meta back to:
<meta name="viewport" content="user-scalable=no, width=device-width" />
Hope that helps!
Safari renders black lines in between divs on my website at some scales. It is particularly bad when it breaks apart an image that is chopped in two different divs for a button or something. I can't put a BG in the parent of the two divs because they are transparent .pngs. Any solution or just deal with it?
capture of the problem, http://i.stack.imgur.com/pTLki.png
TravisO also has the same problem, and I changed how the page was laid out, originally it was a simple table with 5 rows, I removed the rows and just went with images and br, still happens. I've tried to remove all padding and margins via CSS but it was pretty obvious the problem isn't the browser rendering, but with the resampling the browser does to convert the page into a size that fits on the screen. You can see my broken page at:
http://www.apinkdoor.com/show/
TravisO, you should get rid of the img styling in your css!
If you use only this:
<style type="text/css">
*
{
margin: 0px;
padding: 0px;
}
body
{
background-color: #f00;
text-align: center;
}
</style>
it should render properly on your iPhone!
This issue is a result of a rounding error produced in mobile safari when it rescales background images for display (it's a bug: http://openradar.appspot.com/8684766).
The solution is to increase the width of your right-button edge on its left side by 1 or 2px. Then adjust your CSS accordingly so the 1 or 2 pixels you added are not displayed by default.
The following CSS, added to the problematic div with a specified background-image, is what fixed it for me. Anything less than 3px would still show light artifacts at some Safari zoom levels.
margin-top: -3px; /* for Mobile Safari dark line artifact */
padding-top: 3px; /* for Mobile Safari dark line artifact */
I found changing the background colour of the element with the 'grey border' around it worked for me.
Adding an initial-scale value to the viewport metatag resolved this issue for me.
<meta name="viewport" content="initial-scale=1.0">
I had a similar problem when displaying a .png-image in a div-tag. A thin (1 px I think) black line was rendered on the side of the image. To fix it, I had to add the following CSS style: box-shadow: none;