Instagram Widget Not Recognizing Column and Photos settings

Oddly, it is working now HOWEVER.. Your screenshot and mine both show 2 problems.

1. The spacing between the photos is badly crooked and misplaced.

2. The layout is way too large. I have the setting at “thumbnail” for the photos. The grid and photos should be 50% smaller approximately.

Also, I tried changing the setting from thumbnail to small and the photos stay the same size. It is set on thumbnail now.

Any ideas?

Thanks

• This reply was modified 8 years, 11 months ago by Jasmer.

That helped but..

1. The spacing between the photos is still uneven. Look closely. The top border is not a straight line either.

2. The CSS removed the hover animation indicating that the photo is clickable. there is no hover effect now.

Is this just a problem with the plugin? Bug?

Thank you,

J

This worked for #1 but #2 is still a problem

“2. The CSS removed the hover animation indicating that the photo is clickable. there is no hover effect now.”

How do I get the hover effect back so the website visitors know it is a clickable image? When hovering it used to turn white and have an icon. It is gone now.

• This reply was modified 8 years, 11 months ago by Jasmer.

No I did not. See below..

The overlay is there until I add the code, then it disappears.

When I delete the code, the overlay returns.

The code for some reason is causing this.

Any ideas?

Thank you,

Jasmer

Thanks!

One last thing. I need to create space between the Title “Instagram” and the instagram feed. It is not proportional to the spacing on the other two feeds in the footer. Perhaps 10px.

Jas

Thanks! Two issues.

1. The Instagram plugin packaged with Enfold is broken. As you can see in the screenshot, even after all the CSS we used the spacing and placement is off. This plugin is buggy. I’ve also looked at it on the Enfold demo page and the same problems are present. Please let Kriesi know.
https://dl.dropboxusercontent.com/u/1049926/Screen%20Shot%202016-01-31%20at%2011.56.51%20PM.png

2. How do I raise the Twitter block closer to the Twitter title? I tried the code below but it will only work by making the space larger. It won’t work in making the space smaller.

iframe#twitter-widget-0.twitter-timeline.twitter-timeline-rendered
{
    padding-top: -10px !important;
}

Helloooo :)

Solution?

Hi Andy,

Here is exactly what I need. I need all the thumbnails in the instagram block to be exactly the same size to the pixel. Right now if you look closer, you will see that the image blocks, and the spacing are off, both on the desktop site and the mobile site. Before I added all the CSS above, it was very obvious. The CSS made it better but does not fix the problem completely. This is a bug in the plugin. I have said this all throughout this post several times.

The image blocks in the plugin are affected by the dimensions of the image. This plugin is expecting all images that are on instagram to be perfectly square and they are not. It is possible and people frequently upload images to instagram in landscape dimension. Instagram has not, for a long time, forced the square dimension. Until this bug in this plugin is fixed I would like CSS to make these blocks exactly the same size to the pixel.

Here is your demo. If you look at it you will see that the blocks are not evenly spaced. Especially around the center block.
http://kriesi.at/themes/enfold-lifestyle-blog/

Please see my annotated screenshot below.

Please alert whomever the developer is for this plugin of this bug in the code. In the mean time, if you have CSS that will fix this I’d appreciate it.

Thank you,

Jas

Hi Andy,

You are correct. The screenshot looks exactly like my website. And it’s wrong.

I’ve zoomed in so you can see what I see. See screenshot below.

The photo thumbnails are NOT spaced evenly. They are not pixel perfect and with my perfect vision, on a retina Macbook, I can see the inconsistencies easily. Very easy to see.

I have numbered the screenshot:
Thumbnail 1 and 2 are at equal height. Thumbnail 3 is not. It is a few pixels higher.
Spacing A is different than spacing B by a few pixels.

If you are unable to see what I am talking about in this screenshot will you please ask another option of one of your colleagues to take a look?

This plugin has a bug in the code. The Instagram thumbnails are both uneven on my site and they are uneven on your demo page here >
http://kriesi.at/themes/enfold-lifestyle-blog/

Again, I can easily see the inconsistencies. As soon as I activated the widget, I saw it in one second. this plugin absolutely needs a recode. There are many out there for sale $$ that do not have this issue. As I am developer, I would prefer to use the free plugin that comes with Enfold and have it work as expected.

Thank you for your help Andy,

Jas

Andy,

This CSS caused a problem so I removed it.

1. The CSS worked on the instagram widget sort of, but it also made every image using lightbox at 80×80 (I changed that value). So the Featured Image on all posts was a thumbnail. Can we change that code to be reserved ONLY to the Instagram Widget?

2. When I make the browser window smaller, the instagram widget then becomes distorted. (See Screenshot below) So this code does not keep the thumbnails proportional.

2. This is all the code we have created for this to get it in the correct location and sized. Seems like a lot. Is this all necessary to accomplish this or is this a bit overkill? The padding is necessary to keep the element from crowding the “INSTAGRAM” wigit title.

/*Footer*/

.av-instagram-pics.av-instagram-size-thumbnail {
    width: 70%;
    padding-top: 12px !important;
}

.av-instagram-item {
    padding: 1px;
}

.av-instagram-item:hover a {
    opacity: .5;
} /*instagram hover effect*/

.widget-easy-twitter-feed-widget-container .row {
    margin-bottom: 0;
}

a.lightbox-added ing { (REMOVED)
width: 80px;
height: 80px;
} /*instagram dimension*/

• This reply was modified 8 years, 10 months ago by Jasmer.

Hi Andy,

The code below makes things worse. It causes other problems. I left this CSS on the site. Resize your desktop browser at different sizes and take a look at what happens. I used 80px x 80px by the way. 60 x 60 looked bad.

.av-instagram-pics.av-instagram-size-thumbnail a.lightbox-added {
width: 80px;
height: 80px;
}

@media only screen 
  and (min-width: 414px) 
  and (max-width: 736px) {
.av-instagram-pics.av-instagram-size-thumbnail a.lightbox-added {
width: 80px;
height: 80px;
}}

Did you go to the site and look at it? The thumbnail grid becomes separated at different screen sizes. The instagram box changes completely and the spacing between the thumbnails is different vertically than it is horizontally. You won’t understand what I am saying unless you try it yourself.

Please try to resize your window at different positions. You will see the problem. The px have nothing to do with this issue.

Thanks,

Jas