Yes thats fine

What do i need to do?

We had some issues with with max-width on the base.css file. Specifically, we have a script that automatically generates thumbnails for youtube videos with a ‘play’ button graphic. It also removes the ugly black bars with the thumbnails generated by Youtube for non-16:9 videos and then links the video into a lightbox style popup window to play them. Upon completion of the video, it automatically closes the lightbox window, so no nasty advertisement popups appear in your face. It does this automatically with no interaction by the website visitor. Smooth, nice and unobtrusive. So there are Ajax callbacks happening to refresh the page content at various stages. The play button graphic has difficulty appearing centered in the thumbnail image using the enfold template upon loading. Something that doesn’t occur when we hand-code a lot of Youtube video links in our own web page. We’ve loaded 40-50 Youtube thumbnails on a hand-coded page with no errors, picture perfect thumbnails and the play graphic dead centered in the thumbnail. And that’s working on Localhost too! Sniffing around your CSS, it may be narrowed down to the img CSS inside Enfold, but I haven’t completely nailed it down. In IE, the thumbnails simply wouldn’t show up, until I comment out the following line in base.css Line 152 max-width: 100%;

So how important is this line to Enfold’s performance?
Do you have the CSS properties set at 100% for a reason? Is it important for responsiveness perhaps?
Curious. Commenting out that line cured the IE problems, but we still have the issue with our transparent play graphic not centering in the middle of the thumbs.

I realize this is a site specific problem and probably not a major issue with 99% of the folks that have your template, but I would like some input about why the settings are set at 100% so we can look at options on our end. It would also be useful to know if we have overlooked some CSS properties inside the various Enfold files that may have an impact on what I’m describing. I apologize but I don’t have a link online for you to look at. I may be able to put up a test page on a server to illustrate what I’m talking about. It would also show you a rather nifty script that is far superior to the lightbox clone you’re using. It’s very full-featured, has it’s own Ajax library with lots of nifty functions for advanced webmasters and the documentation and support is like no other script online. It’s been around for a very long time too. I figure you folks are vested in your current lightbox script, so I haven’t brought it up, but this one is light years ahead of the one you’re using. Not even close. I changed the entire look of the lightbox to black with one property setting. I saw a thread asking about putting the “title” attribute into the caption area of your Masonry script.
With this script, it’s one simple attribute/option to set and you’re done. No javascript to code inside your functions. It snags the title attribute and loads it into the caption area automatically. It’s good-to-go out of the box.

Anyway, I thought I would expand on your question about max-width. This is one of the circumstances where we had issues with max-width, so if it’s not necessary for the performance of Enfold, then you folks might want to consider changing it due to it’s historical problems with IE.

Cheers,
Don

I forgot to mention that I was above to create that promo box with the correct border with some css, but I couldn’t figure out how to get the button styled correctly. I just added another promo box to my website page I sent you with what happens when I try to add the Enfold button to the promo box using the correct styling I am trying to achieve.