Flipped Image Card Block On Mobile

Screen+Shot+2020-01-01+at+7.03.51+PM.jpg

Description

Flip the image card block on mobile so the text comes first. This plugin uses css editor and works with all template families.


How To Install

From your Squarespace account, go to the Custom CSS Editor. Copy and paste the code below into the Custom CSS Editor box.

// Flipped Image Card Blocks //

@media (max-width: 640px){
  div .sqs-block-image .image-block-outer-wrapper.image-block-v2 {
    flex-direction: column-reverse !important;      
    display: flex !important;
  }
}

// Padding Between Text and Image //

@media (max-width: 640px){
.sqs-block-image .image-block-outer-wrapper.image-block-v2 .image-card {
    padding-bottom: 50px !important;
  }
}

Customize

You do not need to change any values.


Previous
Previous

Product Category Sidebar Style

Next
Next

Leaflet Banner Slideshow Arrow Style