Hi,
Dreamweaver is suppose to have an eye icon with a slash through it that would allow you to hide items on your site that you don't want seen in the mobile view. I'm working in DWCS6 and for the life of me I can not find that icon. Can you please help me hide items for my mobile view in Dreamweaver CS6?
For whatever reason, the graphic elements in the area where I hid the slider aren't responding to CSS commands. I can't move them to adjust the look. I walked down this road because my slider wouldn't resize to fit the mobile view. I was willing to keep it if it didn't bleed off the right side of the page because it's loading 100%. I liked the idea of replacing the video with an image, but I only would want to do that for the mobile view otherwise I'm still stuck because my page with the slider hidden isn't stacked correctly and I don't have controls over it.
johnnyslice wrote
my slider wouldn't resize to fit the mobile view.
Ditch the legacy Fluid Grid Layouts. They were never very good to begin with and Adobe finally removed them from DW CC. A responsive carousel slider is no problem with Bootstrap's responsive layout system.
Copy & paste this code into a new, blank document. Save and preview in browsers with different viewport widths.
<!doctype html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>Bootstrap 3.7 Carousel</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- Latest Bootstrap 3 CSS-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<style>
.center-block {float:none}
</style>
</head>
<body>
<div class="container-fluid">
<div class="row">
<!--begin Bootstrap Carousel-->
<div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="2600">
<!-- Slide Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
<li data-target="#myCarousel" data-slide-to="3"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="https://placeimg.com/1200/475/nature" alt="...">
<div class="carousel-caption">
<h3>Heading</h3>
<p>Caption</p>
</div>
</div>
<div class="item">
<img src="https://placeimg.com/1200/475/arch/3" alt="...">
<div class="carousel-caption">
<h3>Heading</h3>
<p>Caption</p>
</div>
</div>
<div class="item">
<img src="https://placeimg.com/1200/475/tech" alt="...">
<div class="carousel-caption">
<h3>Heading</h3>
<p>Caption</p>
</div>
</div>
<div class="item">
<img src="https://placeimg.com/1200/475/animals" alt="...">
<div class="carousel-caption">
<h3>Heading</h3>
<p>Caption</p>
</div>
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span> </a> <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span> </a>
<!--/carousel--></div>
<!--/row--></div>
<!--/container--></div>
<!--latest jQuery 3-->
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<!--Latest Bootstrap 3 JS-->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>
</html>
Already have an account? Login
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.
AdChoices