Hi,
Sorry for the very late reply and thanks for the links.
Please try this css instead:

#top #main .kleur {
	left: -5% !important;
    min-width: 111% !important;
    color: green;
    padding-left: 50px;
}

Best regards,
Mike

Hi,
Sorry for the late reply, I’m not sure about this adjustment, so I have asked for assistance, I will reply with a follow-up.

Best regards,
Mike

Hey joax,
Sorry for the very late reply and thanks for your request, so I understand further, are you displaying a “product grid” element in a “post” type?
Are you using the Advanced Layout Builder for “post” types, or are you using the ALB shortcodes in a “post” type?
Is this like you have a blog post and you would display a product in it, such as a “related” product or a “spotlight” product?
Will these be changed often or will each post be set with a product once?
Do you have any mockups?

As for using the masonry as a “related articles” container, the built-in related posts element uses the post “tags” to determine the related posts, the masonry element also lets you choose posts by the tag, so this would be the solution.
I imagine that you are using the masonry at the bottom of a post, showing perhaps 3 items that are “related”, am I understanding correctly?
Do you have any mockups?

Best regards,
Mike

Hey Puntvorming,
Sorry for the very late reply and thanks for the login, I adjusted your css to this:

@media only screen and (max-width: 989px) {
.responsive #top .avia-full-stretch{
background-attachment: scroll !important;
}
}

This seems to be working, but I’m checking on Windows, please clear your cache and check with your iPad.
To target only Safari you could try this:

@media only screen and (max-width: 989px) {
.avia-safari #top .avia-full-stretch{
background-attachment: scroll !important;
}
}

Best regards,
Mike

Hi,
Very good, 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

Hey conflock,
Sorry for the late reply, are you also using Enfold Theme Options > Performance > JS & CSS file merging and compression or any caching plugins?
If either of these are used you will need to clear these when you change the page elements used. Even though the theme knows to not load an element, it is not enough to trigger a rebuild of the merged or minified files.
To force a rebuild of the theme merged files, disable the merged option and at the bottom of the page you will find: Enfold Theme Options > Performance > Delete old CSS and JS files, enable this and save the theme settings, then reload your frontend, then go back and enable the settings for merging again.
For your caching plugins, they should have a “clear” option.
I recommend only using caching & minifying after your site is finished, in this case use you may only need to do this occasionally, after page rebuilds.

Best regards,
Mike

Hey ThiloKiefer,
Sorry for the late reply and thanks for the link, I checked your page and found:
<link rel="canonical" href="https://www.munich-enterprise.com/en" />

I checked with Chrome on Windows 10, are you still seeing this?

Best regards,
Mike

Hi,
Glad we could help, and thank you for using Enfold and for your patience.
As this thread was started in 2016, I will be closing this thread now.
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

Hey Jasper,
Sorry for the very late reply and thanks for the link, I see that on scroll your large logo is flashing while it moves to the small logo position. But due to your caching, I’m having trouble isolating your custom css, can you please post it and disable it from your site. I can test by injecting it via the browser. Or you could include admin login in the Private Content area so I can test, if you don’t mind.
As for your anchors, I believe the images are being lazyloaded so as the page is scrolled the images show and take their height increasing the height of the page causing the anchors to miss.
To test this try disabling the lazyload option in the theme options. Please also disable any caching & minifying plugins while testing. Then clear your browser cache and check.

Best regards,
Mike

Hi,
@Andreas thank you for the links and login, I found that on your [DE] stagging site the jQuery Migrate theme setting was off, while on the [EN] site it was on.
This was giving the error: Uncaught TypeError: e.indexOf is not a function it seems that jQuery Migrate is needed.
I corrected this and it seems to work now, please clear your browser cache and check.

Best regards,
Mike

Hi,
Sorry for the late reply and thanks for the login, I added the css solution posted above in your Quick CSS and it seems to correct the bottom margin of the middle article on mobile, please see the screenshot in the Private Content area.

@media only screen and (max-width: 767px) { 
.responsive #top #wrap_all #main .avia-content-slider-odd > .avia-content-slider-inner > .slide-entry-wrap > .slide-entry.slide-parity-even {
        margin: 0 0 20px 0 !important;
}
}

As I understand you tried this and didn’t see this result? Perhaps try clearing your browser cache and check again.

Best regards,
Mike

Hi,
Sorry for the late reply, please try changing the z-index of the element like this:

(function ($) { 
          $(window).scroll(function() {    
              var scroll = $(window).scrollTop();
              if (scroll >= 20) {
                  $("#avia-messagebox-").stop().fadeTo('fast', 0).css({'z-index':'0'});
              } else {
                  $("#avia-messagebox-").stop().fadeTo('slow', 1).css({'z-index':'10'});
              }
          });
        })(jQuery);

I’m not sure that the z-index of “10” is correct for when it is in view, so please try adjusting this to suit.
If this doesn’t help, please include an admin login in the private content area so I can test.

Best regards,
Mike

Hi,
Sorry for the late reply, I created another test page on a different server by copying your test page ALB shortcode, and in comparing the source code with your test page I note that the avia-iframe-wrap div is missing from your element:

yours is the lower image.
I imagine this is also happening on your test environment, and you also tested with no plugins or custom scripts. I don’t know why this would occur, I tried many combinations of the theme settings to recreate your error but I could not.
I am also out of ideas, since the code block element is working for you to show the video, do you think this will suit your needs so that you can move forward on your project?

Best regards,
Mike

Hi,
Sorry for the late reply and thanks for the video, on your homepage slider, and on first load, the buttons seem to be overlapping each other:

this image includes “Ajouter au panier” & “Voir les détails” as seen here in the source code of the page:

Yet this only seems to occur on first load of the slider, once the slider rotates the new products the buttons don’t seem to overlap, for example this is the same product before and after the slider rotates, I used the slider arrows to go back to the same product:

I believe that this might be due to a conflict in the use of “visibility” which the slider is also using to cycle though the products and for the hover effect.
I notice that your css is targeting the class “product-type-simple” but this is not a class that every item has, and your css is also hiding the class “button” without specifically pointing to which the button to hide.
OK, so perhaps using “display: none” instead of “visibility: hidden” and use “:not(.show_details_button)” to only target the add-to-cart button, like this:

 #top.home .avia-content-slider-inner .button:not(.show_details_button) {display: none !important;}

Please note that when you use “display:none” the space it uses is also removed, so you won’t need to use the “margin-left: -50%!important;” css to move the “show_details_button”.
So please review your css for the buttons and model this.

Best regards,
Mike

Hi,
Sorry for the late reply and thanks for the feedback. This time I commented out this css in your child theme stylesheet:

/*Bordure des images*/
/*.avia_mega_div > .sub-menu li > span.mega_menu_title > a:nth-child(1) {border: solid 1px #cca752!important;}*/

then I added this css:

#avia-menu .avia_mega_div > .sub-menu li > span.mega_menu_title > a > img:nth-child(1),#avia-menu .avia_mega_div > .sub-menu li:hover > span.mega_menu_title > a > img {border: solid 1px #cca752!important; transform: none !important;}

then I added the closing H6 tags, now the gold border is only around the image.
Please clear your browser cache and check.

Best regards,
Mike