How to hide a slideshow item for my mobile view.

Report · Jan 09, 2018

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?

Report · Jan 09, 2018

Actually preventing slideshows and other bandwidth heavy content from loading on mobile devices is more complicated than you think. Simply hiding it from view does not prevent it from loading.

I just answered a question in Photoshop that might be relevant here.

"Let's say we have a 4 MB animated GIF we want to use on the website. But the filesize is too big for mobile users on limited data plans. To be kind, we want to load and serve mobile users a 20 KB static JPG instead of the animated GIF.

Add the Picture element.

<picture>: The Picture element - HTML | MDN

<picture> <source media="(min-width: 940px)" srcset="animated.gif" type="image/gif"> <img src="static.jpg" alt="mobile alternate image"> </picture>

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Report · Jan 09, 2018

Sorry I confused I am trying now.

Report · Jan 09, 2018

Hi Nancy,

I have 1 source for the three views so how do I add the picture tag without affecting the other two views? Is there a command for the CSS I can use to replace the slide show with a still image if I can't have it hidden?

Report · Jan 09, 2018

I am not sure that I have ever seen the icon that you are talking about in Dreamweaver. The only way to show/hide content is by using CSS media queries. See Responsive Web Design Media Queries

Wappler, the only real Dreamweaver alternative.

Report · Jan 09, 2018

I have my media queries CSS sheet set up with my three views.

what command in the mobile view should I add to my div style to hide an item?

Report · Jan 09, 2018

Let's see your HTML code. And tell us what you want to hide.

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Report · Jan 09, 2018

Here's my code. Please don't laugh:-) We all had to start somewhere. I'm giving you the body and footer. I want to hide the Amazing Slider from my mobile view. Do you want me to send my CSS Sheet?

</head>

<body>

</div>

<li>

<ul>

<li><a href="branding.html">Branding</a></li>

<li><a href="strategy.html">Strategy</a></li>

<li><a href="content.html">Content</a></li>

<li><a href="creativity.html">Creativity</a></li>

</ul>

</li>

<li><a href="about.html">About</a></li>

<li><a href="contact.html">Contact</a></li>

</ul>

</div>

<div id="AboutImage"><span style="font-size:20pt;">STRATEGY</span><br>

</div>

</div>

<div id="BrandingText"><p>Hiring Peppermint Creative Partners is the best strategy for your project. We will brainstorm your idea flushing out all possibilities. We'll create project plans and production schedules to manage production. We'll activate all events, hire all support and manage the budget meticulously. We'll set goals and provide a recap of the work for review with your managers.</p></div>

</div>

<div id="emailaddresshm"><div align="center"><strong>info@peppermintcreativepartners.com</strong></div>

</div><br>

<div id="Address"><div align="center">546 Midwood Street, B10, Brooklyn, New York 11203</div>

</div><br>

<div id="Linkshm"><div align="center"><a href="about.html" title="About">About</a> <a href="contact.html" title="Contact">Contact</a> <a href="work.html" title="Work">Work</a> <a href="consultation.html" title="Consultation">FreeConsultation</a></div>

</div><br>

</div>

</body>

</html>

Report · Jan 09, 2018

The CSS should look like

@media only screen and (max-width: 500px) {
    #amazingslider-wrapper-1 {
        visibility: hidden;
    }
}

Adjust the width to suit.

Wappler, the only real Dreamweaver alternative.

Report · Jan 09, 2018

I would use display:none because hidden won't remove the space.

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Report · Jan 09, 2018

I tried display: none; and it didn't work for me. visibility: hidden; removed the slider. I can now adjust the space. That worked well. Thanks folks, really appreciate your prompt responses, I'm blown away.

Report · Jan 09, 2018

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.

Report · Jan 09, 2018

This is what I'm trying to solve.

http://www.peppermintcreativepartners.com/mobilepage.jpg

Slider bleeding off the right or resizing without affecting tablet of pc views.

Report · Jan 09, 2018

I have unmarked reply 8 as being the correct one. I think you should follow Nancy's advice.

Wappler, the only real Dreamweaver alternative.

Report · Jan 09, 2018

OK, to be clear, is it the carousel that's responsive or is it the web page layout? Meaning, if I copy the head and link my page to my CSS and cut and paste my body and footer code into the new pages, will that give me the responsive carousel I need for mobile view? or do I have to re-code my slider with a bootstrap carousel. I'm trying to get a handle on what exactly I should do.

Report · Jan 09, 2018

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>

<head>

<title>Bootstrap 3.7 Carousel</title>

<style>

.center-block {float:none}

</style>

</head>

<body>

</ol>

<h3>Heading</h3>

<p>Caption</p>

</div>

<h3>Heading</h3>

<p>Caption</p>

</div>

<h3>Heading</h3>

<p>Caption</p>

</div>

<h3>Heading</h3>

<p>Caption</p>

</div>

<span class="sr-only">Previous</span> </a> <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">

</div>

</div>

</div>

</body>

</html>

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Report · Jan 09, 2018

And I suppose, I should re-code my entire site using bootstrap? Geez, I'm excited about using the new format but I'm soo behind schedule, is there a quicker work around so I can make a deadline and then re-code after my presentation? The site isn't expected to be done, it's far from it but I at least need each view to work. I know there's no short cuts but, is there a short cut:-)

Report · Jan 09, 2018

IMO, Bootstrap is much easier than Fluid Grids. And the results are better.

See below for tutorials on how to use it to get the layouts on want on mobile, tablet and desktop.

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Report · Jan 09, 2018

OK, no short cuts. I really do appreciate the advice. I'll add another week to my schedule and get started. At least in the future, I'll be much better informed. Thanks again.

Report · Jan 10, 2018

I've grown frustrated and I've reached out to my support team at guru.com to fix me. I need to move quickly. In all due respect, I don't know if this is the forum for work solicitation but here's the message I sent to my team.

"Hello, Happy New Year if that's your sought of thing. I'm still working on my site. I no longer need the coupon removed. I'm replacing my current site with this one:

http://www.peppermintcreativepartners.com/PeppermintCreativePartners/index.html

What I need is help with my "Work" Sub menu pages "Branding, Strategy, Content, and Creativity. My Amazing Slider will not resize to fit my mobile view. I need those pages to work in mobile view. Can you fix them and what would it cost?"

Nancy and Ben you're welcomed to bid on the job privately if you like, info@peppermintcreativepartners.com

Report · Jan 10, 2018

I'd love to help. Unfortunately, time and a priority list is running my show at the moment. You may like to ask @osgood_

Wappler, the only real Dreamweaver alternative.

Report · Jan 10, 2018

Thanks Ben for the response.

My India support is already on the job. It should be done in a few

hours for $25. Can't beat that in the states but I always ask.

Good luck with your show.

Report · Jan 10, 2018

Since you seem to have a simple embed slideshow (not sure how that works) but you could write the slideshow to window widths more than 768px and hide the <div> for window widths less than 768px using jQuery:

crossorigin="anonymous"></script>

$(document).ready(function(){

if ($(window).width() < 768) {

$('#amazingslider-wrapper-1').hide();

}

else if($(window).width() > 768){

$('#amazingslider-wrapper-1').html('<embed src="slideshows/strategyslider.html" width="880" height="470"></embed>');

}

});

</script>

So this empty <div> goes in your html NOT the <embed></embed> stuff - that's only written to the <div> if the window with is more than 768px.

Report · Jan 10, 2018

Osgood, I'm going to try this but my frustration cause me to hire a

programmer from India who is going to fix my website for 25 bucks.

Can't beat that with a baseball bat. But for my own personal knowledge,

I'm going to try this. I just don't have time to do it now.

Report · Jan 10, 2018

johnnyslice wrote
Osgood, I'm going to try this but my frustration cause me to hire a
programmer from India who is going to fix my website for 25 bucks.
Can't beat that with a baseball bat. But for my own personal knowledge,
I'm going to try this. I just don't have time to do it now.

I'll do it for 10 bucks..............joke

25 bucks I could not f**t for that (excuse language but that's just too depressing - cant compete with that)

Adobe Community

How to hide a slideshow item for my mobile view.

1 Correct answer