Hi,
I recommend updating again, this post has helped many with the blurry image issue: https://kriesi.at/support/topic/woocommerce-3-0-03-0-1-and-the-images-issue/
then we can address the lightbox issue, otherwise I’m not sure how we can resolve the conflict of the out of date Woocommerce.
Perhaps the Woocommerce lightbox plugin?

Best regards,
Mike

Hi,
Try this code in the General Styling > Quick CSS field:

.page-id-539 .avia-slideshow li img {
    width: 612px!important; 
    height: 792px!important; 
    height: 90vh!important; 
    height: calc(612/792vh)!important; 
}

This works to keep the aspect ratio of the image while showing it at 90% of the visual height of the device.
You can change it to 100%, but the header gets in the way & I thought 90vh looked better :)

Best regards,
Mike

Hi,
OK what I think has happen is that you have Enfold 4.0.5 which has been fixed to work with WooCommerce 3.0, but you are using WooCommerce Version 2.6.14
Please update WooCommerce, but make sure to backup your full site!
I recommend https://wordpress.org/plugins/duplicator/

Best regards,
Mike

Hi,
I took a look and if I’m looking in the right place, on your home page, the color section for #homeintro has a background image of the band, and a overlay color, so the gradient background won’t show.
I added a color section on your test-page so you can see how it works :)

Best regards,
Mike

Hi,
Glad to hear, do you mind sharing your solution?

Best regards,
Mike

Hey Oversberg,
It is possible to hide a image when a customer uses a mobile, you would create a css rule that declares that at a certain screen width the element would not display. If you want a hand with this on your site let us know.
I’m sure this is also possible with php and js, but that is a little out of our scope here :)

Best regards,
Mike

Hi,
Try this code in the General Styling > Quick CSS field:

@media only screen and (max-width: 767px) { 
#full_slider_1 { display: none !important; }}

@media only screen and (min-width: 768px) { 
#after_full_slider_1 { display: none !important; }}

Tablet, Laptop, Desktop:

Phone:

Please clear your cache :)

Best regards,
Mike

Hi,
We’ll add “page-id-206” to it to target only that page :)

@media only screen and (max-width: 767px){
#top #wrap_all .av-inherit-size .av-special-heading-tag {
    font-size: 0.4em!important; }
.page-id-206 .av-special-heading.av-special-heading-h3 {
    right: 30%!important; 
    top: 140px!important;}
.hr-inner.inner-border-av-border-thin {
    border-color: transparent!important; }
}

Best regards,
Mike

Hi,
I believe this may solve your issue:
https://kriesi.at/support/topic/how-to-maintain-aspect-ratio-for-big-preview-featured-image-on-blog/#post-332548
let us know if it helps

Best regards,
Mike

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

Best regards,
Mike

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

Best regards,
Mike

Hey jonesthelight,
Try this code in the General Styling > Quick CSS field:

.av-main-nav ul li { 
width: 120% !important; 
} 
.html_header_top .header_color .main_menu ul:first-child >li > ul {
border-color:transparent !important;
}

Best regards,
Mike

Hi,
Please see your other post: https://kriesi.at/support/topic/job-images-disappear-due-browser-resize/#post-782072

Best regards,
Mike

Hi,
I think I found were the 845×321 is coming from and how to edit it, please try the solution here:
https://kriesi.at/support/topic/how-to-maintain-aspect-ratio-for-big-preview-featured-image-on-blog/#post-332548

Best regards,
Mike

Hi,
Please see if in your Profile > Personal Options > Visual Editor
“Disable the visual editor when writing” is checked, if so, uncheck.

Best regards,
Mike