Dreamweaver Preview looks different than Live Site

[westonu91753563]

Hello,

I'm having trouble figuring out why my website looks different live than it does it the Dreamweaver browser preview. It almost seems like the live website is ignoring my styles.css, even though I've gone in and manually reuploaded that file.

You can view my live website here at: westonuram.com

It seems like all of my images ignore my style.css, or more specifically when I define @media (max-width:400px){

Is there a way I can zip my root folder of the website? Then you could see it in Dreamweaver and see how the images are responsive.

Thanks for any help you can give!!

[BenPleysier · Accepted solution]

Nearly 20MB of image??? 5400px x 5304px scaled down to 696px x 684px. This is bound to present problems all the way through from mobile to large screens.

[Nancy OShea]

#1 I optimize my images in Photoshop before I insert them into Dreamweaver documents. 

Fle > Export > Export As > Format:  JPG. 

To further reduce file size, I adjust the quality slider to around 20%.  My goal is to keep thumbnail images under 100 KB and full size images under 300 KB if possible.    Smaller file size = faster loading web pages.

#2 when things don't render correctly, check your code and fix reported errors.

Showing results for http://westonuram.com/ - Nu Html Checker

You may skip the Bootstrap.css, pay attention to problems in style.css

W3C CSS Validator results for http://westonuram.com/ (CSS level 3)

#3 When used correctly, Bootstrap can handle almost everything you need.   I urge you to do some Bootstrap tutorials to learn how to use it effectively.  It will save you time and help you avoid unnecessary extra coding.

Bootstrap 3 Tutorial

[gabriel26025376g5x0]

Because Dreamweaver does not (at least the versions I've used) use the exact same set of rendering engines and has to deal with user typing/editing the page directly which involves rendering carets, removing elements quickly, rendering complex content as fast as possible and balance performance where hardware acceleration isn't guarenteed to exist (yet). The specifications for html and its many related technologies has always been quite enourmous. For example, there are versions of the specification and each version has its own set of rules on how pages should be rendered. Each specification is expected to be backwards compatible, to a certain degree. New standards are proposed all the time and because browser software wants to get the jump on their competition, they may start supporting new features even before they are standardized.  Also, many rules are open to interpretation unless looked up specifically in the standard. For example the 'default' or 'initial' property values can be very enigmatic. Even worse is when you start playing with unit suffixes like "vmin" or "%" which has been in argument for some time.  Then we throw in CSS, SASS, WebGL, SVG and all those things have their own specifications. And lets not forget that CSS in the last 10 years has had major renovations on its specification, adding stuff like media, tranforms, blending, and effects to the mix (sorry bad pun).  It is not that the different engines are flawed, they just sometimes don't "agree". The best thing to do is be as specific as possible whenever specifying units and locations and make sure you livetest in a browser as you develop your pages. I tend to just not use the internal viewer at all and just use the browser since that is where people will be looking at my page.

My best pages usually end up being written in text and relying on WYSIWYQ, if I am being honest.  But that only works for small pages -- some stuff has to be done on the larger scale. It really depends on what you are using it for.  You might even consider just going to a website development platform if it gets out of hand and you don't like the hassle. Then just use DW for the fine tuning of that. 

Note that image size shouldn't be that big of an issue as long as you check your provider to make sure you aren't going past the limit, and consider thumnailing large images to save users pageload time. In this way they can click on the images to get the large one if they want to. Also, you can use @media to check, and make multiple resolutions though this should be done automatically so long as configuration is correct.

[Nancy OShea]

Why are you resurrecting this very old topic that was asked and correctly answered in 2018? 😕  I'm sure the OP is long gone by now.