• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

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

Community Beginner ,
Jan 19, 2023 Jan 19, 2023

Copy link to clipboard

Copied

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!


TOPICS
Code , Interface , Performance , Preview

Views

236

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
community guidelines
Community Expert ,
Jan 19, 2023 Jan 19, 2023

Copy link to clipboard

Copied

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.

image.png

 

Hope that helps.

 

 

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Votes

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
community guidelines
Community Beginner ,
Jan 20, 2023 Jan 20, 2023

Copy link to clipboard

Copied

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.

Votes

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
community guidelines
Community Expert ,
Jan 20, 2023 Jan 20, 2023

Copy link to clipboard

Copied

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 O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Votes

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
community guidelines
Community Expert ,
Jan 20, 2023 Jan 20, 2023

Copy link to clipboard

Copied

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.

 

image.png

 

Hope that helps.

 

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Votes

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
community guidelines
Community Beginner ,
Jan 20, 2023 Jan 20, 2023

Copy link to clipboard

Copied

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!

Votes

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
community guidelines
Community Expert ,
Jan 20, 2023 Jan 20, 2023

Copy link to clipboard

Copied

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.

 

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Votes

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
community guidelines
Community Beginner ,
Jan 20, 2023 Jan 20, 2023

Copy link to clipboard

Copied

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

CutchCossette_0-1674254485251.png

 

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

CutchCossette_1-1674254584587.png

 

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.

 



 

Votes

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
community guidelines
Community Expert ,
Jan 20, 2023 Jan 20, 2023

Copy link to clipboard

Copied

That looks like a graphics re-write problem. 

 

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Votes

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
community guidelines
Community Beginner ,
Jan 20, 2023 Jan 20, 2023

Copy link to clipboard

Copied

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.

Votes

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
community guidelines
Community Expert ,
Jan 20, 2023 Jan 20, 2023

Copy link to clipboard

Copied

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 O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Votes

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
community guidelines
Community Expert ,
Jan 20, 2023 Jan 20, 2023

Copy link to clipboard

Copied

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.

 

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Votes

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
community guidelines
Community Expert ,
Jan 20, 2023 Jan 20, 2023

Copy link to clipboard

Copied

LATEST

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/

 

Wappler, the only real Dreamweaver alternative.

Votes

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
community guidelines