Increasing the Slideshow Container?

Hikin' Mike · August 14, 2013

Is there a way to increase the container of the home page slideshow (960px) without breaking the smaller devices? Right now I'm using this on my home page:

    /* Slideshow */
.sm-page-widget-slideshow .sm-tile-content {
    overflow: visible;
    }
.sm-page-widget-slideshow .sm-page-widget-body .sm-slideshow .sm-tile-wrapper  {
    width:940px !important; 
    height:360px !important;
    }    
.sm-page-widget-slideshow .sm-page-widget-body .sm-tile-wrapper.sm-tile-photo {
    margin-top: 0 !important;
    }    
.sm-page-widget-slideshow .sm-page-widget-body .sm-slideshow {
    height: 359px !important;
    border: 2px solid #000;
    box-shadow: 5px 5px 5px #1e1e1e;
    -webkit-box-shadow: 5px 5px 5px #1e1e1e;
    -moz-box-shadow: 5px 5px 5px #1e1e1e;
    }
.sm-page-widget-slideshow .sm-page-widget-body .sm-tile-single.sm-tiles-uncropped .sm-image {
    width: 100%;
    }

It works great, buy I noticed when I tried it on my daughter's iPod (I don't own a mobile device), the slideshow is WAY too big.

Ferguson · August 14, 2013

Media/size specific CSS?

Someone showed me how for suppressing side logo boxes on my site, as follows (the class names are specific to a site/page). Perhaps put different settings in with different max widths?

@media screen and (max-width: 1023px) {
  .sm-page-widget-1031122, .sm-page-widget-352389 {
    display: none;
  }
}

Hikin' Mike · August 14, 2013

Ferguson wrote: »
Media/size specific CSS?

Someone showed me how for suppressing side logo boxes on my site, as follows (the class names are specific to a site/page). Perhaps put different settings in with different max widths?
@media screen and (max-width: 1023px) {
  .sm-page-widget-1031122, .sm-page-widget-352389 {
    display: none;
  }
}

I tried a similar approach, but it didn't work. I may have screwed up something though...

!

Increasing the Slideshow Container?

Comments