Thumbnails not showing correctly

I like this plugin very much and I want to use it for a new home page of my website, which uses the Hueman theme.

I am doing tests in this page. While I am working in it an I am logged, everything looks good, but actually it has problems with image display. Sometimes they are fully displayed, sometimes no at all, sometimes with a low opacity.

These are the shortcodes I used in the page:

[display-posts include_title=”true” include_excerpt=”true” excerpt_length=”40″ include_excerpt_dash=”false” image_size=”large” wrapper_class=”last-post-hero” posts_per_page=”1″ wrapper=”div”]

[display-posts image_size=”medium” wrapper=”div” wrapper_class=”display-posts-listing grid” meta_key=”_thumbnail_id” posts_per_page=”3″ offset=”1″]

After “Meditazioni guidate”:
[display-posts image_size=”medium” wrapper=”div” wrapper_class=”display-posts-listing grid” meta_key=”_thumbnail_id” posts_per_page=”3″ offset=”0″ tag=”meditazione-guidata” include_excerpt=”true” include_excerpt_dash=”false” excerpt_length=”27″ orderby=”rand”]

After “Letture sulla Meditazione, la Mindfulness, il Buddhismo”:
[display-posts image_size=”medium” wrapper=”div” wrapper_class=”display-posts-listing grid” meta_key=”_thumbnail_id” posts_per_page=”3″ offset=”0″ post_type=”page” include_excerpt=”true” include_excerpt_dash=”false” excerpt_length=”27″ ]

After “Come meditare”
[display-posts image_size=”medium” wrapper=”div” wrapper_class=”display-posts-listing grid” meta_key=”_thumbnail_id” posts_per_page=”3″ offset=”0″ tag=”come-meditare” include_excerpt=”true” include_excerpt_dash=”false” excerpt_length=”27″ orderby=”rand”]

etc.

This is the CSS I added to the page:

.display-posts-listing .title, .last-post-hero .title {
font-size: 1.375em;
color: #444;
margin-bottom: 10px;
margin-top: 12px !important;
font-weight: 400;
line-height: 1.5em;
-ms-word-wrap: break-word;
word-wrap: break-word;
}

.last-post-hero .title {
font-size: 1.75em;
color: #444;
margin-bottom: 10px;
margin-top: 12px !important;
font-weight: 400;
line-height: 1.5em;
-ms-word-wrap: break-word;
word-wrap: break-word;
display: block;
}
.title:hover {
color: #3b8dbd;
}
.excerpt {
font-size: 1em;
color: #aaa;
}

.su-slider-slide-title {
font-size: 1.375em;
}
.listing-item img {
width: 430px;
height: 182px !important;
object-fit:cover;
}
.listing-item img:hover {
opacity: 0.6;
}
.listing-item img: {
opacity: 1 !important;
}
.last-post-hero img {
height: 364px !important;
width: 100%;
}

• This topic was modified 6 years, 2 months ago by paolosub.

The page I need help with: [log in to see the link]