Highlighted

Dreamweaver - Live pages not aligned properly

New Here ,
May 11, 2019

Copy link to clipboard

Copied

Hello.

I made a web site where the divs align perfectly in Dreamweaver live view and in the server previews, but when the site went live the page parts don't line up, especially when you enlarge or make the page smaller.

The url is www.soundcraftpiano.com

Any and all help would be much appreciated.

Thanks

Adobe Community Professional
Correct answer by Nancy OShea | Adobe Community Professional

You have a lot problems going on.

#1 Your site is not mobile friendly which means Google will penalize you in search results. 

Mobile-Friendly Test - Google Search Console

#2 We don't use tables for layouts because tables are not responsive and should be used only for tabular data.

#3 Your code contains many errors.

Showing results for http://www.soundcraftpiano.com/ - Nu Html Checker

Start over with a responsive layout.  I put together this responsive starter page for a related forum question yesterday.  Copy & paste the code below into a new, blank document and test it in all your devices. 

<!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>Bootstrap 4.3 Starter</title>

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

</head>

<body>

<nav id="topNav" class="navbar navbar-top navbar-expand-lg navbar-dark bg-dark"> <a class="navbar-brand mx-auto" href="index.html">

<!--Your logo goes here-->

<img class="shadow-sm rounded-circle" src="https://dummyimage.com/250x110" alt="logo/brand"> </a>

<button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".navbar-collapse"> <span class="navbar-toggler-icon"></span></button>

<div class="navbar-collapse collapse">

<ul class="navbar-nav ml-auto">

<li class="nav-item current"><a class="nav-link" href="#">Home</a></li>

<li class="nav-item dropdown">

<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Services</a>

<div class="dropdown-menu" aria-labelledby="navbarDropdown">

<a class="dropdown-item" href="#">sub-1a</a>

<a class="dropdown-item" href="#">sub-1b</a>

<a class="dropdown-item" href="#">sub-1c</a>

</div>

</li>

<li class="nav-item"><a class="nav-link" href="#">About</a></li>

<li class="nav-item"><a class="nav-link" href="#">Contact</a></li>

</ul>

</div>

</nav>

<div class="jumbotron jumbotron-fluid text-center">

<h1 class="display-5">Bootstrap with Dreamweaver</h1>

<p class="lead">Easily build your page using the Bootstrap components from the Insert panel.</p>

<hr class="my-4">

<p>This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>

<p class="lead"> <a class="btn btn-dark btn-lg" href="https://getbootstrap.com/docs/4.0/components/jumbotron/" role="button">Learn more</a> </p>

</div>

<div class="container-fluid">

<div class="row text-center">

<div class="col-md-6 col-lg-3">

<h3>Heading 3</h3>

<img class="img-fluid" src="https://dummyimage.com/900x600" alt="placeholder">

<p>Lorem ipsum dolor...</p>

</div>

<div class="col-md-6 col-lg-3">

<h3>Heading 3</h3>

<img class="img-fluid" src="https://dummyimage.com/900x600" alt="placeholder">

<p>Lorem ipsum dolor...</p>

</div>

<div class="col-md-6 col-lg-3">

<h3>Heading 3</h3>

<img class="img-fluid" src="https://dummyimage.com/900x600" alt="placeholder">

<p>Lorem ipsum dolor...</p>

</div>

<div class="col-md-6 col-lg-3">

<h3>Heading 3</h3>

<img class="img-fluid" src="https://dummyimage.com/900x600" alt="placeholder">

<p>Lorem ipsum dolor...</p>

</div>

</div>

<hr class="my-4">

<div class="row">

<footer class="col"> <small>© 2019 Footer goes here</small> </footer>

</div>

</div>

<!--first jQuery then popper then Bootstrap js-->

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

</body>

</html>

TOPICS
Dreamweaver CC 2014

Views

346

Likes

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

Dreamweaver - Live pages not aligned properly

New Here ,
May 11, 2019

Copy link to clipboard

Copied

Hello.

I made a web site where the divs align perfectly in Dreamweaver live view and in the server previews, but when the site went live the page parts don't line up, especially when you enlarge or make the page smaller.

The url is www.soundcraftpiano.com

Any and all help would be much appreciated.

Thanks

Adobe Community Professional
Correct answer by Nancy OShea | Adobe Community Professional

You have a lot problems going on.

#1 Your site is not mobile friendly which means Google will penalize you in search results. 

Mobile-Friendly Test - Google Search Console

#2 We don't use tables for layouts because tables are not responsive and should be used only for tabular data.

#3 Your code contains many errors.

Showing results for http://www.soundcraftpiano.com/ - Nu Html Checker

Start over with a responsive layout.  I put together this responsive starter page for a related forum question yesterday.  Copy & paste the code below into a new, blank document and test it in all your devices. 

<!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>Bootstrap 4.3 Starter</title>

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

</head>

<body>

<nav id="topNav" class="navbar navbar-top navbar-expand-lg navbar-dark bg-dark"> <a class="navbar-brand mx-auto" href="index.html">

<!--Your logo goes here-->

<img class="shadow-sm rounded-circle" src="https://dummyimage.com/250x110" alt="logo/brand"> </a>

<button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".navbar-collapse"> <span class="navbar-toggler-icon"></span></button>

<div class="navbar-collapse collapse">

<ul class="navbar-nav ml-auto">

<li class="nav-item current"><a class="nav-link" href="#">Home</a></li>

<li class="nav-item dropdown">

<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Services</a>

<div class="dropdown-menu" aria-labelledby="navbarDropdown">

<a class="dropdown-item" href="#">sub-1a</a>

<a class="dropdown-item" href="#">sub-1b</a>

<a class="dropdown-item" href="#">sub-1c</a>

</div>

</li>

<li class="nav-item"><a class="nav-link" href="#">About</a></li>

<li class="nav-item"><a class="nav-link" href="#">Contact</a></li>

</ul>

</div>

</nav>

<div class="jumbotron jumbotron-fluid text-center">

<h1 class="display-5">Bootstrap with Dreamweaver</h1>

<p class="lead">Easily build your page using the Bootstrap components from the Insert panel.</p>

<hr class="my-4">

<p>This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>

<p class="lead"> <a class="btn btn-dark btn-lg" href="https://getbootstrap.com/docs/4.0/components/jumbotron/" role="button">Learn more</a> </p>

</div>

<div class="container-fluid">

<div class="row text-center">

<div class="col-md-6 col-lg-3">

<h3>Heading 3</h3>

<img class="img-fluid" src="https://dummyimage.com/900x600" alt="placeholder">

<p>Lorem ipsum dolor...</p>

</div>

<div class="col-md-6 col-lg-3">

<h3>Heading 3</h3>

<img class="img-fluid" src="https://dummyimage.com/900x600" alt="placeholder">

<p>Lorem ipsum dolor...</p>

</div>

<div class="col-md-6 col-lg-3">

<h3>Heading 3</h3>

<img class="img-fluid" src="https://dummyimage.com/900x600" alt="placeholder">

<p>Lorem ipsum dolor...</p>

</div>

<div class="col-md-6 col-lg-3">

<h3>Heading 3</h3>

<img class="img-fluid" src="https://dummyimage.com/900x600" alt="placeholder">

<p>Lorem ipsum dolor...</p>

</div>

</div>

<hr class="my-4">

<div class="row">

<footer class="col"> <small>© 2019 Footer goes here</small> </footer>

</div>

</div>

<!--first jQuery then popper then Bootstrap js-->

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

</body>

</html>

TOPICS
Dreamweaver CC 2014

Views

347

Likes

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
May 11, 2019 0
Adobe Community Professional ,
May 11, 2019

Copy link to clipboard

Copied

You have a lot problems going on.

#1 Your site is not mobile friendly which means Google will penalize you in search results. 

Mobile-Friendly Test - Google Search Console

#2 We don't use tables for layouts because tables are not responsive and should be used only for tabular data.

#3 Your code contains many errors.

Showing results for http://www.soundcraftpiano.com/ - Nu Html Checker

Start over with a responsive layout.  I put together this responsive starter page for a related forum question yesterday.  Copy & paste the code below into a new, blank document and test it in all your devices. 

<!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>Bootstrap 4.3 Starter</title>

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

</head>

<body>

<nav id="topNav" class="navbar navbar-top navbar-expand-lg navbar-dark bg-dark"> <a class="navbar-brand mx-auto" href="index.html">

<!--Your logo goes here-->

<img class="shadow-sm rounded-circle" src="https://dummyimage.com/250x110" alt="logo/brand"> </a>

<button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".navbar-collapse"> <span class="navbar-toggler-icon"></span></button>

<div class="navbar-collapse collapse">

<ul class="navbar-nav ml-auto">

<li class="nav-item current"><a class="nav-link" href="#">Home</a></li>

<li class="nav-item dropdown">

<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Services</a>

<div class="dropdown-menu" aria-labelledby="navbarDropdown">

<a class="dropdown-item" href="#">sub-1a</a>

<a class="dropdown-item" href="#">sub-1b</a>

<a class="dropdown-item" href="#">sub-1c</a>

</div>

</li>

<li class="nav-item"><a class="nav-link" href="#">About</a></li>

<li class="nav-item"><a class="nav-link" href="#">Contact</a></li>

</ul>

</div>

</nav>

<div class="jumbotron jumbotron-fluid text-center">

<h1 class="display-5">Bootstrap with Dreamweaver</h1>

<p class="lead">Easily build your page using the Bootstrap components from the Insert panel.</p>

<hr class="my-4">

<p>This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>

<p class="lead"> <a class="btn btn-dark btn-lg" href="https://getbootstrap.com/docs/4.0/components/jumbotron/" role="button">Learn more</a> </p>

</div>

<div class="container-fluid">

<div class="row text-center">

<div class="col-md-6 col-lg-3">

<h3>Heading 3</h3>

<img class="img-fluid" src="https://dummyimage.com/900x600" alt="placeholder">

<p>Lorem ipsum dolor...</p>

</div>

<div class="col-md-6 col-lg-3">

<h3>Heading 3</h3>

<img class="img-fluid" src="https://dummyimage.com/900x600" alt="placeholder">

<p>Lorem ipsum dolor...</p>

</div>

<div class="col-md-6 col-lg-3">

<h3>Heading 3</h3>

<img class="img-fluid" src="https://dummyimage.com/900x600" alt="placeholder">

<p>Lorem ipsum dolor...</p>

</div>

<div class="col-md-6 col-lg-3">

<h3>Heading 3</h3>

<img class="img-fluid" src="https://dummyimage.com/900x600" alt="placeholder">

<p>Lorem ipsum dolor...</p>

</div>

</div>

<hr class="my-4">

<div class="row">

<footer class="col"> <small>© 2019 Footer goes here</small> </footer>

</div>

</div>

<!--first jQuery then popper then Bootstrap js-->

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

</body>

</html>

Nancy O'Shea, ACP
Alt-Web Design & Publishing

Likes

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
Reply
Loading...
May 11, 2019 1