Post preview image display issue

Hey icarogioiosi,

Thank you for the inquiry.

The featured images of the posts in the demo are still visible on mobile view when we checked. Please create a test page and provide the page URL in the private field so we can review it.

Best regards,
Ismael

Hi,

Thanks for that. Please try this in Quick CSS to display the featured image on mobile:

@media only screen and (max-width: 767px) {
  .responsive #top #main .sidebar, .responsive .post_author_timeline, .responsive .template-blog .blog-meta {
    display: block;
  }
}

Best regards,
Rikard

Hi,

The category page is blank when we checked, and no page is selected as the blog page in Enfold > Theme Options panel. Where can we find the blog page or the posts?

View post on imgur.com

Best regards,
Ismael

Hi,

Thank you for the inquiry.

You can add this css code to move the featured image above the post content and adjust its width:

@media only screen and (max-width: 768px) {

  /* Add your Mobile Styles here */
  .responsive .template-blog .blog-meta {
    display: block;
    float: none;
  }

  .responsive .template-blog .post .entry-content-wrapper {
    overflow: hidden;
    float: none;
    width: 100%;
  }

  .responsive .template-blog .blog-meta,
  .responsive .template-blog .blog-meta a {
    width: 100%;
    min-height: 200px;
    margin-bottom: 20px;
  }

  .responsive .big-preview img,
  .responsive .small-preview img {
    object-fit: cover;
  }
}

Best regards,
Ismael

Hi,

Thank you for the update.

To increase the size of the thumbnail, please add this filter in the functions.php file:

function avf_post_featured_image_link_mod( $image_link, array $current_post, $size ){
  $image_link = get_the_post_thumbnail( $current_post['the_id'], 'full' ); 
  return $image_link;
}
add_filter( 'avf_post_featured_image_link', 'avf_post_featured_image_link_mod', 10, 3 );

Then, include this css code inside the css media query to remove the dotted line:

.responsive #top #main .sidebar, .responsive .post_author_timeline, .responsive .template-blog .blog-meta {
    display: none;
}

Best regards,
Ismael

Hi,

Where did you add the code? The Appearance > Theme File Editor is not accessible, so we are not able to edit the functions.php file. Please provide the FTP details in the private field so that we can test the modification further.

Best regards,
Ismael

Hi,

Thank you for the update.

We actually removed the is_single conditional function from the avf_post_featured_image_link filter. Please update the code.

— https://kriesi.at/support/topic/post-preview-image-display-issue/#post-1488334

View post on imgur.com

Best regards,
Ismael

Hi,

Since we adjusted the size of the thumbnail, the aspect ratio changed. To address that, please add this css code:

.big-preview img, .small-preview img {
    object-fit: cover;
    height: 82px;
}

Please review the css code above to eliminate the dotted line and make the featured image full width on mobile view. You can also post the login details in the private field so we can check the modification.

Best regards,
Ismael

Hi,

Thank you for the info.

We adjusted the css in the Quick CSS field. Please make sure to purge the cache before checking the page.

Best regards,
Ismael