Hi,
Try this solution, you may need to remove any other custom css for the mobile break point that you have tested, if this doesn’t help then remove this and any other custom css for the mobile break point and link to your site so we can check.

Best regards,
Mike

Hi,
Glad we were able to help, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.

Best regards,
Mike

Hi,
Thank you, I believe this is working now please check.
The solution was $autore = get_post_meta( $the_id, 'autore_articolo', true);
without the $the_id = avia_get_the_id();

Best regards,
Mike

Hey Julie,
Thanks for the link to your page, if you want the masonry images to always be a minimum height of 300px, then try adding this css:

#donation-gallery .av-masonry-item-with-image {
	min-height: 300px !important;
}

After applying the css, please clear your browser cache and check.

If you want the masonry element to set the height of the images based on the screen width and only show one row of images, try removing your custom css:

#donation-gallery {
    min-height: 300px !important;
    max-height: 300px !important;
    overflow: hidden !important;
    padding-bottom: 0 !important;
}

then add this code to the end of your child theme functions.php file in Appearance ▸ Editor:

function custom_donation_gallery_height_script() { ?>
  <script>
(function($){
  	$(window).on('resize', function() {
  	var dg = $('#donation-gallery .av-masonry-image-container').height();
 $('#donation-gallery').css({'height':dg+'px'});
  	}).trigger('resize');
})(jQuery);
</script>
  <?php
}
add_action('wp_footer', 'custom_donation_gallery_height_script');

this script finds the height of the images and then sets the height of the container to match and it adjusts on window resize.

Best regards,
Mike

Hi,
For the large gap between the header text and the main body of the linked page please try this css:

#top.archive .woocommerce-products-header #after_full_slider_2 .template-page {
	padding-bottom: 0;
}
#top.archive .template-shop .template-shop.content {
	padding-top: 0;
}

After applying the css, please clear your browser cache and check this page and others to ensure that this doesn’t cause a conflict on other pages, if it does please link to these pages so we can check and adjust.

Best regards,
Mike

Hi,
Sorry for our delayed response, to remove the opacity from the masonry element on hover, on the page you linked to, please try this css:

#top .av-hover-overlay-fade_out .av-masonry-entry:hover .av-masonry-image-container {
    opacity: 1;
}

For the second issue please try this css:

@media only screen and (min-width: 768px) and (max-width: 989px){
.responsive.html_mobile_menu_tablet.html_header_top.html_header_sticky #top #wrap_all #main {
    padding-top: 88px !important;
}
}

To center the masonry title please change this css:

/* Title Position and Caption Box Size */
.av-masonry-entry .av-masonry-entry-title {
text-align: center !important;
position: absolute;
bottom: 5px;
padding: 5px;
}
/* Title */
#top .av-masonry-entry-title {
font-size: 120% !important;
color: #555555;
line-height: 1.6;
font-weight: 600;
letter-spacing: .08em;
text-align: left !important;
text-shadow: 2px 2px 0px rgba(133,133,133,.4)!important;
margin-left: 5%;
}

to this:

/* Title Position and Caption Box Size */
.av-masonry-entry .av-masonry-entry-title {
text-align: center !important;
bottom: 5px;
padding: 5px;
}
/* Title */
#top .av-masonry-entry-title {
font-size: 120% !important;
color: #555555;
line-height: 1.6;
font-weight: 600;
letter-spacing: .08em;
text-shadow: 2px 2px 0px rgba(133,133,133,.4)!important;
width: 100%;
}

After applying the css, please clear your browser cache and check.

Best regards,
Mike

Hey Antonio,
Thanks for your question, I tested this solution and found that it still works.
I used this css to hide the metadata and to make the featured image 300px x 215px square:

#top.search-results .search-result-counter {
    padding: 0;
}
#top.search-results .search-result-counter img {
  border-radius: 0;
  height: 100%;
}
#top.search-results .search-result-counter {
    height: 215px;
    width: 300px;
    background: transparent;
}
#top.search-results .template-search.content .entry-content-wrapper {
    height: 215px;
}
#top.search-results #main .post-meta-infos {
   display: none;
}
#top.search-results .entry-content,
#top.search-results .post-title {
margin-left: 280px;
}
#top.search-results .post-entry {
    padding-bottom: 20px;
}

here was my results:

Best regards,
Mike

Hi,
Sorry that we were not able to help more, but glad Ismael was able to address this for you, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.

Best regards,
Mike

Hi,
Glad Nikko was able to help, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.

Best regards,
Mike

Hi,
Thanks for the feedback, we will leave this open for further feedback that you hear from WPML

Best regards,
Mike

Hi,
Thank you, please try adding this css to add some space above the product image for mobile devices.

@media only screen and (max-width: 767px) {
.responsive #top.single-product #main {
    margin-top: 60px !important;
}
}

After applying the css, please clear your browser cache and check.

Best regards,
Mike

Hi,
Glad Ismael could help, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.

Best regards,
Mike

Hi,
Thank you for the link to your site, I believe that your webhost has some caching enabled and it is connected to JetPack because JetPack has this message:
Jetpack is automatically managed for you.
I don’t want to disable to test because typically JetPack requires a specific plugin login to re-enable and I don’t know it.
So if you added JetPack and know the login, please disable, if your webhost added JetPack with a custom WordPress install, please ask them how to disable it and the server caching for testing.
This whole issue could be due to server caching and once cleared it may be solved, I don’t think that this css is part of the default theme because we don’t typically use !important;, I also don’t recognize your site’s caching file /_static/??- so I can’t advise about it.
Please post which host you are using and your host’s reply about JetPack and its caching in the Private Content area for our knowledge to help future users on the same webhost.

Best regards,
Mike

Hi,
I can’t see which file it is in because it looks like you are using caching, but here is a screenshot of what I see:

please disable all caching, server and any plugins, and include an admin login in the Private Content area and we will try to disable it for you.

Best regards,
Mike

Hey nasiusII,
Thanks for your question, our demo page is created in the Advanced Layout Builder using two blog elements:

The option for the first one is:
Blog Style: Single Author, big preview Pic (no author picture is displayed, feature image is big)
Blog Content length: Full Content

The options for the second one is:
Blog Style: Grid Layout
Define Blog Grid layout: Title and Excerpt

The blog style is set at: Enfold Theme Options ▸ Blog Layout ▸ Blog Styling choose Modern Business

Please try this.

Best regards,
Mike