Hi,

We’ve found some invalid CSS code in the Quick CSS field. Do you have a site backup? We’d like to correct the css, but we don’t want to risk breaking anything in the process.

Please create a site backup or restore point, and then we’ll adjust the css modifications.

Best regards,
Ismael

Hey Martina,

Thank you for the inquiry.

Did you translate the menus to other languages? Please check this documentation: https://wpml.org/documentation/getting-started-guide/translating-menus/

Best regards,
Ismael

Hey lara666,

Thank you for the inquiry.

This is not possible by default, but you can follow the instructions in this thread: https://kriesi.at/support/topic/masonry-not-displaying-cover-pictures/#post-1439624.

The solution is for the Masonry element, but it should work the same way for the Portfolio Grid.

Best regards,
Ismael

Hi,

We can’t reproduce the issue on our end. The sorting categories are returned as objects, not arrays.

View post on imgur.com

Have you tried deactivating the plugins?

Best regards,
Ismael

Hey ballindigital,

Thank you for the inquiry.

You can add this css code to hide the product gallery thumbnails and adjust the height of the main product image:

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

  /* Add your Mobile Styles here */
  .single .product div.images div.thumbnails {
    display: none;
  }

  .single .product div.images img {
    width: auto;
    height: auto;
    max-height: 300px;
    margin: 0 auto;
  }
}

Best regards,
Ismael

Hey dp-beheer,

Thank you for the inquiry.

The chart dataset will automatically be included and displayed in the chart and there is also a tooltip that will display on hover. If you need to display more information about the chart, you can use the options in the Content > Chart Title, Subtitle, Position panel.

Best regards,
Ismael

Hi,

Thank you for the inquiry.

You may need to manually create the html in a Text or Code Block, then add a few css modifications.

Example:

<div class="image-grid">
    <img src="image1.jpg" class="img img1" />
    <img src="image2.jpg" class="img img2" />
    <img src="image3.jpg" class="img img3" />
    <img src="image4.jpg" class="img img4" />
    <img src="image5.jpg" class="img img5" />
    <img src="image6.jpg" class="img img6" />
    <img src="image7.jpg" class="img img7" />
    <img src="image8.jpg" class="img img8" /></div>

Styles:

.image-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(4, auto);
    gap: 10px;
    width: 100%;
    max-width: 400px;
    margin: auto;
}

.img {
    width: 100%;
    border-radius: 50%;
    object-fit: cover;
}

/* Assign different sizes and irregular placements */
.img1 { grid-column: span 1; grid-row: span 1; }
.img2 { grid-column: span 2; grid-row: span 1; }
.img3 { grid-column: span 1; grid-row: span 2; }
.img4 { grid-column: span 2; grid-row: span 2; }
.img5 { grid-column: span 1; grid-row: span 1; }
.img6 { grid-column: span 2; grid-row: span 1; }
.img7 { grid-column: span 1; grid-row: span 2; }
.img8 { grid-column: span 1; grid-row: span 1; }

@media (max-width: 600px) {
    .image-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .img2, .img4, .img6 { grid-column: span 1; }
}

Please check the links below for more info.

// https://css-tricks.com/snippets/css/complete-guide-grid/
// https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Best regards,
Ismael

Hey manchust,

Thank you for the inquiry.

If you want to display a different number of items, you may need to add another post slider specifically configured for mobile view, then toggle the elements’ visibility for different screen sizes in the Advanced > Responsive > Element Visibility settings. With this setup, you’ll have one post slider for desktop and another for mobile view.

Best regards,
Ismael

Hi,

Thank you for the update.

If you want to limit the width of the grid layout, go to the Advanced > Developer Settings panel, apply the value “av-grid-constrain-width” in the Custom CSS Class field, and then add this css code:

#top .av-grid-constrain-width {
    max-width: 70%;
    margin: 0 auto;
}

Adjust the max-width value as needed.

Best regards,
Ismael

Hey peter559,

Thank you for the inquiry.

Please provide the link to the blog page so we can check the blog layout. If you’re using the default layout, you can use this css code to replace the icon or image with a custom background image:

.template-blog .blog-meta .post-author-format-type {
    background: url("bg-image-url.jpg");
}

.template-blog .blog-meta .post-author-format-type img {
    display: none;
}

Let us know the result.

Best regards,
Ismael

Hi,

would it be possible to apply this only to the content slider on the home page?

Yes, this is possible. Please edit the Content Slider element, go to Advanced > Developer Settings, and enter “av-content-slider-nav-bottom” in the Custom CSS Class field. Then, replace the css code with:

#top .av-content-slider-nav-bottom .avia-smallarrow-slider-heading {
    position: absolute;
    bottom: -50px;
}

— https://kriesi.at/documentation/enfold/add-custom-css

Best regards,
Ismael

Hey dondela,

Thank you for the inquiry.

You have to replace the anchor #content with #main or the ID of the section it should skip to when accessed. To apply the ID “content” to the first Color Section containing the content, go to Advanced > Developer Settings and enter the ID in the Custom ID field.

Best regards,
Ismael

Hi,

You can remove them from Enfold > Privacy & Cookies > Cookie Handling > Modal Window Custom Content. Look for the “Other External Services” entry, then remove that part from the Tab Content field.

< p >Google Map Settings:[av_privacy_google_maps]

View post on imgur.com

Let us know if you need more info.

Best regards,
Ismael

Hey Jak73,

Thank you for the inquiry.

You can add this css code to remove the space above the video:

.avia-video.av-m7hoi823-5fffa067e0538a32526d7bf7eec640c7 .mejs-container {
    background-color: transparent !important;
    box-shadow: none !important;
    border: none !important;
}

.avia-video.av-m7hoi823-5fffa067e0538a32526d7bf7eec640c7 video {
    background-color: transparent;
}

.avia-video.av-m7hoi823-5fffa067e0538a32526d7bf7eec640c7 {
    padding-bottom: 50%;
    background: transparent;
    border: 0 !important;
    margin-top: -20px;
}

Best regards,
Ismael

Hi,

Thank you for the info.

We get an error when we try to edit the functions.php file.

Something went wrong. Your change may not have been saved. Please try again. There is also a chance that you may need to manually fix and upload the file over FTP.

Please provide the FTP details in the private field.

If you want to proceed yourself, edit the code in the functions.php file and replace it with:

function inline_popup_enabler(){
?>
<script>
(function($){
    $(window).on('load', function() {
    	$('.inline_popup').magnificPopup({
    	  type:'inline',
    	  midClick: true 
    	});
    });
})(jQuery);
</script>
<?php
}
add_action('wp_footer', 'inline_popup_enabler');

The equal_height_columns function in the same file is also causing an error. Try to replace it with:

function equal_height_columns() {
?>
<script>
(function () {
    const wrapper = document.querySelector(".equal-columns");
    if (!wrapper) return;
    
    const columns = wrapper.querySelectorAll(".av_one_full");
    let maxHeight = 0;
    
    function adjustHeight(el) {
        el.style.height = maxHeight + "px";
    }
    
    function findMaxHeight(el) {
        maxHeight = Math.max(maxHeight, el.clientHeight);
    }
    
    columns.forEach(findMaxHeight);
    columns.forEach(adjustHeight);
})();
</script>
<?php
}
add_action('wp_footer', 'equal_height_columns');

We’ll wait for the FTP details.

Best regards,
Ismael