Jump to content

Instagram Block Full Bleed?

Recommended Posts

Posted

Is there a way to make an instagram block bleed to the edge of my site? I'd like the square images to take up the full width of the canvas without any padding. I'm using the Pacific template. Any tips would be greatly appreciated.

Thanks!

  • 2 years later...
  • Replies 1
  • Views 1.6k
  • Created
  • Last Reply
Posted

Not sure if anyone else is looking for this, but thought I'd share.

Not an ideal solution as it goes outside of margins to avoid having to remove padding and margins from all blocks. The values of the margins will need to be edited to fit your site but the following should give people a starting position.

On my end I was using the Carousel design:


//desktop
@media (min-width:961px)
{
.instagram-block{
 padding-left:0px !important;
 padding-right:0px !important;
 //margin-left:-40px !important;
 //margin-right:-40px !important;
 width:100vw !important;
 left:0% !important;
 margin-left:-168px !important;
}
}

//tablet
@media (max-width:960px){
   .instagram-block{
   padding-left:0px !important;
   padding-right:0px !important;
   width:100vw ;
   left:0% !important;
   margin-left:-17px !important;

 }
}

//mobile
@media (max-width:640px) {
 .instagram-block{
   padding-left:0px !important;
   padding-right:0px !important;
    width:100vw ;
   left:0% !important;
   margin-left:-3px !important;
 }
}

Hope this helps someone!

Archived

This topic is now archived and is closed to further replies.

×
×
  • 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.