Flipped Image Overlap Block On Mobile

Images7.1 Compatible

Jun 23

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 overlap 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 Overlap Block //

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