Jump to content

Instagram Gallery on Mobile: Styling Issues for Video Posts

Recommended Posts

On mobile, I'm having issues with:

1. Applying the same styling that appears on image posts for video posts (border, box-shadow, border-radius)
2. Video posts appearing cut off
3. Generally stacking poorly with no spacing

Website: https://coral-seabass-fgw5.squarespace.com/
Location: Instagram Gallery Block in Footer
Device: Mobile (all browsers)
Screenshot attached
My code:

.instagram-block .slide a img,
.instagram-block .slide .sqs-video-overlay img {
	border: 2px solid #000 !important;
    border-radius: 15px !important;
    box-shadow: 10px 10px #E1CBEE !important;
}


@media screen and (min-width: 749px) {
.instagram-block .slide,
.instagram-block .sqs-video-overlay,
.instagram-block .sqs-gallery-block-grid,
.instagram-block .content-wrapper {
  overflow: visible !important;
}
}

 

Big thanks!

IMG_1438.PNG

Link to comment
  • Replies 5
  • Views 1.4k
  • Created
  • Last Reply

Top Posters In This Topic

Add this CSS code to fix on mobile

@media screen and (max-width: 767px) {
.instagram-block .slide, .instagram-block .sqs-video-overlay, .instagram-block .sqs-gallery-block-grid, .instagram-block .content-wrapper {
    overflow: visible !important;
}

.sqs-gallery-block-grid.sqs-gallery-thumbnails-per-row-5 
.sqs-gallery-design-grid-slide {
    height: 300px !important
}

.instagram-block .slide .sqs-video-overlay img {
    top: 0 !important;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
On 9/26/2023 at 12:18 PM, PEARLERwork said:

Thank you @tuanphan - nothing is cut off now, however it's showing like this: 

Screen Shot 2023-09-26 at 3.16.50 pm.png

Try this CSS code

@media screen and (max-width: 767px) {
.sqs-gallery-block-grid.sqs-gallery-thumbnails-per-row-5 
.sqs-gallery-design-grid-slide {
    height: 300px !important
}
.instagram-block .slide .sqs-video-overlay {
    height: auto 
}
.instagram-block .slide a img, .instagram-block .slide .sqs-video-overlay img {
    top: 0 !important;
    width: 90% !important;
    height: auto !important;
    left: unset !important;
}
.instagram-block .margin-wrapper, .instagram-block  .sqs-video-wrapper .intrinsic {
    width: 100%;
    height: 100%;
    padding-bottom: unset !important;
}
.content-wrapper.content-fit, .sqs-video-wrapper.video-fit {
     width: 100% !important;
    height: 100% !important;
    padding-bottom: unset !important;
    top: 0 !important;
    position: static !important
}
.instagram-block  .intrinsic-inner {
    padding-bottom: unset !important;
    width: 100% !important;
    height: 100% !important;
}
.sqs-layout .sqs-gallery-design-grid-slide {
    width: 50% !important;
}
.sqs-layout .sqs-gallery-design-grid-slide  * {
    box-sizing: border-box;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.