• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

Added email script to one page, it displays far too wide on iPhone.

Community Beginner ,
Feb 12, 2023 Feb 12, 2023

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. 

Views

663

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 2 Correct answers

LEGEND , Feb 12, 2023 Feb 12, 2023

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.

 

 

 

Votes

Translate

Translate
LEGEND , Feb 13, 2023 Feb 13, 2023
quote
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

...

Votes

Translate

Translate
LEGEND ,
Feb 12, 2023 Feb 12, 2023

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.

 

 

 

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Feb 13, 2023 Feb 13, 2023

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Feb 13, 2023 Feb 13, 2023

Copy link to clipboard

Copied

quote
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. 

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Feb 13, 2023 Feb 13, 2023

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?

Thanks again, you rock!

Steve

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Feb 13, 2023 Feb 13, 2023

Copy link to clipboard

Copied

quote
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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Feb 13, 2023 Feb 13, 2023

Copy link to clipboard

Copied

Thanks again. I’ll certainly take Bootstrap more seriously now.

Sent from my iPhone

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Feb 13, 2023 Feb 13, 2023

Copy link to clipboard

Copied

quote
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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Feb 13, 2023 Feb 13, 2023

Copy link to clipboard

Copied

quote
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. 

BenPleysier_0-1676312631180.gif

 

Wappler, the only real Dreamweaver alternative.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Feb 13, 2023 Feb 13, 2023

Copy link to clipboard

Copied

LATEST
quote
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.

 

Nancy O'Shea— Product User, Community Expert & Moderator

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Feb 12, 2023 Feb 12, 2023

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.

 

CC-StarterPage.jpg

 

More about Bootstrap

https://www.w3schools.com/bootstrap4/

 

Nancy O'Shea— Product User, Community Expert & Moderator

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines