1. This instagram plugin has a code problem and I helped you by reporting this bug. This is not me requesting a custom theme. As you can see > You thanked me earlier for pointing it out to you here..
#post-583517
“wow would have never seen this issue. Thanks for making us aware about it. Regards,
Andy”

2. I now have this CSS. I needed both to sort of solve some of the issues. If you go to the site (which I have included below) you will see when you resize it is still a problem slightly. The thumbnails become misaligned.

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

and

.av-instagram-item {
width: 80px;
}

3. I or my clients which I have brought to Kriesi have bought 20+ themes. It is a significant investment. I’ll be happy to assist with making your job easier Andy and include links repeatedly in the private content area. Usually this has not been a problem in the past. This topic was to fix a problem with the code in the Instagram plugin.

Andy,

I’m very sorry. I don’t understand your english. You saying “this” and “it” and then you are telling me above to replace new CSS with old CSS. “replace it with the old one.” why would I replace new CSS with old CSS? Wouldn’t it be the other way around?

Here is what I have now. Please copy and paste the parts I need and I will delete the rest. Thank you.

.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;
}

.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;
}}

Andy,

I don’t know what to say. I have been struggling to get you to see things which are plainly obvious to me. The first several posts of this topic were me just trying to get you to see what I am seeing. There are several screenshots below clearly showing why the problem is.

I appreciate your help Andy, but in more than one topic, we struggle with basic communication. When other support reps answer my posts, I have no problem. I think at this point, it would be best if you would please forward this request, other existing requests and future requests to another support representative.

I do appreciate your help, but we are not working well together. I don’t know what else to do.

None of the screenshots below happen until we add the last CSS you gave me.
The uneven spacing does not occur until we add the last CSS.
BUT, without the last CSS the instagram thumbnails are not perfectly sized.

Thank you,

Jas

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

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;
}}

Hello again,
After playing with the codes for a while, I managed to show my thumbnail images as I expected.
Thank you again for the direction Rikard, İt sure helped.
You may mark this topic as solved if you wish.
Have a great day!

Hi Vinnie,
No it is not resolved. Lightbox is not working on a custom post type within the Enfold theme. The first code is the generated html for one thumbnail. The next code is the code in loop-index that calls the images.
Sorry if I am repeating myself but I don’t know how to answer your question unless I summarize what I have already written.
Thanks
Rob

Hi

All thumbnails are regenerated with EWWW Image Optimizer (IMO a better plugin) but the same problem is there… But this is not the problem because it works on “updated” phones. So the thumbnails are fine

AGAIN, this code is already in the style.css file in the child theme… And it don’t help

Any other ideas?

Hi Ismael,
I haven’t added another lightbox plugin.
It is adding the”lightbox-added” class but it doesn’t seem to be working. This is the generated html for one thumbnail:
<a style="position: relative; overflow: hidden;" class="lightbox-added" href="http://goldhillmuseum.org.uk/wp-content/uploads/2016/01/Shaftesbury-War-Memorial-1.jpg"><img src="http://goldhillmuseum.org.uk/wp-content/uploads/2016/01/Shaftesbury-War-Memorial-1-80x80.jpg" alt=""><span style="display: none;" class="image-overlay overlay-type-image"><span class="image-overlay-inside"></span></span></a>
The only difference I can see is that it is within a custom post type called Stories. The rest of the theme functionality seems to be okay. This is the loop-index.php:

$content_output .= '<div class="story-images">';
$content_output .=  '<span></br><strong>Images: </br></strong></span>';
	if( $images ): 
	$content_output .=  '<ul>';
		foreach( $images as $image ):
		$content_output .= '<li>';
		$content_output .= '<a href="'.  $image['url'].'">';
		$content_output .= '<img src="'. $image['sizes']['thumbnail'].'" alt="'.  $image['alt'].'" />';
		$content_output .= '</a>';
		$content_output .= '</li>';
		endforeach;
	$content_output .= '</ul>';
	endif; 
$content_output .= '</div>';

Thanks
Rob

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 10 years, 2 months ago by Jasmer.

Thanks Vinnie

Ok, this isn’t really what I was looking for – I was thinking more of a custom text box that I can add text to from the backend.

The issue I have is there’s a lot of white space on the right, and no description text showing. I can remove the custom code to show the description on the right again, but then it doesn’t overflow onto full width once it’s gone past the bottom of the image. Is there coding that would make it possible to make the text show as standard on the right under the SKU number, then when it reaches in-line with the bottom of the image/thumbnails that it continues down the page on full width?

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