I've been struggling all day with the most random-feeling problem. On single posts/articles in my WordPress theme, the site loads fine on an iPad and then if you "spread" to zoom out, you get this weird margin/centering issue that is shown in the screenshot. Basically, the auto margins are ignored and the whole site is shifted off to the left.
I'm told this doesn't happen on any of the other pages (such as home or category archive pages), but since I don't actually own a device myself, I cannot test.
There was an improperly closed div in the but fixing that doesn't seem to have resolved the problem according to my tester. I also, already re-wrote the markup to more closely mimic that of the other non-problem pages, and removed any tricky absolutely positioning, so I'm pretty much out of ideas as to what else would be causing this.
Demo link
I just checked it on my iPad 3, and the page seems to be perfectly centered. Even after zooming.
Related
Morning all,
I need assistance with iPhone viewport issues. I have sifted through all kinds of posts, all from 8+ years ago. Some had a similar issue, some had the exact issue. Seems none actually found a fix.
I have developed a site and cannot for the life of me work out why only on iPhone the viewport is cutting off the left of the content. The site works as expected on android, macbook and desktop. I do not have access to an iPad. All completely responsive. When I say "cut-off" I mean you cannot scroll to the left at all.
I tested on an iPhone 8 and thought, ok, it is a bit old, probably just limited to older phones but alas, when I checked with friends on an iPhone X and 11 pro they both had the same issue. It is not an issue in landscape, only portrait.
Please see below screenshots:
Iphone issue where you can see that the content is shifted to the left
Galaxy S10 where you can see the content is centered as expected
As you can see from the above, it is like the phones are readying the viewport size correctly but they are shifting the content to the left. The banner at the top is set to width: 100%; and yet it does not stretch to the far right.
Also, bizarrely it seems that the nav is happily centered but all other content is not.
I am at a loss.
This must be a common issue with an easy fix that just isn't asked, I hope. I have built this using purely CSS and HTML so nothing fancy.
Entire code can be found here in my previously unanswered post which had a little less detail.
link to the site
For anyone in the future looking into this or a similar issue, it seems that iPhone's have challenges interpreting tags. This is not limited to Safari as I tested the code on Opera and firefox on an iPhone 8 and iPhone X and the same issue occured.
Not only did the CSS applied to the tag not take effect on the iPhone but it created some form of break in the page entirely.
tags are a little outdated as I understand however it added a nice aesthetic. Instead I created the same visual effect by entirely removing the tag and using bottom-border on the SVG.
I hope this helps someone in the future.
I am trying to make a responsive website, but I am stumbling upon a weird problem. When I am looking on the desktop page, everything is in the right position. There are no pixels left.
However, when I am loading the responsive version on my mobile, I see some pixels left (just scroll to the left or the right and you will see what I mean). The problem gets bigger when there is content like a single post or page.
The website is here: http://FavoriteFM.com.
I can provider the CSS code, but it will be a lot of lines. I am suspecting something in the content is 'sticking out'. But I am not sure of a tool that can see such problems.
Thanks,
Dennis
Today I have disabled every div by div. I figured out the problem is with the sidebar. I still had: 'left: 8px;' on. Removing it did the trick for me. So if you have this problem, check if something of your content is 'sticking' outside your wrapper. Even if you can't see it, it still can be there.
I currently have a WordPress theme online and appears to work fine but one of my clients noted that the blog page layout is broken in Google Chrome. The sidebar appears right underneath the page content. So I checked his website and my demo and it does indeed look broken. So I have spoken to another programmer and he says it's not broken and he uses the latest version of Chrome too. I have never encountered such an issue, it works for some but not for others.
EDIT: The issue has been fixed with thanks to Joseph Erickson.
Looks like it has to do with the width of the #sidebar. If you shrink it just a little bit, it'll fit properly.
Why is this happening? Who knows. These little pixel shifts with floats can be hard to track down. I would recommend not trying to fit everything so snug together and allow some wiggle room when putting two fixed-width floating elements inside the same element.
I've been working on a website for a little while now, doing most of my testing in Chrome, Firefox, and IE. As I'm wrapping things up, I've tried viewing it in Safari (on Mac, iPad, and iPhone). I've noticed that certain elements are misplaced in Safari. I've tried playing with the CSS, but I've had no luck.
The page can be viewed here - http://staging.princewebdesigns.com/gallais/
See specifically the logo (being pushed down into the banner), the font of the tagline in the banner (wrapping beyond the banner and extending too far to the left), the 'Featured Work' title wrapping, the project names wrapping, and the footer wrapping.
Here is how the page should look - http://staging.princewebdesigns.com/gallais/images/chrome.png
To see how it looks on my iPhone, change the link above to .../iphone.png
Any help is appreciated.
The issue is (I think) that you have your browser's text zoomed in.
I loaded the page in Safari 5.1 on Mac OS 10.7.3, and it loaded fine initially. When I zoomed normally, the layout stayed intact. As soon as I tried zooming just the text, the layout broke per your description.
That being said, you may want to think hard about how to make the layout more 'flexible' in the event a user does have their text size increased. In IE, for example, the default zoom is full page zoom, but a user can still increase their text size apart from zooming. It's worth testing your layout in those situations to make sure it doesn't completely derail. I'm not saying it has to be perfect, but still legible.
One idea is to try out different units. I've found that when declaring horizontal lengths (e.g. margin-left) using relative measurements works, but when declaring vertical lengths, (e.g. margin-top) using pixel measurements works better. For super critical items, like the site logo, positon:absolute may be a good route to try.
I'm working on building a website, and everything is pretty much done, but I'm running into issues that, from what I've read here, are a result of webkit in firefox and ie.
Here is one of the pages that is having problems:
http://prdesignstudio.com/Seattle.html
When you load it in Chrome or safari it works fine, the images are reflected at the bottom, and there are no images on a lower row. When you open it in Firefox or ie, on the other hand, there are no reflections, and the last image in the set is on a lower row. Another thing that's odd is that the problem doesn't occur on every page, and it also doesn't seem to be based on the number of images in the gallery. (The different pages can be found by clicking on portfolio)
Anyone know how to fix this? Also, if fixing it requires me to remove the webkit portions of the .css, does anyone know of something else I can do to get the reflections? They're not necessary, but I like them XD
All the page's code can be found here: http://jsfiddle.net/2DvSP/
Thanks in advance for any help.
As for the images appearing on a lower row and the occurance of this on not all but some pages, you have inline styles set
div calss="container" style="width: 2080px;"
If you increase the width, this problems does not happen in FF4.01 and IE9.