Jump to content

7.1 Instagram feed shows 7 posts but last one is always blank?

Recommended Posts

Site URL: https://carrot-cricket-zj9b.squarespace.com/

Hi, this is for https://carrot-cricket-zj9b.squarespace.com/ with the temp pass: LazarusODF

I made some adjustments to the code to remove all the space between and on either side of the feed, and add an overlay with the on-brand colour. It is set to show 7 posts on a single line. However, the 7th block remains white with no overlay, and even if I change the number of posts displayed to 14, it just shows two lines and for BOTH lines, the 7th post is white with no overlay showing.

It's almost as if the section is no longer full width but just fully aligned right with the perfect size for a single post left as margin on the right...

Any ideas?

I adjusted the instagram feed with the following code:

// Instagram feed overlay //
div#block-f8ada25bd4d266a04a60 .margin-wrapper {
   position: relative;
}
div#block-f8ada25bd4d266a04a60 .margin-wrapper a:before {
   position: absolute;
   content: "";
   background: rgba(0,0,0,0.5);
   left: 0;
   right: 0;
   top: 0;
   bottom: 0;
   z-index: 100;
   display: block;
}
div#block-f8ada25bd4d266a04a60 .margin-wrapper a:hover:before {
   opacity: 0;
}

// Instagram feed full width //
[data-section-id="5f29899f4cbd4c3a7fb4d0c7"] .content-wrapper {
    padding-left: 0 !important;
    padding-right: 0 !important;
    max-width: 100%;
    padding-bottom: 0 !important;
}
div#block-f8ada25bd4d266a04a60 {
    padding-bottom: 0;
}

 

Link to comment
  • Replies 3
  • Created
  • Last Reply

Top Posters In This Topic

*The site is now at www.odfchurch.org, no password.*

Yes, @tuanphan, without the code the 7th one shows up as it should. Looks like the issue is within this section here, but I can't see why. Any thoughts?

 

// Instagram feed full width //
[data-section-id="5f29899f4cbd4c3a7fb4d0c7"] .content-wrapper {
    padding-left: 0 !important;
    padding-right: 0 !important;
    max-width: 100%;
    padding-bottom: 0 !important;
}
Link to comment

Remove above code & add this new code (this code use padding-bottom: 1px; & margin-bottom: -1px)

div#block-f8ada25bd4d266a04a60 .margin-wrapper {
   position: relative;
}
div#block-f8ada25bd4d266a04a60 .margin-wrapper a:before {
   position: absolute;
   content: "";
   background: rgba(0,0,0,0.5);
   left: 0;
   right: 0;
   top: 0;
   bottom: 0;
   z-index: 100;
   display: block;
}
div#block-f8ada25bd4d266a04a60 .margin-wrapper a:hover:before {
   opacity: 0;
}
[data-section-id="5f29899f4cbd4c3a7fb4d0c7"] .content-wrapper {
    padding-left: 0 !important;
    padding-right: 0 !important;
    max-width: 100%;
    padding-bottom: 1px !important;
}
div#block-f8ada25bd4d266a04a60 {
    padding-bottom: 0;
    margin-bottom: -1px;
}

 

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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.