My website looks tiny when previewed in browser

How can I fix???

Copy & paste this code into a new, blank document. SaveAs test.html & preview in browsers. This page is 90% width so it resizes to viewport.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>HTML5 with CSS 2-Col Layout</title>
<meta name="viewport" content="width=device-width, initial-scale=1">


<style>
/**CSS Reset**/
    padding: 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
img {
    max-width: 100%;
    vertical-align: baseline;
/**Layout**/
body {
    padding: 0;
    width: 90%; /**adjust width in px or % as desired**/
    margin: 0 auto; /**this is centered**/
    background: #CFF;
    color: #505050;
    font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif;
    font-size: 100%;
    box-shadow: 2px 2px 4px #333;
header {
    margin: 0;
    padding: 0 1%;
    width: 100%;
    background: #B00202;
    color: #FFF;
/**top menu**/
nav {
    background: #69C;
    font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 14px;
    font-weight: bold
nav ul {
    margin: 0;
    padding: 0;
nav li {
    list-style: none;
    display: inline-block;
    margin: 0 3% 0 5%;
/**menu link styles**/
nav li a {
    color: #FFF;
    text-decoration: none;
    line-height: 2.5em;
    padding: 6px;
    border: 1px solid #CCC;
/**on select or mouseover**/
nav li a:hover, nav li a:active, nav li a:focus {
    background: #CCC;
    color: #505050;
#wrapper {
    background: #CCC;
    overflow: hidden; /**float contaiment**/
/**main content**/
article {
    padding: 0 2%;
    background: #FFF;
    float: left;
    width: 70%;
figure {
    width: 80%;
    margin: 4% auto 4% auto;
    text-align: center;
/**right sidebar**/
aside {
    padding: 0 2%;
    float: left;
    width: 30%;
footer {
    clear: both;
    background: #B00202;
    color: #FFF;
    text-align: center;
    margin: 0;
/**typography**/
header h1, header h2 {
    display: inline;
    color: #F5DD83;
    padding: 0 1%;
h3 {
    color: #2294AE;
    margin-bottom: 0
p { margin: 0 0 1em 0 }
figcaption {
    text-align: center;
    font-style: oblique;
    font-size: small;
    color: #2294AE;
</style>
</head>
<body>

<header>
<h1>Sitename</h1>
<h2>| Responsive CSS Layout</h2>
</header>

<nav>
<ul>
<li><a href="#">Menu Item1</a></li>
<li><a href="#">Menu Item1</a></li>
<li><a href="#">Menu Item1</a></li>
<li><a href="#">Menu Item1</a></li>
<li><a href="#">Menu Item1</a></li>
</ul>
</nav>
<div id="wrapper">

<article>
<h3>Article</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vitae libero lacus, vel hendrerit nisi! Maecenas quis velit nisl, volutpat viverra felis. Vestibulum luctus mauris sed sem dapibus luctus. Pellentesque aliquet aliquet ligula, et sagittis justo auctor varius. Quisque varius scelerisque nunc eget rhoncus. Aenean tristique enim ut ante dignissim. </p>
<figure> <img src="http://placehold.it/500x325" alt="placeholder">
<figcaption>Figure 1 Caption</figcaption>
</figure>
<figure> <img src="http://placehold.it/500x325" alt="placeholder">
<figcaption>Figure 2 Caption</figcaption>
</figure>
</article>

<aside>
<h3>Aside</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vitae libero lacus, vel hendrerit nisi! Maecenas quis velit nisl, volutpat viverra felis. Vestibulum luctus mauris sed sem dapibus luctus. </p>
<hr>
<p>Pellentesque aliquet aliquet ligula, et sagittis justo auctor varius. Quisque varius scelerisque nunc eget rhoncus. Aenean tristique enim ut ante dignissim. </p>
<hr>
<p>Pellentesque aliquet aliquet ligula, et sagittis justo auctor varius. Quisque varius scelerisque nunc eget rhoncus. Aenean tristique enim ut ante dignissim. </p>
</aside>
</div>

<footer>
<small>© 2014 Your Site Name. All rights reserved</small>
</footer>
</body>
</html>

Similar Messages

Looks different when previewing in browser. Help?

<!DOCTYPE
html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html
xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8" />
<title>Untitled
Document</title>
<style type="text/css">

</style></head>
<body>
<div
class="container">
<div class="header"><img
src="Templates/warranty_sticker_2004.jpg" width="902" height="302" /></div>

<div class="sidebar1">
    <ul
class="nav">
      <li><img src="links/home.jpg" width="181"
height="44" /></li>
      <li><img
src="links/ultraaircare.jpg" width="181" height="44" /></li>
<li><img src="links/pricing.jpg" width="181" height="44"
/></li>
      <li><img src="links/allergiesandasthma.jpg"
width="181" height="44" /></li>
      <li></li>
<img src="links/contact us.jpg" width="181" height="44" />
</ul>
    <p> </p>
<p> </p>
    <p> </p>
<p> </p>
    
</div>

<div
class="content">
    <h1>Instructions</h1>
    <p>Be
aware that the CSS frfjfyukuhjiklui9liol;ko;i90or these layouts is heavily
commented. If you do most of your work in Design view, have a peek at the code
to get tips on working with the CSS for the liquid layouts. You can remove these
comments before you launch your site. To learn more about the techniques used in
these CSS Layouts, read this article at Adobe's Developer Center - <a
href="http://www.adobe.com/go/adc_css_layouts">http://www.adobe.com/go/adc_css_layouts</a>.</p>
<h2> </h2>
    <p> </p>
<p> </p>
    <p> </p>

</div>

<div
class="footer">
    <p>Copyright UltraAircare
      
    </p>
</div>
</div>
</body>
</html>
So I just started a website for a project that I have to do. So far everything has been going well. Everything shows up perfect in liveview in Dreamweaver CS5, but now that I'm previewing it in internet explorer, this is how it shows up. Help anyone? Any ideas?

Link please.
Bob

When previewed in browser or on the server the path of my web site repeats folders. However the "href" in the html code does not show the repetition in the path.

If someone could help me on this one, this would be great. I am creating a web site that has several departments. I have categorized and saved each department in a main folder called "departments" and a subfolder for each one. In the Dreamweaver code view the pop-up menu links seem to show up properly, but when I preview in browser or upload to server "page not found" comes up because for some reason the address changes. Some parts of the address seem to be appearing twice, sometimes the entire path will appear twice as shown below:
http://www.graphicmechanic.com/DEKALBCOUNTY/departments/parks-and-recreation/departments/p arks-and-recreation/pr-arabiamtn-map.html
that is incorrect and it takes me to "web page cannot be found".
It is obviously repeating the folders (hence the "departments/parks-and-recreation" twice. The correct link is:
http://www.graphicmechanic.com/DEKALBCOUNTY/departments/parks-and-recreation/pr-arabiamtn- map.html
The link issues are happening in the pop-up menu. For example if you go to http://www.graphicmechanic.com/DEKALBCOUNTY/departments/parks-and-recreation/pr-arabiamtn. html and rollover the link called "Arabia Mountain" in the links to the left side of the page, then click the pop-up menu link entitled "Arabia Mountain Map" that's where the problem occurs.
Can anyone tell me how I can fix this problem. I don't know what I should do with the code since it already appears correct in html view.
Please help if you can...
Thanks in advance for any possible help you can provide...

XonoBoom wrote:
It is obviously repeating the folders (hence the "departments/parks-and-recreation" twice. The correct link is:
http://www.graphicmechanic.com/DEKALBCOUNTY/departments/parks-and-recreation/pr- arabiamtn-map.html
The link issues are happening in the pop-up menu.
This problem usually happens when the menu is either a server-side include or a library item using links relative to the document. When you reference a page at a different level of the folder hierarchy, the document-relative links no longer point to the correct destination.
Change the links in the menu to be relative to the site root.
A document-relative link usually looks like this:
<a href="../products/index.html">Products</a>
A link relative to the site root begins with a forward slash like this:
<a href="/products/index.html">Products</a>

CSS styles disappear when previewed in browser.

I created a web site following the Getting Started tutorials in Dreamweaver CS6. However, when I preview in the browser, the main page shows properly but if i click a link, the other pages do not seem to attach to the style sheet - BUT the style sheet reference is present in the code. Any ideas?
thanks

You are close to correct, but not quite there.
If you have enabled the use of temporary files in PREFERENCES > Preview in browser, when you preview a page from DW, you will actually create a temporary page from the current one and it's that temporary page that is displayed in the browser. Why create a temporary page to preview? Well, if your page's code contains any root relative links (as opposed to document relative links) then those will not work if the page is previewed directly. When a temp file is built, those links in the actual page are converted to document relative links in the temp file, and this temp file is then handed to the browser to preview.
Why don't root relative links work in a preview? When the browser sees a link like '<link href="/path_to_file.css"', it interprets the "/" as meaning the root of the HARD DRIVE, not the root of the site (browsers know nothing about DW sites), and will not find the linked file at that location (for example, C:/DW_path_to_file.css"). When those links are rewritten in the temp file being previewed as '<link href="path_to_file.css"', it works fine since the browser knows that means to look for the *.css file in the same folder as the file it is previewing.
Make sense? By the way, this is how DW has *always* worked.

Without changing anything: Live view looks fine, but "preview in browser" does not

I haven't made any changes to our website in months. When I opened my index page, I did not change anything yet, but did a "preview in browser" and my whole slideshow is missing! It's still fine on the live website, as I haven't uploaded anything. Help.... why is it doing this? I need to add a small icon to our homepage, but I don't want to upload this page if it's not going to work!
www.epaaudio.com

On your page, these links are ALL root relative -
<script language="JavaScript">
// Advanced Random Images Start
// Copyright 2001-2006 All rights reserved, by Paul Davis - www.kaosweaver.com
var j,d="",l="",m="",p="",q="",z="",KW_ARI= new Array()
// KW_rs[5000]
KW_ARI[KW_ARI.length]='/Gallery_images/slideshow/auditorium.jpg';
KW_ARI[KW_ARI.length]='/Gallery_images/slideshow/arena.jpg';
KW_ARI[KW_ARI.length]='/Gallery_images/slideshow/classroom.jpg';
KW_ARI[KW_ARI.length]='/Gallery_images/slideshow/conference.jpg';
KW_ARI[KW_ARI.length]='/Gallery_images/slideshow/conference2.jpg';
KW_ARI[KW_ARI.length]='/Gallery_images/slideshow/courtrm.jpg';
j=parseInt(Math.random()*KW_ARI.length);
j=(isNaN(j))?0:j;
document.write("<img name='randomSlideShow' src='"+KW_ARI[j]+"'>");
function rndSlideShow(t,l) { // Random Slideshow by Kaosweaver
x=document.randomSlideShow; j=l; while (l==j) {
j=parseInt(Math.random()*KW_ARI.length); j=(isNaN(j))?0:j; }
x.src=KW_ARI[j]; setTimeout("rndSlideShow("+t+","+j+")",t);
rndSlideShow(5000,0)
// Advanced Random Images End
And, being embedded in JavaScript, they will not be found to be 'adjusted' by DW, even when using temporary files to preview. I'm afraid you will have to just lump the fact that they are not displaying in preview mode.

Site won't display correctly when 'Published' to Business Catalyst but does when 'Preview' in browse

Basically I have a subscription to Muse and with that the ability to host one site with Business Catalyst. When checking the first site I designed I'd use 'Preview in Browser' and the site occasionaly displayed incorrectly, so I changed my habits to publishing the work-in-progress site to the BC url with this current site.
Unfortunately there are multiple display problems with doing this; the two images below show the difference between 'Publish' to the BC domain and 'Preview site in browser'.
I've cleared the cache of the browser multiple times and used both Firefox and Safari and the problem still remains. I'm assuming it's a problem with Business Catalyst?
Does anyone have a solution for this? Has data become corrupted in BC, and if so is there a way of 'flushing' the data held on the BC site clean to start from scratch?
Would really appreciate some help here as it's impossible to show my client the current state of the site
Thanks in advance
Phil
http://httpwiles06businesscatalystcom.businesscatalyst.com/clients.html

Hi Phil
I checked the site and i can see all the images in page.
Can you try to check with a different browser or if possible on a different system or device ?
Thanks,
Sanjit

Automatic updating when preview in browser

Hi, could anyone tell me how to get DWCS3 to prompt me to save changes to a page when I go to preview in a browser? It always used to, but now it goes direct to the preview and I have to save changes manually. What did I do?
Jazzygeofft

Under Edit >Preferences > Preview in Browser, if you uncheck the option for: Preview using temporary file
you will be asked to save before you can preview in the browser of your choice.
Nadia
Adobe® Community Expert : Dreamweaver
Unique CSS Templates |Tutorials |SEO Articles
http://www.DreamweaverResources.com
Book: Ultimate CSS Reference
http://www.sitepoint.com/launch/005dfd4/3/133
http://twitter.com/nadiap

Spinning Beachball when Preview in Browser is selected

I've spent several hours looking at the threads for slow
Dreamweaver, and have yet to find anything that works for me.
Whenever I choose, Preview in Browser, I get a spinning beachball,
and the page finally loads after 30-60 seconds.
I'm using an Intel Mac on a localhost server. Everything was
OK until recently. Now it's just too time consuming to wait to see
previews. Any original thoughts from the forum or anyone at
Adobe?

"don_langevin" <[email protected]> wrote in
message
news:g64lec$2vi$[email protected]..
> I've spent several hours looking at the threads for slow
Dreamweaver, and
> have
> yet to find anything that works for me. Whenever I
choose, Preview in
> Browser,
> I get a spinning beachball, and the page finally loads
after 30-60
> seconds.
> I'm using an Intel Mac on a localhost server. Everything
was OK until
> recently. Now it's just too time consuming to wait to
see previews. Any
> original thoughts from the forum or anyone at Adobe?
I'm sorry that I don't know the solution to what you
describe. But I wanted
to mention that I have barely, if at all, used the Preview
feature in the
past year or two (and many web sites built).
Dreamweaver's Design View is pretty accurate in the later
versions, so I
tend to use it to get a general idea of the layout I'm
producing, uploading
the files to the server to check them in real browsers.
Patty Ayers | www.WebDevBiz.com
Free Articles on the Business of Web Development
Web Design Contract, Estimate Request Form, Estimate
Worksheet

Why can't Chrome find the webpage when Previewing in Browser?

Hi -
This is thoroughly bizarre to me.
I can preview any site I'm working on using any browser I have except Chrome (current version 33.0.1750.152).
As an example - when I use Preview in Browser - Chrome says "the webpage is not found" - the path to the page is:
file://external-drive/_PROJECTS/CLIENT/_files-from-client/_SITE-031614/index.html
My next step is to manually navigate to the page using Chrome's File/Open. This works perfectly but when the page appears the path is different:
file:///Volumes/external-drive/_PROJECTS/CLIENT/_files-from-client/_SITE-031614/index.html
This second path is the same path in the Manage Sites/Site/Local Site Folder line. All other browsers (FFox, Safari, Opera) use this second path. But for some reason Chrome has shortened the path to an incorrect address. Weird!
I don't think this is related to Mavericks because it was happening before that upgrade.
Has anyone else had this happen? Can anyone explain how I can fix this?
TIA your insight.
JL2
BTW - other details:
Dreamweaver version 12 (CS6), Mac OS X 10.9.2.

Stanko07 wrote:
Hi jl200,
I have the same problem since few weeks, and I am absolutely sure that jdaco answer isn't correct. All my files are on a desktop (iMac hard drive) all times and Dreamweaver has a problem with a preview in the Chrome browser. Few weeks ago everything was OK, so there isn't a problem with the files location. I think the problem has started after the last Dreamweaver update. Unfortunately I don't have any idea what to do to resolve this issue.
You're right, the answer provided might be part of the problem but it's not the solution to the whole problem. My files are located on the computer too and Chrome will not preview them, sometimes, most of the time.
I can't be asked to find out exactly why so I use Firefox or Safari.

Error when previewing in Browser

I am using Captivate 8. My projects work as they should, but when I try to Preview in Browser, for some reason Captivate is triggering Microsoft Word to open. I am totally stumped on this and could really use some input.

Check the file associations on your computer. It sounds like you may have MS Word set up as the default app to open HTM files.

In FF4, why does my website looks different when www is omitted

''locking as a duplicate - https://support.mozilla.com/en-US/questions/814715''
My site looks different when I use www in the address and when I omit www. Look at http://www.dynapipe.co.uk and http://dynapipe.co.uk.
This doesn't happen with FF3 or IE7, 8 or 9 or Google Chrome, only FF4

Oops, responded to a duplicate of your post over here: https://support.mozilla.com/en-US/questions/814715

Menu Widget: Text disappears when previewed in browser ?

Hi All,
I've created a site and have a top level page, with a sub-page.
The site uses the Menu widget in Muse to create a menu with dropdowns for the sub-pages. However, when I preview the site in the browser, the state on the menu for the top-level page 'Normal and 'Active' functions disspears.
It does re-appear on rollover, so the browser knows it's there, but it isn't being displayed.
Any idea why?
And how I can fix this?
(Ive attached screenshots of the page within Muse and then the same page once previewed within the browser)
As always, soloutions and replies most apprieciated!
Browser preview
Browser preview on rollover function
Cheers!
Robbie.

Hi Robsta,
Looking at your 1st posted image, above, I would say (recommend) that the 2nd blue guide, from the top (the header guide), should be moved down and put just below your menu ... do this on the 'master page' ... thats the header guide line ... everything 'below' that line is page content (a menu is not page content) hence content changes throughout your website ... everything 'above' that line is your header information and stays in the same place regardless which page you are on and is shown on ALL pages ...
Now, if that doesn't fix the problem (the blue guide that needs moving, should be moved nevertheless) ... is it possible that some of the 'active' states in your menu have got messed up when you were changing your button colours? ... this would only happen if you were editing the menu with the 'Edit Together', 'unticked' ... I can see that the active state is set to grey already hence just asking ... also, sometimes if the 'header' guide is not where it should be, it does hide things below it as it doesn't know what should be shown or not ...so it's just a thought ... ...
cheers,
GemBro

Page looks different in Preview and Browser

I am using the Acordion Widget on the left hand side of my page and have inserted video from a third party to the right side.
When I click "PREVIEW", I see the page displayed as in the top image. When I click "PREVIEW PAGE IN BROWSER", it shows up as in the bottom image, which, by the way, is the way I designed it to look. Is there a reason for this discrepancy and which should I trust more? I'm not ready to publish yet, so how can I check it in a real world environment?
I'm losing the top and bottom "bookend" images around the Acordion Widget as well as the bottom button. And the video window and text are skewed off to the right.
Please help.
Louis

Abhishek,
Here is the code for the vimeo embed, plus some lines of code preceding it. This extra code contins the info for the graphic which is missing in the "PREVIEW" window.
<p>With a combined 40+ years of experience, the team of voice actors at L2Images has lent their talents to live and recorded radio and television productions around the country. With male and female voices in a variety of dialects and accents, we can bring your copy to life.</p>
        </div>
       </div>
      </li>
     </ul>
     <div class="colelem" id="u4226">
      <img id="u4226_img" src="images/filmstripbottom.gif" alt="" width="286" height="165"/>
     </div>
    </div>
    <div class="clearfix grpelem" id="pu538">
     <div class="colelem" id="u538">
      <iframe src="http://player.vimeo.com/video/41079915?title=0&byline=0&portrait=0&color=cebb2 f" width="500" height="281" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
</div>
     <div class="clearfix colelem" id="u92-7">
      <p><span id="u92">L2Images provides the finest in commercial photography and videography at affordable rates. </span></p>
      <p> </p>
      <p><span id="u92-4">Contact us for your corporate videos, commercial production and image spots. We also specialize in legal video work.</span></p>
     </div>
    </div>
   </div>
I hope this helps.
Louis

Frames getting hide when preview in browser - how them stay?

All work in Dreamviewer is fine, until preview the homepage in borwser------ all frames are moving how they like when I´m moving the window size....
How I can keep them right size?
K.

You are using % widths for your layout which means it will look different depending of the size of each users monitor. Although this is probably the better way to go these days, it is not one size fits all and will work more effectively if you include min and max widths, and also media queries that change your layout depending on the monitor size. This is more advanced coding and will take time if you want to do that. Alternatively, you could design using pixel widths and have it look consistent across all desktop browsers and throw a few media queries in for the mobile side.
Responsive Web Design
http://coding.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/#more-7 5660
More on Media Queries
http://mobile.smashingmagazine.com/2010/07/19/how-to-use-css3-media-queries-to-create-a-mo bile-version-of-your-website/

Animation stops in the middle when preview in browser

I have run into a problem where the animation stops in the middle when I preview it in browser, but it is fine when I play it in the program. Please advise how to fix this problem. Thank you very much.
Ramon

I've had this problem with a purchased song but never a ripped song. I think its an encoding problem with iTunes. One poster suggested converting the song, which kind of tells us that its something to do with the encoding. I can't remember the song that this happened with, some Tom Petty tune. But I do remember this, which is strange, this happened on my Touch but not the iPhone with same song.

My website looks tiny when previewed in browser

Similar Messages

Maybe you are looking for