Right Side of website being cut off only on Iphone

A word to the wise - Nancy's workflow is a Dreamweaver Creative Cloud workflow and will result in a Bootstrap (third party CSS framework) page that will be fine for someone with your presumed coding skills - until you need to customize a color or a structure. The Bootstrap starter pages are not at all like the old table layout view where you can easily manage a layout. Coding is required. Forewarned is forearmed. It might be better to take some time to learn how to code, in which case you will be able to duplicate one of the "starter" pages with about 3% of the code weight and complexity. You can also use extensions. Research the options and make an educated choice.

The above is a quote from a Bootstrap disbeliever and its contents are nothing further from the truth. The extensions that are mentioned only serve to line his own pockets while Bootstrap is free to use. See the correlation?

The same person has also given you a multi-choice question to answer, but the premise of the question is wrong. When using extensions, you are using someone else's code.

As far as I can see osgood_​ has given you a most helpful answer.

Like to add, there are several online exercises which include:

mobile devices, bootstrap, and responsive design.

Adobe Dreamweaver CC Classroom in a Book (2018 release) | Peachpit

Chapter, 13 thru 15

Cheers!

AndrewMichel1  wrote when you look at it on the computer in any browser it looks just as it should

Not for me it doesn't.   Try increasing text size and you'll see what happens.  As others have said, this  table based layout is never going to work on all devices.  Tables are a throw back to the 1990's when everyone used similar desktop monitors.  That approach won't work anymore.

Since you haven't answered Al's questions, I'll just show you how you can make a page that works in all devices using DW CC 2019.  If you don't have CC 2019 yet, you can download a free 7 day trial below.

Free Dreamweaver | Download Adobe Dreamweaver CC full version

Define a new site folder by going to Site > New Site and give your project a name.  Example, C:\MyTestSite.

You can define your server's FTP log-in credentials now or wait until  later.  It's your choice.

Once your site is defined, go to File > New > Starter Templates.  Pick one of the responsive starter templates and hit Create button.

When you save your newly created file, DW creates assets folders which can  be seen in your Files Panel (F8).

You now have a responsive starter site to work with.  Fee free to add your own content, images and other elements.  

Unfortunately your set up is not 'responsive'. You are using lots of specifically set widths in your css and your html:

#headercontent {

width: 1024px;
margin: 0 auto;
height: 125px;
}

#menucontent {

width: 1024px;
margin: 0 auto;
height: 75px;
}

#editablecontent {

width: 1024px;
margin: 0 auto;
height: 850px;
}

#editablecontent2 {
width: 1024px;
margin: 0 auto;
height: 0 auto;
}

#footercontent {

width: 1024px;
margin: 0 auto;
height: 200px;
text-align: center;
vertical-align: middle;
}

<table width="1025" height="128" border="0">

   <tr>

   <td width="275" align="center"><h3>SEARCH | MAP | ITINERAIRY</h3></td>

   <td width="461" align="center"><img src="images/South-Algonquin-Business-Assosciation-Logo-2.0.png" width="375" height="125" class="centercenter" /></td>

   <td width="275" align="center"><h3>PLAN & BOOK</h3></td>

   </tr>

   </table>

What you need to do is set your 'container' to have a - max-width: 1024px; - if you want to constrain the width on desktop.

#container {
max-width: 1024px;

margin: 0 auto;

}

Then remove all the specific width references from the other css selectors:

#headercontent {
height: 125px;
}

#menucontent {

height: 75px;
}

#editablecontent {
height: 850px;
}

#editablecontent2 {
height: 0 auto;
}

#footercontent {
height: 200px;
text-align: center;
vertical-align: middle;
}

(declaring a height isn't advisable either)

That might help!

However you have a bigger problem because the table layout can never fit the width of any mobile device as its not 'flexible' even if you change the widths to percentage as it will run out of real estate to fit into.

<table width="100%" height="128" border="0">

   <tr>

   <td width="33%" align="center"><h3>SEARCH | MAP | ITINERAIRY</h3></td>

   <td width="33%" align="center"><img src="images/South-Algonquin-Business-Assosciation-Logo-2.0.png" width="375" height="125" class="centercenter" /></td>

   <td width="33%" align="center"><h3>PLAN & BOOK</h3></td>

   </tr>

   </table>

The problem with splitting the navigation i.e., either side of the logo is it causes more problems than its worth when you get to mobile as you need to bring the navigation back together again or find a new position for it as mobile doesn't have room width wise to place content either side of the logo.

You might want to reconsider the layout to something more simple or use Flexbox, which can re-order the containers at mobile size.

Among other things, you are using a table. It's never going to properly display in a small device. Based on your page's DOCTYPE I'll assume you are using an older version of Dreamweaver, in which case, you need to make a choice:

1. Learn to code

2. Use an extension

3. Use someone else's code

Which direction would you like to take.

Browser says:

'Hmm. We’re having trouble finding that site.'

Are you sure you have provided the correct url?

Edit:

Strange the url is resolving now.