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

Image Preview

Explorer ,
May 09, 2024 May 09, 2024

Copy link to clipboard

Copied

Dreamweaver doesn't update images correctly in the Preview pane above the html code., despite manually saving the document or clicking on the Preview area.. Thanks.

TOPICS
Preview

Views

291

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
Adobe Employee ,
May 13, 2024 May 13, 2024

Copy link to clipboard

Copied

Hi @Avatar55977840 

Hope you are doing good!


Could you please let us know,if update images in the Preview pane is on Live/Design view and also the Source code of the image is mapping correctly on the html code

Thanks for your patience!

Regards,
Ranjitha

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
Explorer ,
May 13, 2024 May 13, 2024

Copy link to clipboard

Copied

Hello,

I'm referring to the Preview above the HTML editor in the Split view of the main Dreamweaver window. Yes, the image links correctly to the HTML page. In this case, closing the document and starting over, it works properly. 

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
Adobe Employee ,
May 13, 2024 May 13, 2024

Copy link to clipboard

Copied

Hi,

We are unable to reproduce the issue internally,May i know which version of DW are you using?

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
New Here ,
Jun 16, 2024 Jun 16, 2024

Copy link to clipboard

Copied

e 21.2.La versione

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 ,
Jun 18, 2024 Jun 18, 2024

Copy link to clipboard

Copied

LATEST

@Luigi380743304kh1,

What is your question? 

Please a start a new topic.  This topic from early May was already answered.

 

 

 

 

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
Explorer ,
May 13, 2024 May 13, 2024

Copy link to clipboard

Copied

Version 21.4 (15620 Build) on Mac

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 ,
May 16, 2024 May 16, 2024

Copy link to clipboard

Copied

I can't reproduce it either.

  • Is your code valid and error-free (denoted by a green checkmark in a circle)?  See screenshot.
  • Are you in LIVE or DESIGN view?  Try toggling to LIVE with Ctrl/Cmd + Shift + F11.
  • Does the image reside in your local site folder on your computer's primary hard drive?
  • Or is the image on a remotely hosted server?

 

image.png

 

What happens when you REFRESH Live view with F5?

 

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
Explorer ,
May 16, 2024 May 16, 2024

Copy link to clipboard

Copied

Hello,

The image is on local external hard drive. In Split View, and now toggling to Live View. Updated the doctype and character set, now the editor shows the green ok icon. Linking an image again, it seems that the image links correctly, but the. Preview window doesn't accommodate the whole page at once, in other words, the image doesn't show unless manually scrolling the Preview. When closing the document and starting over, the scroll starts on top where the image shows. 

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 ,
May 16, 2024 May 16, 2024

Copy link to clipboard

Copied

quote

Preview window doesn't accommodate the whole page...

By @Avatar55977840

=============

Reponsive Layout issues are 100% about code  -- HTML and CSS. 

Please upload the problem page to your remote server and post the URL here for us to examine in full context. 

Without a URL, we're just making guesses about what could be going on.

 

 

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
Explorer ,
May 16, 2024 May 16, 2024

Copy link to clipboard

Copied

Preview doesn't accommodate, I meant the whole html-page doesn't fit inside the Preview pane without scrolling.

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 ,
May 16, 2024 May 16, 2024

Copy link to clipboard

Copied

quote

Preview doesn't accommodate, I meant the whole html-page doesn't fit inside the Preview pane without scrolling.


By @Avatar55977840

 

That points to the fact that your page is not responsive. In other words, you have not catered for smaller screen sizes. 

 

As an example, this is the image for desktops

BenPleysier_0-1715907323141.png

 

And this is mobile view

BenPleysier_1-1715907406409.png

 

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
LEGEND ,
May 17, 2024 May 17, 2024

Copy link to clipboard

Copied

quote
quote

Preview doesn't accommodate, I meant the whole html-page doesn't fit inside the Preview pane without scrolling.


By @Avatar55977840

 

That points to the fact that your page is not responsive. In other words, you have not catered for smaller screen sizes. 

 

As an example, this is the image for desktops

BenPleysier_0-1715907323141.png

 

And this is mobile view

 

 


By @BenPleysier

 

Just as an aside note: Your 'Menu' text and 'burger' icon is not visible on page load - android tablet (Chrome browser) on the home page. One needs to swipe to the right to make it come into view, then when you click on the burger  icon the dropdown menu link text is black, not gold, so against the black background the links appear invisible. The text links are there and the links work fine, you just can't see they are there.

 

On all your other pages the burger icon is visible on page load and dropdown menu text/links are gold...........so you may want to investigate what's different about the set up on the homepage.

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 ,
May 16, 2024 May 16, 2024

Copy link to clipboard

Copied

Live view can only show what will fit in the screen size you've designated.

image.png

But that said, it's not how it looks in Dreamweaver that counts.  What matters is how your page performs in actual web devices (mobile, tablet & desktop).  What's the URL to your web page?

 

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
Explorer ,
May 17, 2024 May 17, 2024

Copy link to clipboard

Copied

Hello,

An URL isn't available at this point, I'm moving the old HTML content to a publishing platform that can accommodate multiple devices.

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 ,
May 17, 2024 May 17, 2024

Copy link to clipboard

Copied

quote

I'm moving the old HTML content to a publishing platform that can accommodate multiple devices.

By @Avatar55977840

==========

Not sure why we're discussing Dreamweaver if you're moving to another platform.  🤔

 

Copy & paste this code into a new blank page.  This layout is responsive and should fit inside whichever sized panel you have.

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CSS Grid Test</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
width: 85%; 
margin: 0 auto;
background-color:antiquewhite;
color:#372602; 
font-family: Calibri, Candara, Segoe, Segoe UI, Optima, Arial, sans-serif;
font-size: calc(16px + 1vw);
line-height: calc(1.1em + 0.5vw);
}
/**linked text**/
a:link {color:darkred; text-decoration:none}
a:visited {color:darkgray;}
a:hover, a:active, a:focus {color:crimson; text-decoration: underline}

.grid-container { 
display: grid;
grid-column-start: col 1;
grid-gap: 5px;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
grid-template-rows: repeat(auto-fit, 1fr);
}
.grid-container img {
vertical-align: baseline;
max-width: 100%;
height: auto;
}
</style>
</head>
<body>
<main>
<div class="row">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum consequuntur numquam eaque deserunt repudiandae optio dolores soluta voluptate quaerat, incidunt assumenda aperiam vitae unde reprehenderit, voluptas minima ducimus tempore, et.</p>
</div>
</main>

<h2>CSS Grid Test</h2>
<div class="grid-container">
<ul>
<li><a href="#">Linked Text</a></li> 
<li><a href="#">Linked Text</a></li> 
<li><a href="#">Linked Text</a></li>
</ul>

<img src="https://dummyimage.com/650x490" alt="placeholder">

<img src="https://dummyimage.com/650x490" alt="placeholder">

<img src="https://dummyimage.com/650x490" alt="placeholder">

<img src="https://dummyimage.com/650x490" alt="placeholder">

<img src="https://dummyimage.com/650x490" alt="placeholder">

<img src="https://dummyimage.com/650x490" alt="placeholder">

<img src="https://dummyimage.com/650x490" alt="placeholder">

<img src="https://dummyimage.com/650x490" alt="placeholder">

<img src="https://dummyimage.com/650x490" alt="placeholder">
</div>
</body>
</html>

 

Post back if you have any questions.

 

 

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
Explorer ,
May 18, 2024 May 18, 2024

Copy link to clipboard

Copied

Thanks, I appreciate this. As a user, I continue with Dreamweaver for other projects!

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