Jump to content

How to adjust dimensions on embedded Facebook feed in responsive container?

Recommended Posts


I am having trouble fine-tuning my responsive container-embedded Facebook Feed. I am using the Impact (Brine) template on Squarespace.

Problem: I want to make the container/feed both wider and taller on desktop view, but let it shrink responsively for smaller screens, tablets, and mobile devices. So far I have not been able to quite figure out how to both make it larger where I want it AND make it smaller where I want it without funky hidden overflow problems. Can anyone point me in the right direction?



Here is the page in question: https://www.oldgrowthforest.com/latest-news.

Here is the code block code I have on that page:

1   <center>2       <div id="fb-root"></div>3   <script async defer crossorigin="anonymous"           src="https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v3.3"></script>4   <div class="resp-container-fb">5     <div class="resp-facebook">6       7   8     <div class="fb-page" data-href="https://www.facebook.com/oldgrowthforestnetwork/" data-tabs="timeline" data-width="" data-height="1000" data-small-header="true" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="false"><blockquote cite="https://www.facebook.com/oldgrowthforestnetwork/" class="fb-xfbml-parse-ignore"><a href="https://www.facebook.com/oldgrowthforestnetwork/">Old Growth Forest Network</a></blockquote></div>9       </div>10      </div>11  </center>

and here is the Custom CSS I have added regarding my container:

1   .resp-container-fb {2       position: relative;3       overflow: hidden;4       padding-top: 150%;5   }6   7   .resp-facebook {8       position: absolute;9       top: 0;10      left: 0;11      width: 100%;12      height: 100%;13      border: 0;14    15  }

Sorry, I am also having trouble displaying this code properly!

Link to comment
  • Replies 2
  • Views 1.2k
  • Created
  • Last Reply
  • 4 weeks later...


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.