Shop Banner Image

Hi,
We should be able to adjust it with

 background-size: contain

but I see you are using the parallax effect which is offsetting it, is this what you wanted or are you willing to not use the parallax effect?

Best regards,
Mike

Hi,
Please post us your login credentials (in the “private data” field), so we can take a look at your backend.

1. Install and activate ” Temporary Login Without Password “.
2. Go to ” Users > Temporary Logins ” on the left-side menu.
3. Click ” Create New “.
4. Add the email address for the account ( you can use (Email address hidden if logged out) ), as well as the ” Role ” making that the highest possible and the expiry about four days
   ( do be sure that we have enough time to debug ).
5. Click ” Submit “.
6. You’ll now have a temporary account. Please provide us here in the private section the URL, so we can login and help you out.

When your issue is fixed, you can always remove the plugin!
If you prefer to not use the plugin, you can manually create a admin user and post the login credentials in the “private data” field.

Best regards,
Mike

Hi,
I found this post that discuss your issue, and it points to this code to solve it. But I don’t want to try it without your FTP access to undo the code should there be issues.
Can you try the solution or include your FTP access in the Private Content area so I can try?

Best regards,
Mike

Hi,
The size recommend by Vinay should be right, but as I was investigating this further I found some more code which I tweaked:

/*shop banner fix*/
.av-parallax-inner.av-parallax-woo {
background-position: 0 10% !important;
    background-size: 100% 30% !important;
    transform: translate3d(0, 3%, 0) !important;
}
.avia-section-large .content {
    padding-top: 40px!important; 
    padding-bottom: 80px!important; 
}

and added to your quick css, this seems to be working.
Please see screenshot in Private Content area for how it looks to me.
Please clear your browser cache and check on your end.

Best regards,
Mike

Hi,
I found the issue was happening on mobile and tablets, and I couldn’t adjust it enough to solve.
So I tried a new solution, I removed your shop banner and uploaded a cropped version for mobile, then added this css:

@media only screen and (min-width: 1440px) { 
div.av-section-color-overlay-wrap {
    background-image: url(https://site.de/wp-content/uploads/2017/12/shop-header-alleweine.jpg);
    background-repeat: no-repeat;
    background-size: contain !important;
    background-position: 50% 2%;
}
.avia-section-large .content {
    padding-top: 40px!important; 
    padding-bottom: 80px!important; 
}
}
@media only screen and (min-width: 1024px) and (max-width: 1439px) { 
div.av-section-color-overlay-wrap {
    background-image: url(https://site.de/wp-content/uploads/2017/12/shop-header-alleweine.jpg);
    background-repeat: no-repeat;
    background-size: contain !important;
    background-position: 50% 2%;
}
.avia-section-large .content {
    padding-top: 20px!important; 
    padding-bottom: 80px!important; 
    margin-top: -20px !important; 
}
}
@media only screen and (min-width: 768px) and (max-width: 1023px) { 
div.av-section-color-overlay-wrap {
    background-image: url(https://site.de/wp-content/uploads/2017/12/shop-header-alleweine.jpg);
    background-repeat: no-repeat;
    background-size: contain !important;
    background-position: 50% 30%;
}
.avia-section-large .content {
    padding-top: 20px!important; 
    padding-bottom: 80px!important; 
}
}
@media only screen and (max-width: 767px) { 
div.av-section-color-overlay-wrap {
    background-image: url(https://site.de/wp-content/uploads/2018/01/shop-header-655-300x65.jpg);
    background-repeat: no-repeat;
    background-size: contain !important;
    background-position: 50% 1%;
}
.avia-section-large .content {
    padding-top: 0px!important; 
    padding-bottom: 0px!important; 
}
}

It seems to work for mobile, tablet, laptop & desktop
please see screenshots in Private Content area.
Please clear your browser cache and check, if you don’t like it we can go back.

Best regards,
Mike

Hi,
I believe that to use different shop banners for pages and categories you will need to use a plugin such as: Woocommerce Category Banner Management Please review the plugin video to see if this is what you had in mind.

Best regards,
Mike

Hi,
I changed the Shop Description Color to:

rgba(0, 0, 0, 0);

Please clear your browser cache and check.

Best regards,
Mike

Hi,
I added this css, Please clear your browser cache and check.

#av_product_description {
    background-image: url(https://your-site.de/wp-content/uploads/2019/04/Banner-Ts-beauty-shop.png) !important; 
}
#av_product_description .av-parallax.active-parallax {
    opacity: 0 !important; 
}

Best regards,
Mike

Hi,
Sorry for the late reply, please try creating a copy of the image so the width is around 400px and add it to css like this:

@media only screen and (max-width: 767px) { 
#av_product_description {
    background-image: url(https://your-site.de/wp-content/uploads/2019/04/Banner-Ts-beauty-shop-2.png) !important; 
}
}

This way you will have two images, one for mobile and one for desktop.

Best regards,
Mike

Hi,
I took a look at your mobile menu and found that your opacity was set to zero, which hides it, Please try this code in the General Styling > Quick CSS field or in the WordPress > Customize > Additional CSS field:

@media only screen and (max-width: 767px) { 
#top #wrap_all #av-burger-menu-ul > li {
    opacity: 1 !important; 
}
}

For your logo image I adjusted the css some to this:

@media only screen and (min-width: 767px) {
#av_product_description {
    background-image: url(https://your-site.de/wp-content/uploads/2019/04/Banner-Ts-beauty-shop.png) !important; 
}
}
@media only screen and (max-width: 767px) { 
	#av_product_description {
    	background-image: url(https://your-site.de/wp-content/uploads/2019/05/Banner-Ts-beauty-shop-mobile.png) !important; 
background-position: center !important; 
	}
}

Now it is working well on mobile, Please clear your browser cache and check.

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