Copy link to clipboard
Copied
re: www.ginazollman.com/pages-GinaZ/contact.html After adding server side form email script, this one page displays too wide on iPhone.
Its nothing to do with any scripts. What you have at the top of this page is the viewport meta tag:
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
That doesnt exist on any of your other pages.
Whats happening is your website is NOT responsive therefore mobile devices squeeze the page into their viewport width. If you declare a viewport meta tag, without the page being responsive, the browser tries to do something else, because its confused.
Hmmm, I don’t find “viewport” content..Anyhow, I plugged in the first 7 lines of code from another page. Now the page in question is functioning properly on my iPhone… Client will be happy…. I can relax. Thank you again.Stephen Perkins
By @stevep34633534
The viewport meta tag was in the first 7 lines of code at the top of your contact page. Now you have replaced those lines the page works the same as your other pages which don't include the viewport meta tag...........job done.
However the websit
...Copy link to clipboard
Copied
Its nothing to do with any scripts. What you have at the top of this page is the viewport meta tag:
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
That doesnt exist on any of your other pages.
Whats happening is your website is NOT responsive therefore mobile devices squeeze the page into their viewport width. If you declare a viewport meta tag, without the page being responsive, the browser tries to do something else, because its confused.
Copy link to clipboard
Copied
Copy link to clipboard
Copied
Hmmm, I don’t find “viewport” content..Anyhow, I plugged in the first 7 lines of code from another page. Now the page in question is functioning properly on my iPhone… Client will be happy…. I can relax. Thank you again.Stephen Perkins
By @stevep34633534
The viewport meta tag was in the first 7 lines of code at the top of your contact page. Now you have replaced those lines the page works the same as your other pages which don't include the viewport meta tag...........job done.
However the website isn't very mobile user freindly but the information can still be read and accessed on tablet devices so l guess it will do. Probably not usable on smart phones but who uses a smart phone to do any serious internet research...........probably quite a few but these days it's not something that overly concerns me that much.
Copy link to clipboard
Copied
Copy link to clipboard
Copied
Regarding: site isn’t very mobile phone friendly…..For future reference, what first ten lines of code is recommended for all devices
By @stevep34633534
Not really possible to say as developers set their code up very differently but for sure the doctype and viewport meta tag would be up there if you are developing a responsive website.
Copy link to clipboard
Copied
Copy link to clipboard
Copied
Thanks again. I’ll certainly take Bootstrap more seriously now.Sent from my iPhone
By @stevep34633534
That's why its not possible to say because if you use Bootstrap the links to that could well be in the first 10 lines of your code whereby those that don't use Bootstrap they won't be.........so every developer approaches building a website slightly differently.
Copy link to clipboard
Copied
Hmmm, I don’t find “viewport” content..Anyhow, I plugged in the first 7 lines of code from another page. Now the page in question is functioning properly on my iPhone… Client will be happy…. I can relax. Thank you again.Stephen Perkins
By @stevep34633534
How I miss the thumbs down button.
Copy link to clipboard
Copied
Now the page in question is functioning properly on my iPhone… Client will be happy…. I can relax. By @stevep34633534
===========
Until everything goes to hell-in-a-handbasket and you don't know why... 😞
X/HTML and table based-layouts haven't been used in a dozen or more years. Sadly, your site is showing it's age and random quick fixes are no solution for that.
Today's sites must perform well on ALL devices (iOS/Androids, tablets, laptops, hybrids, desktops and jumbotrons). You can't achieve this without proper planning & good design practices.
At a minimum, you should be using HTML5 document types and responsive CSS layouts. Below is a very basic example.
Hope that helps. Post back if you have any questions.
Copy link to clipboard
Copied
Use a Bootstrap mobile-first Starter Template in Dreamweaver.
File > New > Starter Templates > Bootstrap Templates. Choose a layout and hit CREATE button. See screenshot.
More about Bootstrap
https://www.w3schools.com/bootstrap4/