Removing Slideshow from Mobile Device View

[darrow]

I want the homepage slideshow removed on small screens.

My template in wp/responsive contains this slideshow code:

So, I tried this to remove it in style.css:

@media screen and (max-width: 240px) {

body {}
.slideshow_deploy {
display: none;
}

Do I need to set up a div or something?

Thanks a lot,
Darrow

cc @TheDoc

[TheDoc]

I’m not sure if that’s all of the CSS or not, but you’re not including a closing `}` on the media query itself. Do you have a link to the site?

[darrow]

http://SamaritanHouseSanMateo.org I would have done this in a different way if I had time to start over, but this is a pro bono site for a non-profit and they just asked for this feature last minute. Thanks.

[darrow]

@media screen and (max-width: 240px) {

body {}
.slideshow_deploy {
display: none;
}

#slideshow_deploy {
display: none;
}
#featured p {
font-size: 11px;
line-height: 1.5em;
}

.featured-title {
font-size: 20px;
}

.featured-subtitle {
font-size: 11px;
}

.call-to-action a.button {
font-size: 12px;
padding: 5px 15px;
}

.top-widget area,
.top-widget select,
.top-widget textarea,
.top-widget input[type=”text”],
.top-widget input[type=”password”] {
width: 75%;
}

.widget-title,
.widget-title-home h3 {
font-size: 14px;
font-family: Verdana, Arial, Helvetica;
height: 13px;
line-height: 13px;
text-align: left;
}

.hide-240 {
display: none;
}

.show-240 {
display: block;
}
}

[TheDoc]

You were simply targeting the wrong class name. You want this:

.slideshow_container {
display: none;
}

Also, 240px is *way* too small. You’ll probably want to remove the slider around 600px.

[darrow]

Thanks Doc, I put it in for 480 and below for now. You rock!!

Darrow

[Author]

Posts