Squarespace_Bedford_responsiveBanners.css

/*
  ===
  Responsive Banners and Homepage Carousel for Squarespaces Bedford Theme
  ===
  
  The sizes are based on banners that are 2048px x 420px with a 1024px x 420px safe zone (won't be cut off on small screens)
  
  To make a homepage carousel: https://support.squarespace.com/hc/en-us/articles/206545097-Formatting-special-banners
*/

/*
  Make homepage carousel banner responsive
*/
.collection-type-page.has-promoted-gallery #promotedGalleryWrapper .sqs-gallery-block-slideshow,
.collection-type-index.has-promoted-gallery #promotedGalleryWrapper .sqs-gallery-block-slideshow,
.collection-type-page.has-promoted-gallery .promoted-gallery-wrapper .sqs-gallery-block-slideshow,
.collection-type-index.has-promoted-gallery .promoted-gallery-wrapper .sqs-gallery-block-slideshow,
.collection-type-page.has-promoted-gallery #promotedGalleryWrapper .sqs-gallery-block-slideshow .sqs-gallery,
.collection-type-index.has-promoted-gallery #promotedGalleryWrapper .sqs-gallery-block-slideshow .sqs-gallery,
.collection-type-page.has-promoted-gallery .promoted-gallery-wrapper .sqs-gallery-block-slideshow .sqs-gallery,
.collection-type-index.has-promoted-gallery .promoted-gallery-wrapper .sqs-gallery-block-slideshow .sqs-gallery {
  height: 0 !important;
  padding-bottom: 420px;
}
@media (max-width: 1023px) {
  .collection-type-page.has-promoted-gallery #promotedGalleryWrapper .sqs-gallery-block-slideshow,
.collection-type-index.has-promoted-gallery #promotedGalleryWrapper .sqs-gallery-block-slideshow,
.collection-type-page.has-promoted-gallery .promoted-gallery-wrapper .sqs-gallery-block-slideshow,
.collection-type-index.has-promoted-gallery .promoted-gallery-wrapper .sqs-gallery-block-slideshow,
.collection-type-page.has-promoted-gallery #promotedGalleryWrapper .sqs-gallery-block-slideshow .sqs-gallery,
.collection-type-index.has-promoted-gallery #promotedGalleryWrapper .sqs-gallery-block-slideshow .sqs-gallery,
.collection-type-page.has-promoted-gallery .promoted-gallery-wrapper .sqs-gallery-block-slideshow .sqs-gallery,
.collection-type-index.has-promoted-gallery .promoted-gallery-wrapper .sqs-gallery-block-slideshow .sqs-gallery {
    padding-bottom: 38%;
  }
}

@media (max-width: 1023px) {
  .sqs-gallery-design-stacked-slide img {
    position: relative !important;
    top: 0 !important;
    left: -50% !important;
    width: 200% !important;
    height: auto !important;
  }
}

/*
  Make static banners on pages responsive
*/

.view-list .banner-thumbnail-wrapper, .collection-type-page .banner-thumbnail-wrapper, .collection-type-index .banner-thumbnail-wrapper {
  padding-bottom: 420px;
}

@media (max-width: 1023px) {
  .view-list .banner-thumbnail-wrapper, .collection-type-page .banner-thumbnail-wrapper, .collection-type-index .banner-thumbnail-wrapper {
    padding: 0;
  }
  
  .view-list .banner-thumbnail-wrapper #thumbnail, .collection-type-page .banner-thumbnail-wrapper #thumbnail, .collection-type-index .banner-thumbnail-wrapper #thumbnail {
    position: relative;
  }
  
  .view-list .banner-thumbnail-wrapper #thumbnail img, .collection-type-page .banner-thumbnail-wrapper #thumbnail img, .collection-type-index .banner-thumbnail-wrapper #thumbnail img {
    display: block;
    position: relative !important;
    top: 0 !important;
    left: -50% !important;
    width: 200% !important;
    height: auto !important;
  }
}