Title: Instagram Widget
Last modified: August 21, 2016

---

# Instagram Widget

 *  Resolved [cavegirldiary](https://wordpress.org/support/users/cavegirldiary/)
 * (@cavegirldiary)
 * [12 years, 2 months ago](https://wordpress.org/support/topic/instagram-widget/)
 * My Instagram Widget only appears in a 1 column version. What can I do to change
   in a 2 or 3 column version?
    Thanks!
 * [http://wordpress.org/plugins/feed-them-social/](http://wordpress.org/plugins/feed-them-social/)

Viewing 15 replies - 1 through 15 (of 15 total)

 *  Plugin Author [slickremix](https://wordpress.org/support/users/slickremix/)
 * (@slickremix)
 * [12 years, 2 months ago](https://wordpress.org/support/topic/instagram-widget/#post-4518168)
 * This problem is usually caused from smaller sidebars. Although we don’t have 
   a setting option for this just yet, you can adjust the CSS to allow for at at
   least 2 to fit in a row.
 * If you send an example link I can point you to the CSS to change, or add an override
   in your theme style, so when you update FTS later that change is not overwritten.
 *  Plugin Author [slickremix](https://wordpress.org/support/users/slickremix/)
 * (@slickremix)
 * [12 years, 2 months ago](https://wordpress.org/support/topic/instagram-widget/#post-4518169)
 * This problem is usually caused from smaller sidebars. Although we don’t have 
   a setting option for this just yet, you can adjust the CSS to allow for at at
   least 2 to fit in a row.
 * If you send an example link I can point you to the CSS to change, or add an override
   in your theme style, so when you update FTS later that change is not overwritten.
 *  Plugin Author [slickremix](https://wordpress.org/support/users/slickremix/)
 * (@slickremix)
 * [12 years, 1 month ago](https://wordpress.org/support/topic/instagram-widget/#post-4518275)
 * Closing this since no response. We now have a custom CSS box in the settings 
   page of our plugin on wordpress admin panel. This should allow you to make any
   corrections to fit your theme!
 *  [amyelandry](https://wordpress.org/support/users/amyelandry/)
 * (@amyelandry)
 * [11 years, 11 months ago](https://wordpress.org/support/topic/instagram-widget/#post-4518309)
 * Hey Slickremix,
 * I’m having the same issue. My side bar is rather narrow, but even when I place
   the widget in my footer it does the same thing. Generally I like to fix images
   that are 200 pixels in width, so happy if I can get 2 Instagram images across,
   even if they’re 100 pixels wide each.
 * Any help? I’ve not activated the plug in on my site because it doesn’t look good
   as the long single feed.
 * Also, once the photos sit with two across, can I also control how many images
   are shown down the feed? Ideally I’d like 2 across, and 3 down.
 * Thank you!!
 *  [amyelandry](https://wordpress.org/support/users/amyelandry/)
 * (@amyelandry)
 * [11 years, 11 months ago](https://wordpress.org/support/topic/instagram-widget/#post-4518310)
 * P.s: I don’t know anything about coding, but I know how to find the CSS file 
   to edit within the plugin’s settings.
 *  Plugin Author [slickremix](https://wordpress.org/support/users/slickremix/)
 * (@slickremix)
 * [11 years, 11 months ago](https://wordpress.org/support/topic/instagram-widget/#post-4518311)
 * Send an example link and I’ll see if I can whip up a quick bit of css you can
   paste in the settings page to get it looking proper 🙂
 *  [amyelandry](https://wordpress.org/support/users/amyelandry/)
 * (@amyelandry)
 * [11 years, 11 months ago](https://wordpress.org/support/topic/instagram-widget/#post-4518312)
 * You can see the lay out I’d like if you scroll down Sarah Wilson’s home page 
   here: [http://www.sarahwilson.com](http://www.sarahwilson.com) It’s in her side
   bar – although she is not using FTS. But it gives you an idea of the layout I’d
   like.
 * Hope that’s what you need?
 * Thank you!
 *  Plugin Author [slickremix](https://wordpress.org/support/users/slickremix/)
 * (@slickremix)
 * [11 years, 11 months ago](https://wordpress.org/support/topic/instagram-widget/#post-4518313)
 * Gotcha. I just need to be able to see it on your site so I can make the CSS edit.
   Otherwise I can’t make it look perfect.
 *  [amyelandry](https://wordpress.org/support/users/amyelandry/)
 * (@amyelandry)
 * [11 years, 11 months ago](https://wordpress.org/support/topic/instagram-widget/#post-4518314)
 * Ok, I’ll get onto this today! Apologies for the delayed reply. I’ll confirm once
   it’s active on my site. Thank you again!
 *  [amyelandry](https://wordpress.org/support/users/amyelandry/)
 * (@amyelandry)
 * [11 years, 11 months ago](https://wordpress.org/support/topic/instagram-widget/#post-4518315)
 * Hey Slickremix – apologies for the delay!
 * I’ve update the widget on my site, on the right side bar:
    [http://www.amyelandry.com/blog](http://www.amyelandry.com/blog)
 * The code I’m using in the widget is:
 * [fts instagram instagram_id=4111544]
 * Interestingly, each photo is only showing a cropped image. It’d be great if it
   were possible to show each photo in it’s entirety (not sure if that’s possible?),
   and perhaps no border. But if that can’t be changed then not a problem at all.
 * I’d love 2 photos across (2 columns), and 3 down, or 2 down. I don’t mind really.
 * Thank you very much in advance!!
 *  Plugin Author [slickremix](https://wordpress.org/support/users/slickremix/)
 * (@slickremix)
 * [11 years, 11 months ago](https://wordpress.org/support/topic/instagram-widget/#post-4518316)
 * Ok here is a photo depicting the new look, in your case it would be better to
   just upload this file to the plugins folder since this customization is a bit
   more advanced. You will need to overwrite the existing css file to get it to 
   look like the photo.
 * [http://www.slickremix.com/wp-content/uploads/2014/04/Screen-Shot-2014-04-28-at-12.40.24-PM.png](http://www.slickremix.com/wp-content/uploads/2014/04/Screen-Shot-2014-04-28-at-12.40.24-PM.png)
 * Here is the location of the file you need to overwrite on your server.
    [http://amyelandry.com/wp-content/plugins/feed-them-social/feeds/instagram/css/styles.css](http://amyelandry.com/wp-content/plugins/feed-them-social/feeds/instagram/css/styles.css)
 * Below is code you will want to use. Just copy and paste all this over your existing
   style sheet as noted above.
 *     ```
       .clear {
            clear:both;
       }
       .instagram-placeholder ul, .instagram-placeholder li	{
       	padding: 0 !important;
       	margin: 0 !important;
   
       }
       .widget .instagram-placeholder ul, .widget .instagram-placeholder li	{
       	padding: 0 !important;
       	margin: 0 !important;
   
       }
       .instagram-placeholder p {
           margin:0;
           padding:0;
       }
       .instagram-placeholder	{
       	position: relative;
       	float: left;
       	z-index:0;
       	display: inline;
       	margin: 0px 20px 20px 20px;
       	font-family:'proxima-nova', 'Helvetica Neue', Arial, Helvetica, sans-serif !importatnt;
   
       }
       .widget .instagram-placeholder	{
       	margin: 0px 9px 10px 0px;
   
       }
       .instagram-image {
           width:150px;
           height:150px;
       	position:relative;
       	z-index:1;
       	background-color:#ccc;
       	display:block;
       }
       .widget .instagram-image {
           width:105px;
           height:100px;
       	position:relative;
       	z-index:1;
       	background-color:#ccc;
       	display:block;
       	background-size:100% !important;
       }
       .instaG-photoshadow {
         background-color: rgba(0, 0, 0, 0.1);
         bottom: 0;
         left: 0;
         position: absolute;
         right: 0;
         top: 0;
         border: 1px solid rgba(0, 0, 0, 0.12);
         z-index: 1;
         -webkit-transition: background-color 0.05s ease-out;
         -moz-transition: background-color 0.05s ease-out;
         -o-transition: background-color 0.05s ease-out;
         transition: background-color 0.05s ease-out;
         width:148px;
           height:148px;
        }
        .widget .instaG-photoshadow {
         width:103px;
           height:98px;
        }
       .instagram-placeholder:hover .instaG-photoshadow {
          background-color: rgba(0, 0, 0, 0);
         border: 1px solid rgba(0, 0, 0, 0.12);
         -webkit-transition: background-color 0.01s ease-out;
         -moz-transition: background-color 0.01s ease-out;
         -o-transition: background-color 0.01s ease-out;
         transition: background-color 0.01s ease-out;
         border: 1px solid rgba(0, 0, 0, 0.12);
         width:148px;
           height:148px; 
   
       }
       .widget .instagram-placeholder:hover .instaG-photoshadow {
         width:103px;
           height:98px; 
   
       }
       a.instaG-backg-link {
       	position:relative;
       	display:block;
       }
       .instagram-placeholder .date {
       	text-align: center;
       	margin-bottom: 5px;
       	font-size:12px;
       	height:20px;
       	line-height:20px;
       	font-weight:bold;
       	color:#888888;
       	position: relative;
       	z-index:1;
       	opacity:0;
       	pointer-events: none;
       	-webkit-transition: all 0.15s ease-out 0.1s;
       	-moz-transition: all 0.15s ease-out 0.1s;
       	-o-transition: all 0.15s ease-out 0.1s;
       	transition: all 0.15s ease-out 0.1s;
       	text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8);
       	display:none;
       }
       .widget .instagram-placeholder .date {
       	text-align: center;
       	margin-bottom: 5px;
       	font-size:11px;
       	height:15px;
       	line-height:20px;
       	display:none;
       }
       .instagram-placeholder .heart-comments-wrap ul {
       	height:20px;
       	margin:10px 0 0 0 !important;
       }
       .widgets .instagram-placeholder .heart-comments-wrap ul {
       	height:15px;
       	margin:6px 0 0 0 !important;
       }
       .instagram-placeholder .heart-comments-wrap li:first-child {
   
       }
       .instagram-placeholder .heart-comments-wrap li {
       	display: inline-block;
       	margin: 10px 0 0 0.5em !important;
       	pointer-events: none;
       	padding:0 0 0 16px !important;
       	line-height:10px !important;
       	font-size:12px !important;
       	font-weight:bold;
       	color:#888888;
       	position:relative;
       	z-index:1;
       	opacity:0;
       	-webkit-transition: all 0.15s ease-out 0.1s;
       	-moz-transition: all 0.15s ease-out 0.1s;
       	-o-transition: all 0.15s ease-out 0.1s;
       	transition: all 0.15s ease-out 0.1s;
       	text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8);
       }
       .widget .instagram-placeholder .heart-comments-wrap li {
       	display: inline-block;
       	margin: 6px 0px 5px 2px !important;
       	pointer-events: none;
       	padding:0 0 0 15px !important;
       	line-height:10px !important;
       	font-size:11px !important;
       	display:none;
       }
       .widget  .instagram-placeholder .heart-comments-wrap .instagram-image-likes {
            margin-right:4px !important;
       	display:none;
       }
       .instagram-placeholder .fts-backg	{
           position: absolute;
           z-index:0;
   
       	display:none;
           /* top: 25px; */
       	left: 0;
   
           /* height:150px; */
   
           /* width: 100%; */
   
           /* margin: -5px; */
   
           /* padding: 5px; */
       	background: #FFF;
       	-webkit-box-shadow: 0 0 0 1px rgba(0, 0, 0, .04), 0 1px 5px rgba(0, 0, 0, 0.1);
       	-moz-box-shadow: 0 0 0 1px rgba(0,0,0,.04), 0 1px 5px rgba(0,0,0,0.1);
       	box-shadow: 0 0 0 1px rgba(0, 0, 0, .04), 0 1px 5px rgba(0, 0, 0, 0.1);
       	-webkit-transition: all 0.15s ease-out 0.1s;
       	-moz-transition: all 0.15s ease-out 0.1s;
       	-o-transition: all 0.15s ease-out 0.1s;
       	transition: all 0.15s ease-out 0.1s;
       }
       .widget .instagram-placeholder .fts-backg	{
           /* position: absolute; */
           /* z-index:0; */
   
           /* top: 20px; */
   
           /* left: 0; */
   
           /* height:100px; */
   
           /* width: 100%; */
   
           /* margin: -5px; */
   
           /* padding: 5px; */
   
           /* background: #FFF; */
       	font-size:11px;
       }
       .widget .date {
            font-size:11px;
       }
       /* .instagram-placeholder:hover .fts-backg	{
           margin: -28px -12px;
       	padding: 8px 12px;
       	height:193px;
       	-webkit-transition-delay: 0s;
       	-moz-transition-delay: 0s;
       	-o-transition-delay: 0s;
       	transition-delay: 0s;
       	-webkit-transition-duration: 0.1s;
       	-moz-transition-duration: 0.1s;
       	-o-transition-duration: 0.1s;
       	transition-duration: 0.1s;
       	-webkit-box-shadow: 0 0 0 1px rgba(0,0,0,.04), 0 1px 5px rgba(0,0,0,0.2);
       	-moz-box-shadow: 0 0 0 1px rgba(0,0,0,.04), 0 1px 5px rgba(0,0,0,0.2);
       	box-shadow: 0 0 0 1px rgba(0,0,0,.04), 0 1px 5px rgba(0,0,0,0.2);
       } */
   
       .widget .instagram-placeholder:hover .fts-backg	{
           margin: -22px -10px;
       	padding: 5px 10px;
       	height:135px;
       	display:none;
       }
       .instagram-image-likes	{
       	background:url(../images/hearts-instagram.jpg) no-repeat;
   
       }
       .instagram-image-comments	{
       	background:url(../images/comments-instagram.jpg) no-repeat;
       }
   
       .instagram-placeholder:hover .date, .instagram-placeholder:hover .instagram-image-likes, .instagram-placeholder:hover .instagram-image-comments {
       	opacity: 1;
       	z-index:1;
         -webkit-transition-delay: 0.1s;
         -moz-transition-delay: 0.1s;
         -o-transition-delay: 0.1s;
         transition-delay: 0.1s;
       	display:none;
       }
       @keyframes fade {
           from { opacity: 1.0; }
           50% { opacity: 0.5; }
           to { opacity: 1.0; }
       }
   
       @-webkit-keyframes fade {
           from { opacity: 1.0; }
           50% { opacity: 0.5; }
           to { opacity: 1.0; }
       }
       ```
   
 *  [amyelandry](https://wordpress.org/support/users/amyelandry/)
 * (@amyelandry)
 * [11 years, 11 months ago](https://wordpress.org/support/topic/instagram-widget/#post-4518317)
 * Legend!
 * Although, I cannot seem to find the right file to overwrite.
 * I’m checking here [http://amyelandry.com/wp-admin/plugin-editor.php](http://amyelandry.com/wp-admin/plugin-editor.php)
 * I’ve gone into the plug in settings, but file doesn’t exist down the right side,
   where it shows the list of current plug in files.
 * All that shows up are the following:
 * feed-them-social/feed-them.php
    feed-them-social/admin/feed-them-system-info.
   php feed-them-social/admin/feed-them-settings-page.php feed-them-social/readme.
   txt feed-them-social/includes/feed-them-functions.php feed-them-social/js/powered-
   by.js feed-them-social/css/powered-by.css
 *  Plugin Author [slickremix](https://wordpress.org/support/users/slickremix/)
 * (@slickremix)
 * [11 years, 11 months ago](https://wordpress.org/support/topic/instagram-widget/#post-4518318)
 * oh yeah that editor is such a pain, never shows the subfolders. You should be
   able to find the file by using the File Manager on your hosting account. Or by
   logging into your server with your FTP credentials. Wish I had an easier way 
   for you, sorry.
 *  [amyelandry](https://wordpress.org/support/users/amyelandry/)
 * (@amyelandry)
 * [11 years, 11 months ago](https://wordpress.org/support/topic/instagram-widget/#post-4518323)
 * So when I add this into my style.css is that the stylesheet for my theme, or 
   specifically for my plugin (as originally suggested when going through my wordpress
   instead of cpanel)?
 * Hope that makes sense! Just want to be sure I’m adding it to the correct file.
   I couldn’t find the plugin file – but perhaps that is because the widget is no
   longer active?
 *  Plugin Author [slickremix](https://wordpress.org/support/users/slickremix/)
 * (@slickremix)
 * [11 years, 11 months ago](https://wordpress.org/support/topic/instagram-widget/#post-4518324)
 * No problem… Update the CSS in your plugin. Here is the path again.
    [http://amyelandry.com/wp-content/plugins/feed-them-social/feeds/instagram/css/styles.css](http://amyelandry.com/wp-content/plugins/feed-them-social/feeds/instagram/css/styles.css)

Viewing 15 replies - 1 through 15 (of 15 total)

The topic ‘Instagram Widget’ is closed to new replies.

 * ![](https://ps.w.org/feed-them-social/assets/icon-256x256.jpg?rev=998039)
 * [Feed Them Social - Social Media Feeds, Video, and Photo Galleries](https://wordpress.org/plugins/feed-them-social/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/feed-them-social/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/feed-them-social/)
 * [Active Topics](https://wordpress.org/support/plugin/feed-them-social/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/feed-them-social/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/feed-them-social/reviews/)

## Tags

 * [column](https://wordpress.org/support/topic-tag/column/)
 * [widget](https://wordpress.org/support/topic-tag/widget/)

 * 15 replies
 * 3 participants
 * Last reply from: [slickremix](https://wordpress.org/support/users/slickremix/)
 * Last activity: [11 years, 11 months ago](https://wordpress.org/support/topic/instagram-widget/#post-4518324)
 * Status: resolved