Wow, I built this site many years ago and it has all but served me years of enjoyment; but today I am perplexed as to why it shifts in my view port on my new phone when I try to go landscape rotate. It’s years of development and a legacy site I don’t desire to rebuild anytime soon. Would any body be willing to give me some helpful advice, I know I have given my fair share. Here’s the links its showing up in:
Tell me what you need to know, and I will see if I can offer the details.
Can you tell me what you mean by that above sentence?
Where does your viewport shift to?
Maybe a screenshot of the problem on your phone would clarify the problem 
Did it look ok on your old phone? It looks how I would expect on my iphone5 in portrait & landscape.
You don’t have any mobile optimisation in place, or viewport meta tag so the display a mobile gets will ‘probably’ be a scaled down version of a 980px width site (least that’s the way it used to be handled). Indeed on any normal browser less than 930px the page is awkward as the content is cut off.
Yeah the problem is the background image support a grey banner for icons to line up in and then a wide strip of space for the movie port to line up in. On my phone the entire nav bar and following content shifts down and to the right making gaps in alignment with the back ground image. It’s straight forward HTML4 CSS3. I just don’t know why on my new phone that styling somehow doesn’t line up. I think I recognize your sign on from around 2004-05 when I transitioned to CSS from tables. You have had a steady course for many years here. I am grateful for your years of service. Do you know of any rendering problems with new phones? Mean while I will work on a capture of the screen.
The Black box is suppose to line up within middle strip.
The entire nav tray and following box are all shift down and to the right…
Yes I’ve been here since about 2002 (They won’t let me out)
Which phone do you have. I can only test on IOS unfortunately.
I assume the page is fine in portrait mode then.
I don’t have a real answer other than you could try the following various things to see if they make a difference (remember to clear your cache between tests as mobiles love to hold on to previous versions).
The first thing you can try is to tell the mobile the width of your viewport using the viewport meta tag. I would not usually recommend this as that’s not the way we code these days.
Usually you would add this viewport meta tag in the head of your page :
<meta name="viewport" content="width=device-width, initial-scale=1">
The above tag tells the browser that you are controlling the layout to fit the device using media queries so it won’t scale the page.
Therefore try using your page width as the device width to ensure that the device zooms from the correct dimensions.
<meta name="viewport" content="width=998, initial-scale=1">
I have no idea if that will work as I have never tried that before because these days (and for quite a few years now) we all use the proper viewport tag and use media queries to optimise for mobile.
If you are on an ios device you might want to add this css which stops the text-size being adjusted on rotation.
body{
-webkit-text-size-adjust: 100%;/* stop ios zooming text on orientation change */
text-size-adjust: 100%;
}
It may also be helpful to tidy up your measurements so that they make sense.
For example your leftSideArea is 762 px wide but your #links which are inside that area are 725px wide with a left margin of 150px, That makes the element 725 + 150 = 875px wide. 875 will not fit inside 762 and therefore a browser could be tripped up with this and push things around in error.
Make sure all your measurements add up. You have done the same thing with heights where you have a larger height child inside a smaller one.
I would also suggest setting the actual iframe element to display:block as inline frames can sit on the baseline and may have gaps above and below.
If all that fails then I suggest that you make a separate test page with minimum elements present and then add element one by one until you see when it breaks. If I had your phone then that’s what I would be doing as it seems the issue is likely only seen on the actual device as emulators don’t show this behaviour.
Let me know if any of that makes a difference.
If not then I would suggest re-designing for mobile properly as mobile usage outstrips desktop many fold these days. The site looks quite small and could be converted relatively easy as long as you know what you are doing
Well I like your idea of trouble shooting the layout from zero up. So its a faux column design that has had no problem in any device, so I haven’t hastened to rebuild. Plus my website is pretty deep with content. So rebuilding would be a big task. So I have hoped for legacy provisions.
I added the meta description of the scaling components. I tidied the error on the nav container measurements. Then tested. Still breaks.
So I stripped the “LeftSideArea” internal descending items and just got down to the faux column with no nav items. It seem to be having a problem rendering the faux columns properly. In portrait it lines up, but then land scape the left column bloats and throws off the right column from the back ground wall paper.
I appreciate your patience. My skills admit to unconventional methods; but they have worked till now.
My question weighs at: can we diagnose the faux column problem and save a deep redesign of a legacy system or is the question asking too much to remember those days of design? It may be a simple fix.
When I add the nav items, there seems to be even a 50 pixel shift from the intended position on even on portrait. So something about my phone does not like the faux column idea.
It appears that my phone is scaling the right and left column in both landscape and portrait when I have initial-scale=0 or 1
It seems to be ignoring the meta info.
There are still 2 overstated dimensions here that we need to clear up. Can you add this css after all the original css. keep it separate rather than integrate it as you can easily delete it later if not needed.
/* testing */
#contentContainer{
float:none;
width:auto;
}
#iFrameArea{width:auto;}
Can you tell me if this page is broken on your phone.?
Also what phone have you got and what is its resolution just in case its a specific width problem?
Just going offline now but I’ll be back tomorrow afternoon to see what else I can find
Yeah the page is broken like before and cannot be zoomed into focus.
My device is an Android 8.1.0. How do you tell the resolution? I have checked my system settings and there is no details.
Try the viewport meta tag again but use this version.
<meta name="viewport" content="width=998">
Put it high in the head of the page. Clear cache to make sure it’s updated.
Can you send me a screenshot of what this page looks like on your phone in landscape.
I’ve marked some areas out with colours so I can see what’s shifting more easily and where its shifted to.
I have also added a couple of flex rules to replace the fauxcolumn floats to see if that rectifies the problem (you’ll know if its ok if it looks the same as the desktop version).
Let me know your results and I will investigate further.
You can also try adding this rule to your page just to see if there’s any immediate effect.
#fauxColumns{
display:flex;
}
(I used to have an android emulator on my old PC but I’m on a mac these days and no longer freelance so haven’t bothered keeping all my old tools).
Above is how it looks in landscape and portrait. It will not scale at all.
nadda enchalada
It aint got the suga.