Articles in this section

See more

Force Instagram images and video to be square

  • Updated

We do not provide support for hacks, so use them at your own risk. If you're not comfortable with coding, we recommend against using this workaround.

 

Instagram doesn't provide a great way to display non-square images or video as a square without cropping. However, if you'd like to force Instagram images and video to fit a square ratio, add this code into the global CSS editor under Customize > Advanced > Custom CSS:  

.instagram-image img {
 position: absolute !important;
 left: 50% !important;
 top: 50% !important;
 transform: translate(-50%, -50%) !important;
 object-fit: cover !important;
 height: 100% !important;
}

.instagram-video {
 display: block !important;
 overflow: hidden !important;
 height: 375px !important;
 position: relative !important;
}

.instagram-video .mejs-video {
 position: absolute !important;
 left: 50% !important;
 top: 50% !important;
 transform: translate(-50%, -50%) !important;
 object-fit: cover !important;
}

Be sure to save and publish. Now your non-square Instagram images and video will be displayed in a square ratio!

Related articles