How Do I Make Facebook Feed In The Sidebar Responsive?

trevorellis

I am using the Uber template and I want to make the Facebook feed in sidebar 2 responsive. I have attached three images. Image01 shows the site being viewed at fullscreen where it looks completely fine. Image02 shows the site being viewed on a smaller screen and as you can see, the Facebook feed has NOT resized. Image03 shows that when the screen is small enough, it will push it underneath other elements on the page and this is also completely fine. My problem is shown in Image02. I want the Facebook feed to resize itself when the screen is smaller or alternatively always push itself below as soon as the screen is too small for it to fit on the page fully. What would be the best way to address this problem? What code can I put in the custom.css file? Any help would be greatly appreciated.

saguaros

trevorellis

You can use this custom CSS:

#Mod99 iframe {
    width: 100%;
}

add to the css file: [root]/templates/uber (your default template)/css/custom.css (Create this file if it doesn't exist)

trevorellis

saguaros Thanks for your reply. However, I do not believe that this having the desired effect. This is cropping the iframe so that some of the text is not visible (I have attached an image to show this). If it is not possible to have the iframe resize to be responsive, please can you give some code that will put the Facebook underneath other elements if it does not fit fully on the screen?

saguaros

trevorellis

You can open the file: [root]/templates/uber/tpls/blocks/mainbody/one-sidebar-right.php

change to this:

<?php
/**
 * @package   T3 Blank
 * @copyright Copyright (C) 2005 - 2012 Open Source Matters, Inc. All rights reserved.
 * @license   GNU General Public License version 2 or later; see LICENSE.txt
 */

defined('_JEXEC') or die;

/**
 * Mainbody 2 columns: content - sidebar
 */
?>
<div id="t3-mainbody" class="container t3-mainbody">
	<div class="row">

		<!-- MAIN CONTENT -->
		<div id="t3-content" class="t3-content col-xs-12 col-sm-12 col-md-12">
			<?php if($this->hasMessage()) : ?>
			<jdoc:include type="message" />
			<?php endif ?>
			<jdoc:include type="component" />
		</div>
		<!-- //MAIN CONTENT -->

		<!-- SIDEBAR RIGHT -->
		<div class="t3-sidebar t3-sidebar-right col-xs-12 col-sm-12 col-md-12 <?php $this->_c($vars['sidebar']) ?>">
			<jdoc:include type="modules" name="<?php $this->_p($vars['sidebar']) ?>" style="T3Xhtml" />
		</div>
		<!-- //SIDEBAR RIGHT -->

	</div>
</div>