Hi everyone.
The proposed solution seems perfect for my case at the moment.
Thank you @guenni007 for your further contribution!
Regards.

Hi everyone.
To save time, I did some testing on my own.

The code Ismael suggested

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

I changed it to the following:

.big-preview img, .small-preview img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
display: block;
}

And this solved the issues with the fixed 82px height in posts.

The following is the remaining code (changed from the one Ismael proposed on August 20th) that seems to fix the issues I reported today regarding what was displayed when opening posts on both devices.

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

.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%; 
height: auto !important; /* follows natural pitch */ 
min-height: unset !important; 
display: block; 
overflow: hidden; 
} 

.responsive .big-preview img, 
.responsive .small-preview img { 
width: 100%; 
height: auto; /* maintain aspect ratio */
object-fit: contain; /* do not crop, display entire image */
display: block;
}

.big-preview img, .small-preview img {
width: 100%;
height: auto; /* maintain aspect ratio */
object-fit: contain; /* do not crop, display entire image */
display: block;
}
}

Since I’m not an expert on CSS, I’m wondering if you see any obvious errors.
If not, this solves my problem for now.

Hi Ismael, thanks for your support.
This latest code seems to have solved the problem on desktop, and the image display in the list is now correct.

Unfortunately, the list previews on smartphones are now incorrect.

And when you open the post on both desktop and smartphone, the image is reduced in height (probably to the 82px value indicated in the code).

Regarding the login details, I sent them on August 15th, but you’ll find them listed again in the private field because I think your direct access is essential.

Regards.

Hi Ismael, thanks for your support.

Where did you add the code?

In the child’s functions.php file, as you indicated.

The Appearance > Theme File Editor is not accessible.

This hosting provider doesn’t enable it automatically, but I made a change and it is now active, as shown in the image where the inserted code is also highlighted.

Regards.

Hi Rikard.
Ismael’s response was conclusive, so the topic can be closed.
Regards.

Hi Ismael.
Thanks for your time.

“To increase the size of the thumbnail, please add this filter in the functions.php file…” Unfortunately, I don’t see any differences from before, even by clearing the device cache.

“Then, include this CSS code inside the CSS media query to remove the dotted line…” The dotted line does indeed disappear, but unfortunately, the images are no longer visible either.

Regards.

Hi Ismael.
Thanks for your reply.
The images are indeed moved above the title, but they are blurry.
The theme is probably using a small image, which is enlarged to full screen with the code provided, thus degrading the quality of the photos.
Furthermore, in landscape view on a smartphone, the image origin is not the center but the top margin.
And the CSS code provided does not resolve the dotted line issue.

Hi Rikard, thanks for your time.
I had considered using Blog Posts, but this requires you to specify the post’s category each time you create it.

Currently, this is done automatically for posts added to the demo (therefore, without Advanced Layout).

Hi Rikard.
Following your instructions, I found the tools to use the Advanced Editor to create posts similar to the basic ones provided with the demo.
However, I can’t find the one needed to get a list of suggested articles in the same category (you might be interested in…).

Could you please tell me where to find it?

Great Rikard, it works for me.
Is there a way to move the image above the title and have the text fit the width of the screen? The text space is very limited.

Is it possible to remove the dotted line that “connects” the images?

Thanks for your time.

Hi Ismael.
The site isn’t online yet, so I created a user you can use to log in.
You can find the details in the private field.
Thanks!

Thank you all for your contributions.
Not one, but two solutions. Great!
I’ve tried both, and they work great.
I just need to figure out which one is best for the client so they can be independent and use the simplest one for their abilities.
Thanks for your time!

Hi Guenni007.
The code inserted according to your instructions in the child-theme functions.php obviously displays the title on all pages.

add_action(‘ava_after_main_title’, function() {
echo ‘<div class=”main_color my_title_container”>’;
echo ‘<h2 class=”page-title”>’. get_the_title() .'</h2>’;
echo ‘</div>’;
});

Is it possible to hide it on a page?

Hi Guenni007.
Thanks for the suggestion, but unfortunately it doesn’t work.
That line only appears after the title becomes visible for the code you indicated, so it’s probably related to that and not the container.

Hi Ismael.
It works perfectly for me.
Is there a way to enlarge the image to its original size by clicking on it?
Thanks for your time.