Hi,

@corefocusgroup as we have not heard back from you as to if this had helped you, but you can also see this thread where unfortunately there is no other way to load the icon font aside from using font face, so the only way to optimize it is to adjust the font-display property.

function avf_custom_font_display( $font_display, $font_name )
{
	// Check for a font and change the default theme setting
	if( 'entypo-fontello' == $font_name )
	{
		return 'block';
	}

	return $font_display;
}

add_filter( 'avf_font_display', 'avf_custom_font_display', 10, 2 );

Best regards,
Mike

Hi,
Sorry for the very late reply, as I understand your question you would like to have a conditional function to change the “shop_catalog” image based on screen size, you can try the solution on this thread

add_filter( 'woocommerce_get_image_size_thumbnail', function( $size ) {
    if( ! is_singular('product') ) {
        return array(
            'width'  => 200,
            'height' => 300,
            'crop'   => 0,
        );
    }

    return $size;
} );

and then you would need to regenerate the thumbnails and test with a new item. If this doesn’t help then you will need to set the image size in between the desktop and mobile sizes and then use css to scale to images up and down based on screen size, such as Victoria had suggested.

Best regards,
Mike

Hi,
Thank you for your patience, I believe that you are referring to the section in the screenshot in the Private Content area for mobile screens.
Please give this css a try:

@media only screen and (max-width: 767px) {
    .locatie-tabel tr:first-child > td:first-child {
        padding-top:15px !important;
    }
}

and see my test result below.

Best regards,
Mike

Hi,
Sorry for the very late reply, the mobile menu is created from the regular menu that is created in the WordPress menu option, it is not really another menu, so you should create a footer menu and a secondary menu, which is the menu used above the header and not shown on mobile, and then your two main menus for each language which will also be used for mobile menus.

Best regards,
Mike

Hi,
I believe that the title tag of the link that wraps the image is the title of the image in the media library correct?
I tried to point out above that adding the same title to the link and the image will cause accessibility issues with screen readers.
In elements where the image is not wrapped in a link the title tag is applied to the image, but when the image is wrapped in a link the title tag is applied to the link. Do you plan on having your site compliant with users that have accessibility issues such as low sight?

Best regards,
Mike

Hi,
Your image is not showing so I’m not quite sure what you wanted to show, but I don’t see an author tag in the link of the image.
What I was trying to point out is that the link has a title tag that wraps the image, please see the screenshot in the Private Content area.

Best regards,
Mike

Hi,
Glad we were able to help, we will close this now. Thank you for using Enfold.

For your information, you can take a look at Enfold documentation here
For any other questions or issues, feel free to start new threads in the Enfold forum and we will gladly try to help you :)

Best regards,
Mike

Hi,
I disabled the “Enfold Related Posts Element” plugin and disabled “lazy loading” in the Enfold Theme Options > Performance > Lazy Loading cleared your cache and the images are loading better now.
Please don’t use this plugin, I wrote it almost 4 years ago, poorly 🙂 it was never official and I have removed it from GitHub today.
Anyways, please clear your browser cache and check.

Best regards,
Mike

Hi,
Glad this helped, it is not “better” to include the code only on the landing page like I did, I only do this to test, but sometimes I like to do this with a script it might only be used on one page, because I’m a minimalist 🙂
Unless there is anything else we can assist with on this issue, shall we close this then?

Best regards,
Mike

Hi,
The Error “Uncaught ReferenceError: jQuery is not defined” in the Console, typically means that you are loading jQuery in the footer, so the script is running before jQuery is loaded.
This is an option in the theme settings at Enfold Theme Options > Performance > Load jQuery in your footer, but many caching & minifying plugins also do this, so please check and disable.
If you don’t see the Enfold Theme Options > Performance > Load jQuery in your footer option, then this means that your webhost has modified the WordPress install.

Best regards,
Mike

Hi,

Testing it on Screenshot Guru, I can see the YouTube icon, but that doesn’t really tell me anything

What it says is that a completely different computer on a different network is showing your page loading correctly, this would be the same as if somebody wanted to know if your website was down or not, they would use downforeveryoneorjustme.com
I hear your frustration and I wish I had more to offer but Nikko and I both can not reproduce this, and a third-party test can not either. I will ask the rest of the team to take a look, perhaps I missed something.

Best regards,
Mike

Hey bts-de,
Sorry for the very late reply and thank you for your patience, so your image in this case is a background image of the link which does have the title tag: title="Individuelle Sonderanfertigung von MonLines, Soundbar Lift" typically background images do not have titles for accessibility compliance. In this case, I believe it interferes with screenreaders when the link has a title tag that is wrapping a background image with another title tag.
I believe in your case the link title tag is retrieved from the image title field in the media library, and so if the image title tag was included then you would have two titles wrapped that are the same, which would cause accessibility issues.

Best regards,
Mike

Hi,

@mgyura thanks for your feedback, I was not able to reproduce the error on your site, and I was only able to reproduce the error on @Gianluigi’s site when I used a VPN, as you can see from the screenshots and DevTools error link. So I’m assuming that you are experiencing the same issue, but this could be incorrect to assume because other factors could be browser-based “Ad-Blockers” or extensions, etc, but from your post that you tested on a friend’s Windows machine I doubt both machines are using the same extensions. Thus a slow network from your side, such as a wifi hotspot, phone signal or on your webhost side, CDN, etc makes sense to me.
All of the icons are shown with the font entypo-fontello.woff2 as shown in the screenshot above, not just the YouTube one, the reason the YouTube one is not showing is because the browser did this: [Intervention] Slow network is detected in the DOM waterfall.
But please note that the error and screenshots are from @Gianluigi’s site when I used a VPN, I was not able to reproduce the error on your site. Maybe it is a stretch to say that you are both experiencing the same error, but I wanted to try my best to find some sort of reason why this is occurring and this was the only this I could see the error on Windows 10 & Mac Big Sur
Please try testing your site like this: Go to Screenshot Guru and enter your url and view the results which show your YouTube icon:

Best regards,
Mike

Hi,
Sorry for the very late reply and thanks for your patience, I have two ways to load font awesome with functions.php snippets, the first one enqueues it and the second loads the css in the wp_head, you can try both (one at a time) to see which will give you a better load time, but there really should not be too much difference between them. Also note that the first one was loading v4.7.0 when I saved the code and the second was loading v5.3.1, but you can adjust to suit, I left the original links to demonstrate the link format.

add_action( 'wp_enqueue_scripts', 'enqueue_font_awesome' );
	function enqueue_font_awesome() {wp_enqueue_style( 'font-awesome', 'https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css' );
}

function Font_Awesome_5(){
    ?>
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
    <?php
    }
add_action('wp_head', 'Font_Awesome_5');

Best regards,
Mike

Hey 2SINN,
Sorry for the very late reply and thanks for your patience and the login to your site, I didn’t login though instead I copied your full-size image to my localhost and tried a few different “solutions” from the past to try to find one that would work for this.
So for your image please add the custom class openfullsize

Then add this code to the end of your functions.php file in Appearance > Editor:

function custom_script() { ?>
    <script>
(function ($) {
$(document).ready(function(){
    $('.openfullsize .avia-image-overlay-wrap .avia_image.lightbox-added').click(function(){
        var fullsize = $(this).find('img').attr('src');
        $('img.mfp-img').attr("src", fullsize);
    });
});
})(jQuery);
</script>
    <?php
}
add_action('wp_footer', 'custom_script');

This will work and should not cause any conflicts because of the custom class, please note that it is still important that the “full-sized” image is explicitly selected in the image element.

Best regards,
Mike