Video thumbnails do not align. Can not fix issue. Problem with theme portfolio layout

[chrisware24]

Hello

When the page loads, the video thumbnails do not load evenly. They load with white spaces around them.

Also, when I click the green + sign, it seems to resolve the issue.

I also added this code that was reccomended:
if (window.jQuery.xIsotope) window.jQuery.xIsotope.settings.animationEngine = ‘css’;

I have attached a screen shot of what I am seeing. Please note, I have cleared my cache and I do not have a cache plugin enabled.

VIDEO

[ruenel]

Hello Chris,

Thanks for writing in! Upon inspection of your site, it seems that the Add Expire Headers plugin is caching the styling which could be the cause of the issue. Please do the following:

• Testing For Theme Related Issue
• Testing For Plugin Conflict
• Css/Js Customization
• Disabling Cache
• Disabling Cdn
• Version Compatibility

If this does not work, we would love to investigate further. You can create a secure note in your next reply with the following info:
– Link to your site
– WP login URL
– WP username
– WP password
– WP Administrator Role
– Confirmation that we can access and make changes to your site

To know how to create a secure note, please check this out: How The Forum Works

Best Regards.

[chrisware24]

Hello

Thank you for helping. I disabled Add Expire Headers plugin and deleted my cache inside cornerstone. I also cleared my browser cache. Neither helped me. I sent you a secure note. The issue is on the video page that has the portfolio.

VIDEO

Thanks for helping!

[ruenel]

Hey Chris,

After investigating, I found out that you added this custom CSS:

.x-portfolio .entry-extra,
.x-portfolio .entry-info {
    float: none;
    margin:0 auto;
}

.x-portfolio .entry-extra {
    width:75%;
}

.x-portfolio .entry-info {
   width:75%;
}

.x-iso-container-posts .entry-title {
    min-height: 50px;
}

.x-iso-container-posts .entry-thumb img {
    width: auto !important;
    max-height: 390px !important;
}

These CSS code is creating a conflict with your Portfolio page. Temporarily remove this codes and test your site again.

Thank you.

[chrisware24]

Hello

I removed the CSS on the page that you mentioned here. That didnt resolve it. I then removed the rest of the CSS that was there. This also didn’t fix this issue. Any idea what else could be causing this?

Thanks for helping…

[ruenel]

Hello Chris,

I have been investigating the issue and I found out that your Jetpack plugin’s setting is causing it.

The settings has now been enabled and the video grid is now displaying properly.

Check your page now.

[chrisware24]

Thank you!!! Working. Should I add this CSS back in the corner stone page? I think it was written for me to solve this issue, I don’t remember. I also remember an issue with the thumbnails flashing red as they loaded.

Any idea what this CSS would do?

.x-portfolio .entry-extra,
.x-portfolio .entry-info {
float: none;
margin:0 auto;
}

.x-portfolio .entry-extra {
width:75%;
}

.x-portfolio .entry-info {
width:75%;
}

.single-x-portfolio ul.x-ul-icons li.x-li-icon a {
font-size:13px;
}
.single-x-portfolio li.x-li-icon {
line-height: 15px;
}
@media screen and (min-width: 767px) {
.single-x-portfolio .x-ul-icons, .single-x-portfolio .x-entry-share {
display: inline-block;
vertical-align: top;
width: calc(50% - 1.355em);
}
}
.single-post .x-container.max.width.offset {
max-width: 850px; /Adjust 900px as necessary/
}

.x-iso-container-posts .entry-title {
min-height: 50px;
}

.x-iso-container-posts .entry-thumb img {
width: auto !important;
max-height: 390px !important;
}

[ruenel]

Hello Chris,

You can put back the CSS code and check again the portfolio page. If the issue will not comeback then it is safe for you to use the code which I think it is very much resolved at the moment because the CSS code seems to be targeting a different page layout of your site.

Best Regards.