Media query applied to design view upon open, even though frame is wider

[CutchCossette]

Hi there,

For some reason, when my team and I open our HTML email files in Dreamweaver, the design view loads as if the media query has been applied, even though the window it's loading into is much wider than the media query would apply to.

The media query is:
@media only screen and (max-width: 559px) {

The design view window is much wider than 559px, but when it loads it loads the deisgn view as if the media query is applied.

Adjusting the size of the window (the bar between code view and design view) even slightly, reloads the design view properly and fixes it.

Seems like a bug!

[Nancy OShea]

Media Queries should be used with LIVE view, not DESIGN view.  To toggle between them, use Ctrl + Shift + F11.

Adjust the target viewport size accordingly.  See screenshot.

Hope that helps.

[CutchCossette]

My issue is that design view first loads with the media query applied.

I'm not trying to see the media query. The viewport is wide enough that the media query should not be kicking in when the file first loads, but it does.

[Nancy OShea]

Design View is a throwback to a bygone era before CSS.  It's isn't accurate at rendering advanced CSS media queries and should not be relied on except for quick content editing. If you want accurate rendering, switch to LIVE view. Or better still, preview in your browsers.

[Nancy OShea]

Another option is to turn off Styles in Design View. 

Go to View > Design View Options > Style Rendering > untick the box beside  Display Styles.  See screenshot.  The result is unstyled text & layout without any media queries.  This only effects Design View and will not effect LiVE View or Preview in Browser.  Some people prefer it for editing.

Hope that helps.

[CutchCossette]

Thanks for your replies, Nancy.

I'm not concerned about Design View being an accurate rendering in general. My concern is when first opening a file, Design View initally loads as if the media query is applied, when it should not. The viewport is wide enough that DW should not be doing that. It's acting as if the viewport is narrow enough to trigger the media query, but it's not.

I'm not able to do quick edits in design view as you mentioned when it loads incorrectly in the first place. I have to move the bar seperating the code/design views to make design view load as it should (without media query applied) so that I can do the quick edits you described, or click find a spot in code.

It just seems like a DW bug to me that the viewport is wider than the media query of 559px, but the file opens with the media query applied to design view anyway. I wanted to log it so the Adobe team can address the issue in future versions.

Thanks!

[Nancy OShea]

It doesn't happen on my end so it's not a reproducible bug.

Try Restoring Preferences.

https://helpx.adobe.com/dreamweaver/kb/restore-preferences-dreamweaver.html

Validatate code and fix reported errors.

https://validator.w3.org/

https://jigsaw.w3.org/css-validator/

Even if it were a bug which I doubt, Dreamweaver is in minimal status mode.  No new features or bug fixes are planned for the future except security & compatibility patches.

[CutchCossette]

When I first open the file, it looks like this, media query applied, despite how wide the right side is:

As soon as I move the bar seperating code and design view even 1px, it fixes itself.

This is happening on multiple users computers, not just my own. I should also state it does not happen every time, just here and there, and more often when I open multiple files at once.

[Nancy OShea]

That looks like a graphics re-write problem. 

• Do your systems meet current Creative Cloud technical specifications?
  https://helpx.adobe.com/creative-cloud/system-requirements.html
  https://helpx.adobe.com/dreamweaver/system-requirements.html
• Have you recently updated graphics drivers from the video card manufacturer's website?

[CutchCossette]

Whether or not DW applies the media query is affected by hardware?

The reason the image is streched is because the media query does not specify an image height, while width is 100%, and there is a max-width inline on the image. So that's expected and not an issue, it renders fine outside of DW.

The tables going to 100% wide and font becoming smaller is applied by the media query as well.

My computer is Win10, 12th gen Intel i5-1235U (each core is 1.30 GHz) with 32GB of ram. Intel Iris XE Graphics set to 1920x1080px.

I appricate you responding and looking into this, but it sounds like we don't need to hash this out further. I was really just trying to do my part and report what I percived to be a bug.

[Nancy OShea]

All graphics rendering is handled by CPU, VRAM, GPU and graphics drivers. 

I understand, but Adobe isn't actively fixing bugs in Dreamweaver anymore. It is what it is.

[Nancy OShea]

If you care to share the code you're using, we can check it on our machines.  The best way to share your code is by posting a URL to the problem page online.

[BenPleysier]

It's even worse on my system with a 12th gen i7, 64GB of ram and Intel Iris Graphics set to 2560x1440px.

Unfortunatly, in its dying days, Dreamweaver has become a real WYSIWYG editor. What you see is what you get and there will be no future changes made. I think it is irresponsible of Adobe not to expressly warn its users, particularly new users, about this fact.  

Why not try one of the better email editors, like the ones mentioned in this article:

https://www.emailvendorselection.com/compare-email-editors-design-responsive-emails/