Highlighted

Dreamweaver Preview looks different than Live Site

New Here ,
Dec 05, 2018

Copy link to clipboard

Copied

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!!

Adobe Community Professional
Correct answer by BenPleysier | Adobe Community Professional

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.

Views

634

Likes

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

Dreamweaver Preview looks different than Live Site

New Here ,
Dec 05, 2018

Copy link to clipboard

Copied

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!!

Adobe Community Professional
Correct answer by BenPleysier | Adobe Community Professional

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.

Views

635

Likes

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
Dec 05, 2018 0
Adobe Community Professional ,
Dec 06, 2018

Copy link to clipboard

Copied

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.


Ben

Likes

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
Reply
Loading...
Dec 06, 2018 2
Adobe Community Professional ,
Dec 06, 2018

Copy link to clipboard

Copied

#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

Nancy O'Shea, ACP
Alt-Web.com

Likes

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
Reply
Loading...
Dec 06, 2018 1