Website not displaying in Dreamweaver properly

[xenatorres]

I've been using Dreamweaver for years and never had this problem.

I am currently making a website and I have found, for the first time ever, Dreamweaver is not showing the site as it appears on Firefox and Edge (tested here too just because it happens to be installed on the computer).

This is making it impossible to actually code my website, because I have no idea what Dreamweaver is doing.

I tried to uninstall and reinstall,  but the issue continues.

Is there anything else I can try?

[Jon Fritz]

Without seeing your actual page, it's hard to say what could be going on, but it could be something as simple as a minor code error...

Run your code through the validator at https://validator.w3.org/nu/ and fix any reported errors.

Actual browsers are much better at guessing what was meant when they run into code errors than DW's emulator.

[Ben M]

Is it safe to assume you are using live view and not design view? Also as stated, sharing your code is the best to help us help you, or you can validate the code to look for errors.

[Nancy OShea]

If your site is properly defined and pointing to assets stored on your primary hard drive, you should see the site is expected in Live View. Try toggling from Design to Live with Ctrl/Cmd + Shift + F11.

Dreamweaver's Design View is a legacy feature from the old Macromedia days. It's NOT an actual browser. See screenshot.

Endeavor to use clean code denoted by the green checkmark.  If you see a red X, it means your code contains errors which may lead to rendering problems both in Dreamweaver and in real browsers.

Hope that helps.

[xenatorres]

I always have it in live view, though I tried design view too - same problem. There's no marks for errors in my code. The site displays correctly based on size. Dreamweaver is showing what it looks like full screen (where the code breaks for some reason), regardless of size.

Here is a thread I opened on a coding forum for help about this issue that has the code.

[BenPleysier]

Using a different IDE, I have no problem as per

This is what I get in Dreamweaver

[xenatorres]

You have it too small. It works just fine when in a smaller window (which I did not post before - my bad). The video and the text are coded to be side-by-side. In that case, the size of the page is determined by the text, not the video (for reasons I can't figure out), so the text is inside the white, but the video hangs off. As the text is being read correctly, if you have a small screen where the text is under the video, there's no issue.

Here's a picture of what Dreamweaver is showing me.

[Jon Fritz]

The dotted lines in your screenshot say you are in Design View. Design View is not now, nor has it ever been, accurate when it comes to how the page will actually display in a browser. Maybe back when Netscape was still a thing, but it's just a framework view now, used to quickly add content. Switch to Live View for a more accurate rendering of the page.

Even if it's still wrong in Live (a browser emulator), if your page is showing correctly in the browsers, and comes up without any major structural errors in the validator, it may simply may be coded in a manner that poor old DW just doesn't understand anymore. It may just be "the way it works".

DW is on life support. Adobe is no longer adding new features or doing bug fixes for the old girl. Going forward, they only plan third-party library updates and, possibly, security patches.

[xenatorres]

I AM in live view. I don't know why the dots are there when they shouldn't be, but I am in live view. "Live" is checked from the dropdown at the top where it reads "Code Split Live" - if that's not live, how do I make it live?

I didn't know Dreamweaver was not being supported by Adobe. Why would they do that? Ugh.

The layout is not working fully on browsers either - it works up to a certain size, then this issue happens when the browser reaches a certain size, like what I am seeing in Dreamweaver, so Dreamweaver is correctly showing the issue as I always work in full screen with it. If I shrink it down, then it shows correctly.

I have no idea why it's doing this, but good to know it's not Dreamweaver. Sad to know it's not being updated. Bugger.

[Nancy OShea]

Screenshots don't tell anything.  Answers are in the code. Please post the URL to your live page online so we check it with our browser tools.

[xenatorres]

test page 

[xenatorres]

**Reminder: put in full screen for a computer monitor to see the issue. The issue will not happen on a phone or small browser.

[BenPleysier]

Add overflow: hidden in the line in style.css

PS: This is how I have handled videos: https://bunchoblokes.org/bob-tv

[xenatorres]

You are a legend - that HELPS, but it's not quite there.

On my own I found the site is reading the height of the text only when it's on the right and that issue still happens (the next two videos move up under the text, rather than reading the video size.
I have resized the videos - that helped. But the only way to get the page to seem to accept the video has a height too is to move the text to the left, but I think it looks better with the text on the right.
I would LOVE to do your video thing, but that's likely too complicated for me, especially on the ridiculously tight deadline I am on.

[BenPleysier]

Are you asking to have space between the videos? If so, it means adding a margin (top or bottom).

Having said that, you are using an old version of Bootstrap, It would have been better if you were using Bootstrap v5. Even so, the structure of a Bootstrap layout has to follow a certain rule:

container
    row(s)
        column(s)

Please get to me with what you want as an outcome for your site.

[BenPleysier · Accepted solution]

Have a look at the following code where I have added a row.

<!--end navigation -->

<div class="row" style="margin-bottom: 20px;">
    <div class="col-md-7">
        <div class="video-responsive">
            <iframe width="1253" height="705" style="border:3px solid #ed1e79" src="https://www.youtube.com/embed/BzJdZLVq1Oo" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
        </div>
    </div>


    <div class="col-md-5">
        <h2>“From The Mouths of Babes” is a collection of impromptu
            ‘on the street’ interviews about Love, Life, and Self</h2>

        <p>Enjoy full compilation episodes and a collection of some of our favorite individual interviews below and check out the other pages for more of our favorite, top ranked, and celebrity interviews. You can also visit the MOB YOUTUBE CHANNEL to view all of our over 1000 videos.</p>
    </div>
</div>

<div class="row" style="margin-bottom: 20px;">
    <div class="col-md-6">
        <div class="video-responsive">
            <iframe width="1253" height="705" style="border:3px solid #ed1e79" src="https://www.youtube.com/embed/Z-_WOilsniw" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
        </div>
    </div>

    <div class="col-md-6">
        <div class="video-responsive">
            <iframe width="1253" height="705" style="border:3px solid #ed1e79" src="https://www.youtube.com/embed/qoe92axv97g" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
        </div>
    </div>
</div>
<!-- end main body -->

[xenatorres]

You are a SUPERHERO!!!!!!!! *THANK YOU*! I didn't know I needed rows. OMG, I've been pulling my hair out on this for WEEKS!

[Nancy OShea]

Suggest you read up on how to use latest Bootstrap.   Many classes have been removed and added since the previous versions.

https://www.w3schools.com/bootstrap5/

Also pay attention to the Utility Classes for maintaining your video's aspect ratio on all screen sizes.

https://www.w3schools.com/bootstrap5/tryit.asp?filename=trybs_util_aspect_ratio