Hi,

Please try the following in Quick CSS under Enfold->General Styling:

#barra-1 {
  border-top: 2px solid #56267a;
}

Best regards,
Rikard

Hey bur2000,

Thank you for the inquiry.

Unfortunately, it’s not possible to control the order of the items in the grid, especially when the size of the images varies. The sorting is dynamically calculated by the Isotope script, which is also used to sort the items by category. Have you tried using multiple Masonry elements?

Best regards,
Ismael

Hi!

You can add the filter in the functions.php file. This will sort the items based on the value of the Page Order field. You will have to enable this field manually for the portfolio items.

— https://kriesi.at/support/topic/masonry-not-displaying-cover-pictures/#post-1439624

Cheers!
Ismael

Hi,

Try to add this code in the functions.php file to add a custom sales badge above the product image.

add_filter('woocommerce_sale_flash', 'avf_woocommerce_sale_badge', 10, 3);
function avf_woocommerce_sale_badge($badge, $post, $product) {
    if ($product->is_on_sale()) {
        return '<span class="av-custom-sale-badge">Sale!</span>';
    }
    return $badge;
}

Then apply this css code:

.av-custom-sale-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    background: #7E9A47;
    color: white;
    padding: 5px 10px;
    font-size: 14px;
    font-weight: bold;
    border-radius: 5px;
    z-index: 10;
}

Best regards,
Ismael

Hi,

But now there are 2 short black horizontal lines left and right. What are they? How to get rid of them?

That is the border of the color section inside the footer page. Please refer to this thread: https://kriesi.at/support/topic/new-bug/#post-1479123

Best regards,
Ismael

Hi,

Try to add this css code:

body #header_main .av-logo-container {
    position: absolute;
    top: 0;
}

There might be other css rules applied to the original language but not to the EN version.

Best regards,
Ismael

Hi,

Thank you for the inquiry.

Have you tried using 1/3 Column elements? To center align the items in the second row, you can apply a left margin to the first item/column in the second row.

#top .flex_column.av-akkm-b2445ebeda64d34ec76acb1a0564417e {
    margin-left: 16.5%;
}

View post on imgur.com

Best regards,
Ismael

Hi,

That is probably due to this css code:

.responsive #top #main .avia-product-slider-container .products .product {
    margin: 0 0 20px 0;
    width: 100%;
}

We no longer see this issue when we checked the site live.

View post on imgur.com

If the issue persists on your end, you can include this code in the css media query:

.responsive #top #main .avia-product-slider-container .products .product {
    margin: 0 1% 1% 0;
    width: 49%;
}

Best regards,
Ismael

Hey dradoering,

Thank you for the inquiry.

Have you done any page speed optimization to the site? If you haven’t, please review the following articles:

— https://kriesi.at/support/topic/pagespeed-100100/
— https://gtmetrix.com/wordpress-optimization-guide.html

You can start by installing a cache plugin such as WP Super Cache or WP Rocket and compressing the images. The LCP should improve once you’ve completed the steps above.

Best regards,
Ismael

Hi,

We modified the code in the Quick CSS field:

@media only screen and (max-width: 768px) {
  #top .avia-slideshow.av-lu5z97j3-d1f957c8c38e449b8b56e5cb4753112f .avia-slideshow-slide img {
    min-height: 500px;
    object-fit: cover;
  }

  #top .av-m7nj2xd7-f8dc5edf704b129f594536c49dabd9b8.avia-slideshow li img,
  #top .av-m8474mmq-b8b082188475e1a03955aab66d3e8639 li img,
  #top .av-m7utj0fm-55a4085e08fb8dd95eeb6325426a31b7 li img
   {
    height: 300px;
    object-fit: cover;
    object-position: right;
  }
}

Result:

View post on imgur.com

We also disabled the Enfold > Performance > File Compression settings temporarily. You can enable it back when you’re done editing the site.

Best regards,
Ismael