Hi!

I tried to recreate the test page but I can’t reproduce the issue. Please try to edit the js > avia.js file then look for this code around line 733:

fixedMainPadding = parseInt($('html').css('margin-top'),10);

Replace it with:

fixedMainPadding = parseInt($('html').css('margin-top'),10) - 10;

Remove browser cache then reload the page.

Best regards,
Ismael

Hi!

You can try this:

.template-shop .single-product-main-image .images a {
    width: 70%;
    float: left;
}

.single-product-main-image .thumbnails {
    width: 25% !important;
    float: left;
    margin-left: 4%;
}

#top .single-product-main-image .thumbnails a {
    width: 48%;
}

Regards,
Ismael

Hey!

Looks like you’re using a custom product tab. I’m not sure how they render the tabs inside the product page. Please ask the author of the WooCommerce Custom Product Tabs Lite plugin.

Best regards,
Ismael

Hey!

Please use css media queries to adjust the height on different screen sizes: Example:

/* Tablet Portrait size to standard 960 (devices and browsers) */
@media only screen and (min-width: 768px) and (max-width: 989px) {
ul.avia-slideshow-inner {
    max-height: 300px !important;
}}

Refer to this link for more info: https://css-tricks.com/css-media-queries/

Best regards,
Ismael

Hey!

2.) Please give us a link to the page with the gallery.

3.) You can generate the likebox widget script in the following link then place it in a text widget: https://developers.facebook.com/docs/plugins/page-plugin

4.) There will be an update notification when a new patch is available.

5.) The theme has its own styling options so you won’t be needing the css hero plugin to modify the elements in the theme. I’m afraid the plugin is not fully compatible with theme, if it is, we are not sure how to implement it. Please contact the plugin author.

Regards,
Ismael

Hi!

Alright. Most of the errors are generated directly from the WP core files. Please get a fresh copy of the WordPress files then overwrite the installation.

Regards,
Ismael

Hi!

Did you test the code above? You can use that code plus a few css media queries to fix the gap below the images. This is how the images look on the browser when you set the height to 381px, monitor resolution is 1920x1080px:

Regards,
Ismael

Hi!

Did you copy the code straight from your email? Please get the code directly from this forum. Make sure that the symbols are not converted to something else.

Best regards,
Ismael

Hey!

Please give us a link to the page. We will check it. Try to replace the code with this:

function add_custom_script(){
?>
<script>
  jQuery('.slide-entry a').each(function() {
    jQuery(this).attr('target', '_blank');
  });
</script>
<?php
}
add_action('wp_footer', 'add_custom_script');

Replace the “.slide-entry a” with the correct selector.

Best regards,
Ismael

Hi!

It will not change the scroll offset. The code will disable the gallery loading animation. Please remove browser cache then test the page again.

Regards,
Ismael

Hi!

I checked the Quick CSS field and there are multiple css media queries which are not needed. For example, you have this code:

@media only screen and (max-width: 767px) {
.responsive #top .av-large-testimonial-slider.avia-testimonial-wrapper .avia-testimonial {
padding: 0px 0px !important;
font-size: 14px !important;
}
}

@media only screen and (max-width: 767px) {
.responsive #top .av-large-testimonial-slider.avia-testimonial-wrapper .avia-testimonial {
padding: 0px 0px !important;
font-size: 14px !important;
}
}

You can remove the other media query because they are basically the same. And you have this code with the same media query:

@media only screen and (max-width: 767px) {
#top .av-large-testimonial-slider.avia-testimonial-wrapper .avia-testimonial {
  padding: 0;
}}

You can combine these codes to a single media query:

@media only screen and (max-width: 767px) {
#top .av-large-testimonial-slider.avia-testimonial-wrapper .avia-testimonial {
  padding: 0;
}

.responsive #top .av-large-testimonial-slider.avia-testimonial-wrapper .avia-testimonial {
padding: 0px 0px !important;
font-size: 14px !important;
}}

Please clean up the css codes and css media queries usually go at the very bottom of the stylesheet. You can try this css media query in order to change the hover effect for retina display:

https://css-tricks.com/snippets/css/retina-display-media-query/

Best regards,
Ismael

Hey boscotwcheung!

Thank you for using Enfold.

You can add it manually with the css font face rule or use the following plugin:

https://wordpress.org/plugins/wp-font-face/

Refer to these links for more info:

http://www.w3schools.com/cssref/css3_pr_font-face_rule.asp
https://css-tricks.com/snippets/css/using-font-face/

You can then use the Quick CSS field to apply the fonts on different elements.

Cheers!
Ismael

Hi!

Use this for the full width submenu button:

#top .av-menu-button-colored:hover > a .avia-menu-text {
    background-color: blue !important;
    color: #ffffff;
    webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

The contact form button should have the same effect by default.

Best regards,
Ismael

Hi!

The kriesi.at likebox width is set to 300px which is the actual width of the sidebar so there’s no issue there. You can generate the likebox widget in the following link then use the scripts on a text widget. Make sure that the “Adapt to plugin container width” option is enabled: https://developers.facebook.com/docs/plugins/page-plugin

Example:

<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.4";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-page" data-href="https://www.facebook.com/kriesi.at" data-small-header="false" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="true" data-show-posts="false"><div class="fb-xfbml-parse-ignore"><blockquote cite="https://www.facebook.com/kriesi.at"><a href="https://www.facebook.com/kriesi.at">Kriesi</a></blockquote></div></div>

Refer to this link for more info: https://kriesi.at/support/topic/change-in-appearance-of-enfoldfacebook-likebox/

Regards,
Ismael

Hey!

If you don’t mind, please create a new thread for your inquiries. A screenshot of the element that you’re trying to modify will help. For the widget or sidebar links, if I am not mistaken, you can use this in the Quick CSS field:

.main_color .sidebar a { color: red; }

Regards,
Ismael