I didn't download the various CSS files. But I can see the HTML code rendered in DW Design and Live view.
That said, the site needs to be re-built responsively. Having a JS re-direct to a different page for mobile and tablet devices is total nonsense. Especially when some browsers ignore redirects for security reasons.
Below is a quick example of a responsive layout using Bootstrap. Copy & paste this code into a new, blank document. To see it in action, save and preview in various browsers and web devices.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Bootstrap 4.4.1 Starter Page</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--Bootstrap 4.4.1 CSS-->
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<style>
/**minor customizations**/
.jumbotron {
background: url(https://placeimg.com/1200/500/arch) no-repeat center center fixed;
background-size: cover;
margin-bottom: 0;
padding-bottom: 0;
}
.jumbotron > .container {
background: rgba(0,0,0,0.5);
padding: 5%;
color: #FFF;
}
.navbar { margin-bottom: 4rem; }
/**Tooltips on bottom images**/
figure {
position: relative;
cursor: pointer;
}
div[role='tooltip2'] {
position: relative;
z-index: 1;
}
figcaption {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 2;
background: rgba(0,0,0,0.4);
text-align: center;
display: none;
color:#FFF;
}
figcaption h4 {
margin-top: 25%;
font-size: 2.5rem;
}
</style>
</head>
<body>
<header class="jumbotron">
<div class="container text-center rounded">
<div class="float-left"> <img class="rounded-circle img-fluid" src="https://dummyimage.com/400x350" alt="logo"> </div>
<h1 class="display-3">Hello, world!</h1>
<p>This is a template for a simple marketing or informational website. It includes a large callout called a jumbotron and three supporting pieces of content. Use it as a starting point to create something more unique.</p>
<p class="float-right"><a class="btn btn-light btn-lg" href="#" role="button">Learn more »</a></p>
<div class="clearfix"></div>
</div>
</header>
<!--responsive navbar-->
<nav class="navbar navbar-dark navbar-expand-lg bg-dark justify-content-center sticky-top"> <a class="navbar-brand" href="#">Brand/Logo</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button>
<div class="collapse navbar-collapse" id="navbarsExampleDefault">
<ul class="navbar-nav ml-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="#">About</a></li>
<li class="nav-item"><a class="nav-link" href="#">Portfolio</a></li>
<li class="nav-item"><a class="nav-link" href="#">Resumé</a></li>
<li class="nav-item"><a class="nav-link" href="#">Contact</a></li>
</ul>
</div>
</nav>
<main class="container-fluid">
<div class="col-sm-11 mx-auto">
<h3>Equal Height Cards </h3>
<div class="row row-eq-height">
<!--BEGIN 3 COLUMNS & CARDS-->
<div class="col-sm-7 col-lg-6 py-2">
<div class="card h-100 bg-light text-dark">
<div class="card-body">
<form>
<div class="form-group">
<label for="Name1">Name:</label>
<input type="text" class="form-control" id="Name1" placeholder="First & Last" required>
</div>
<div class="form-group">
<label for="Email1">E-mail:</label>
<input type="email" class="form-control" id="Email1" placeholder="you@domain.com" required>
<small id="Email1Help" class="form-text text-muted">We'll never share your e-mail with anyone.</small> </div>
<div class="form-group">
<label for="Phone1">Phone: </label>
<input type="tel" class="form-control" id="Phone1" placeholder="123-456-7890" >
</div>
<div class="form-group">
<label for="OptionList1">Select one: </label>
<select id="OptionList1" required class="form-control">
<option value="1" selected="selected">Item1</option>
<option value="2">Item2</option>
<option value="3">Item3</option>
<option value="4">Item4</option>
</select>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
<!--/card-body--></div>
<!--/card--></div>
<!--/col--></div>
<div class="col-sm-5 col-lg-4 py-2">
<div class="card h-100 bg-dark text-light">
<div class="card-body">
<h4 class="card-title">Card title</h4>
<p class="card-text">Some quick example text. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugiat neque sit velit veniam suscipit</p>
<a href="#" class="btn btn-danger">MORE +</a>
<!--/card-body--></div>
<!--/card--></div>
<!--/col--></div>
<div class="col-md-12 col-lg-2 py-2">
<div class="card h-100 bg-danger text-light">
<div class="card-body">
<h4 class="card-title">Card title</h4>
<p class="card-text">Some quick example text.</p>
<a href="#" class="btn btn-light">MORE +</a>
<!--/card-body--></div>
<!--/card--></div>
<!--/col--></div>
<!--/row--></div>
</div>
<!--one column-->
<div class="row">
<div class="col-sm-12 col-md-10 col-lg-8 rounded mx-auto text-center p-5">
<h3>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</h3>
</div>
</div>
</main>
<!-- 2 columns small, 4 columns large-->
<div class="container">
<div class="row text-center">
<div class="col-sm-6 col-lg-3">
<figure> <img class="img-thumbnail rounded-circle" src="https://placeimg.com/300/300/nature" alt="placeholder">
<figcaption class="rounded-circle">
<h4>Heading</h4>
<p>Some text</p>
</figcaption>
</figure>
</div>
<div class="col-sm-6 col-lg-3">
<figure><img class="img-thumbnail rounded-circle" src="https://placeimg.com/300/300/arch" alt="placeholder">
<figcaption class="rounded-circle">
<h4>Heading</h4>
<p>Some text</p>
</figcaption>
</figure>
</div>
<div class="col-sm-6 col-lg-3">
<figure> <img class="img-thumbnail rounded-circle" src="https://placeimg.com/300/300/tech" alt="placeholder">
<figcaption class="rounded-circle">
<h4>Heading</h4>
<p>Some text</p>
</figcaption>
</figure>
</div>
<div class="col-sm-6 col-lg-3">
<figure> <img class="img-thumbnail rounded-circle" src="https://placeimg.com/300/300/people" alt="placeholder">
<figcaption class="rounded-circle">
<h4>Heading</h4>
<p>Some text</p>
</figcaption>
</figure>
</div>
</div>
</div>
<!--footer-->
<footer class="container-fluid bg-dark">
<div class="row">
<div class="col text-center text-light">
<p>© Company Name 2020</p>
</div>
</div>
</footer>
<!--latest jQuery Core-->
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<!--Popper JS-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<!--latest Bootstrap 4.4.1 JS-->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.bundle.min.js" integrity="sha384-6khuMg9gaYr5AxOqhkVIODVIvm9ynTT5J4V1cfthmT+emCG6yVmEZsRHdxlotUnm" crossorigin="anonymous"></script>
<script>
//Invoke tooltips on page load-->
$(document).ready(function() {
$("[rel='tooltip2']").tooltip();
$('figure').hover(function(){
$(this).find('figcaption').fadeIn('slow');
},
function(){$(this).find('figcaption').fadeOut('fast');
});
});
</script>
</body>
</html>
Nancy O'Shea— Product User, Community Expert & Moderator
5
Replies
AdChoices