cancel
Turn on suggestions
Auto-suggest helps you quickly narrow down your search results by suggesting possible matches as you type.
Showing results for 
Show  only  | Search instead for 
Did you mean: 
Exit
search
  • Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
  • 한국 커뮤니티
0
Upvote

Website changing appearance when previewing

Kade33523366mhlv
New Here ,
Nov 10, 2023 Nov 10, 2023

Looks like this in dreamweaver

Kade33523366mhlv_0-1699610205328.pngKade33523366mhlv_1-1699610243883.pngKade33523366mhlv_2-1699610269421.png

But looks completely different in the real time preview

Kade33523366mhlv_3-1699610396637.pngKade33523366mhlv_4-1699610426138.pngKade33523366mhlv_5-1699610455219.png

All code below:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Untitled Document</title>
    <!-- Bootstrap -->
<link href="file:///G|/games design/a1 - career focused/website/new website/css/bootstrap-4.4.1.css" rel="stylesheet">
 
  </head>
  <body>
  <nav class="navbar navbar-expand-lg navbar-dark bg-dark"> <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent1" aria-controls="navbarSupportedContent1" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button>
    <div class="collapse navbar-collapse" id="navbarSupportedContent1">
      <ul class="navbar-nav mr-auto">
        <li class="nav-item active"> <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> </li>
        <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li>
        <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown1" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Dropdown </a>
          <div class="dropdown-menu" aria-labelledby="navbarDropdown1"> <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a>
            <div class="dropdown-divider"></div>
            <a class="dropdown-item" href="#">Something else here</a> </div>
        </li>
        <li class="nav-item"> <a class="nav-link disabled" href="#">Disabled</a> </li>
      </ul>
      <form class="form-inline my-2 my-lg-0">
        <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
        <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
      </form>
    </div>
  </nav>
 
  <div class="row">
    <div class="col-xl-4">
      <h5><strong>About Us</strong></h5>
<p>Enter Text Here&nbsp;</p>
    </div>
    <div class="col-xl-4"><img src="file:///G|/logo.svg" alt=""/></div>
    <div class="col-xl-4">
      <h5><strong>What We Represent</strong></h5>
Enter Text Here</div>
  </div>
  <div id="carouselExampleIndicators1" class="carousel slide" data-ride="carousel" style="background-color: grey">
    <ol class="carousel-indicators">
      <li data-target="#carouselExampleIndicators1" data-slide-to="0" class="active"></li>
      <li data-target="#carouselExampleIndicators1" data-slide-to="1"></li>
      <li data-target="#carouselExampleIndicators1" data-slide-to="2"></li>
    </ol>
    <div class="carousel-inner" role="listbox">
      <div class="carousel-item active"> <img class="d-block mx-auto" src="images/Carousel_Placeholder.png" alt="First slide">
        <div class="carousel-caption">
          <h5>First slide Heading</h5>
          <p>First slide Caption</p>
            </div>
          </div>
      <div class="carousel-item"> <img class="d-block mx-auto" src="images/Carousel_Placeholder.png" alt="Second slide">
        <div class="carousel-caption">
          <h5>Second slide Heading</h5>
          <p>Second slide Caption</p>
            </div>
          </div>
      <div class="carousel-item"> <img class="d-block mx-auto" src="images/Carousel_Placeholder.png" alt="Third slide">
        <div class="carousel-caption">
          <h5>Third slide Heading</h5>
          <p>Third slide Caption</p>
            </div>
          </div>
    </div>
    <a class="carousel-control-prev" href="#carouselExampleIndicators1" role="button" data-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="carousel-control-next" href="#carouselExampleIndicators1" role="button" data-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div>
  <div class="row">
    <div class="col-xl-4"><img src="file:///g|/Placeholder Image.jpg" width="474" height="355" alt=""/><h6>Describe Image Above</h6><h4>Subject Title</h4>
      <div class="card col-md-4 col-xl-12">
        <div class="card-body">
          
          <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
          <a href="#" class="btn btn-primary">Page 2</a> </div>
      </div>
    </div>
    <div class="col-xl-4"><img src="file:///g|/Placeholder Image.jpg" width="474" height="355" alt=""/><h6>Describe Image Above</h6><h4>Subject Title</h4>
      <div class="card col-md-4 col-xl-12">
        <div class="card-body">
          
          <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
          <a href="#" class="btn btn-primary">Page 3</a> </div>
      </div>
    </div>
    <div class="col-xl-4"><img src="file:///g|/Placeholder Image.jpg" width="474" height="355" alt=""/><h6>Describe Image Above</h6><h4>Subject Title</h4>
      <div class="card col-md-4 col-xl-12">
        <div class="card-body">
          
          <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
          <a href="#" class="btn btn-primary">Page 4&nbsp;</a> </div>
  
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-xl-4">
      <div class="card col-md-4 col-xl-12">
        <div class="card-header"> Image and Reference Sources&nbsp; </div>
        <ul class="list-group list-group-flush">
          <li class="list-group-item">Link 1</li>
          <li class="list-group-item">Link 2</li>
          <li class="list-group-item">Link 3</li>
            </ul>
          </div>
    </div>
    <div class="col-xl-4">
      <div class="card col-md-4 col-xl-12">
        <div class="card-header"> Social Media&nbsp; </div>
        <ul class="list-group list-group-flush">
          <li class="list-group-item">"Facebook" link</li>
          <li class="list-group-item">"Instagram" Link&nbsp;</li>
          <li class="list-group-item">"X"Link</li>
        </ul>
      </div>
    </div>
    <div class="col-xl-4">
      <div class="card col-md-4 col-xl-12">
        <div class="card-header"> Contact Us At&nbsp; </div>
        <ul class="list-group list-group-flush">
          <li class="list-group-item">CareerFocused123123123123@gmail.com&nbsp;</li>
          <li class="list-group-item">+14243141 079582748923&nbsp;</li>
          <li class="list-group-item">F13 7UP - 678 Flair Road&nbsp;</li>
            </ul>
          </div>
        &nbsp;</div>
  </div>
  <script src="file:///G|/games design/a1 - career focused/website/new website/js/jquery-3.4.1.min.js"></script>
 
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="file:///G|/games design/a1 - career focused/website/new website/js/popper.min.js"></script> 
  <script src="file:///G|/games design/a1 - career focused/website/new website/js/bootstrap-4.4.1.js"></script>
  </body>
</html>
TOPICS
Preview
158
Translate
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
replies 2 Replies 2
latest latest Jump to latest reply
Jon Fritz Community Expert
Community Expert ,
Nov 10, 2023 Nov 10, 2023

Looks like you may have forgotten to Define a Site as your first (very important) step.

The evidence is the link to your .CSS file, which is missing from your RTP view, starting with "file". It's an absolute link to a location on your computer. RTP uses Adobe's servers to preview your page in an iFrame, they don't have access to that kind of file path.

You'll need to use a document relative link to your .css file in order for RTP to (maybe) work, which DW will automatically do if you have a Site Definition set up correctly.

RTP is typically a very glitchy function however. You may like using the standard browser preview by going to Edit > Preferences > Real Time Preview > check the box at the top for Use Static Browser Preview.

Translate
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
Nancy OShea Community Expert
Community Expert ,
Nov 10, 2023 Nov 10, 2023
LATEST

All assets are pointing to your computer's G: drive.   That's the path contained in your code.  It won't work online like that.

Nobody can see those assets except you.

 

<link href="file:///G|/games design/a1 - career focused/website/new website/css/bootstrap-4.4.1.css" rel="stylesheet">

 

You'll need to define a local site folder on your primary hard drive.  Save with Ctrl + S to resolve paths.  Then upload assets to your remote server.

 

Nancy O'Shea— Product User, Community Expert & Moderator
Translate
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
Copyright © 2025 Adobe. All rights reserved.
Using the Community Experience League Terms of Use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices