Flipped Image Card Block On Mobile

Images7.1 Compatible

Sep 15

Written By Ghost

Featured

The Ghost Team

Submitted This Plugin

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;
  }
}