Hi,

The filter we recommended was placed in the style.css file instead of the functions.php file. We removed it and added the following script instead. The text will still display with a slight delay, but the transition should now be disabled.

add_action('wp_footer', function() {
    ?>
    <script>
    jQuery(document).ready(function($) {
        $(".avia-fold-unfold-section").each(function() {
            var $section = $(this);
            var $container = $section.find(".av-fold-unfold-container");

            if ($container.length) {
                $container.css({
                    "max-height": "none",
                    "transition": "none"
                }).removeClass("folded").addClass("unfolded");
            }

            var $buttonWrapper = $section.find(".av-fold-button-wrapper");

            if ($buttonWrapper.length) {
                $buttonWrapper.css("display", "none");
            }
        });
    });
    </script>
    <?php
}, 999);

We also edited the modification in the Quick CSS field.

@media only screen and (max-width: 768px) {
  .av-fold-unfold-container {
    max-height: none !important;
    transition: none !important;
    opacity: 1 !important;
  }

  .avia-fold-unfold-section .av-fold-button-wrapper,
  .av-fold-button-container {
    display: none !important;
  }

  #top .avia-fold-unfold-section .av-fold-unfold-container:after {
    display: none !important;
  }

  .avia-fold-init,
  .avia-fold-init-done {
    display: block !important;
    max-height: none !important;
    opacity: 1 !important;
  }
}

Best regards,
Ismael

Hey Antonio,
The setting that you are referring to uses css to hide the color section after page load, PHP can not determine the screen size of the device, since it is a server side code language. CSS is a client side code language that loads on the user device, but will not stop the video from being served. Another option would be Javascript, such as in this thread, but it is also a client side code language, while it can stop the load of the video as long as the Javascript runs first, but using a caching plugin like WPRocket may derfure the Javascript and cause it to not work. Most caching plugins force Javascript to run in the footer, but this would need to run in the header before the videos.
So ultimately you will be losing the render blocking of Javascript to gain the video from not loading, if your video is very large you will save on the page load, but otherwise you will see warnings that the Javascript is causing page render blocking.

Best regards,
Mike

Hey joakleaf,

The update to 7.1.3 has to be done manually from the version you are running, please refer to my replies in this thread: https://kriesi.at/support/topic/enfold-4-5-theme-update-update-failed-download-failed-a-valid-url-was-not-pro/#post-1021541
You can either update manually via FTP: https://kriesi.at/documentation/enfold/how-to-install-enfold-theme/#theme-update, or upload the theme as if it was new under Appearance->Themes->Add New Theme.
If that doesn’t work then please try to delete the whole theme folder, then replace it with the new version. Make sure that you have backups of the site before starting updating.
Also please read this after you have updated: https://kriesi.at/documentation/enfold/theme-registration/

Best regards,
Rikard

Hi,

Great, I’m glad to hear that you got the update working. Please let us know if you should need any further help on the topic, or if we can close it.

Best regards,
Rikard

Hi,

We missed the screenshot above. Please try to replace the modification with this css code:

#top .av-minimal-toggle .toggle_content .avia-testimonial {
  width: 50%;
  display: block;
  float: left;
}

@media only screen and (max-width: 989px) {

  /* Add your Mobile Styles here */

  #top .av-minimal-toggle .toggle_content .avia-testimonial {
    width: 100%;
    display: block;
    float: none;
  }
}

Result:

Best regards,
Ismael

Hi,

You can add any media query that you need, this might help you out for example: https://stackoverflow.com/questions/6370690/media-queries-how-to-target-desktop-tablet-and-mobile, or this: https://www.w3schools.com/css/css_rwd_mediaqueries.asp

Best regards,
Rikard

Hi,

Thanks for that, but there are no files at all uploaded to the site which you gave us access to earlier.

Best regards,
Rikard

Hey Heather,
Please see this article about purchasing extended support.
As for your search issue, please disable all of your plugins and then check.
The Enfold theme has had a known issue with the Advanced Woo Search plugin, particularly concerning the display and functionality of the search bar in the main menu. A reported issue involves the search bar appearing briefly and then disappearing when integrated via the “Shortcode in Menus” plugin. Please see this thread.
Another possibility is your Autoptimize plugin forcing the “display:none” instead of allowing the results to show. Autoptimize often causes errors like this. Nonetheless once you extend your support we can review further.
Best regards,
Mike

Hi,

@Jason: You have probably enabled the Top Header before. If you really need to keep the left sidebar or header and still include a search field on the page for mobile view, you can try adding a Search element from the Advanced Layout Builder.

Please open another thread if you have more questions.

Best regards,
Ismael

Hi,

Thank you for the info.

We adjusted the code in the Quick CSS field a bit. It should be working correctly now.

@media only screen and (min-width: 769px) {
  /* Add your Desktop Styles here */
  #top .fullsize .template-blog .big-preview {
      padding: 0 0 10px 0;
      width: 40%;
  }

  .av-alb-blogposts .post-entry {
      display: block;
  }

  .av-alb-blogposts .big-preview.single-big a {
      height: 100%;
  }

  .av-alb-blogposts .big-preview.single-big a img {
      object-fit: contain;
  }

  #top .fullsize .template-blog .post-title {
      text-align: left;
      font-size: 30px;
      padding: 15px 0;
      max-width: 800px;
      margin: 0 auto;
  }

  #top .fullsize .template-blog .post-meta-infos {
      text-align: left;
  }

  #top .fullsize .template-blog .post .entry-content-wrapper {
    width: 60%;
    float: left;
  }

  #top .fullsize .template-blog .blog-meta {
      display: none;
  }

  #top .fullsize .template-blog .big-preview {
      padding: 0 0 10px 0;
      width: calc(40% - 50px);
      float: left;
      margin-right: 50px;
      min-height: 200px;
  }
}

@media only screen and (min-width: 989px) {
  #top .fullsize .template-blog .big-preview img {
    min-width: 494px;
  }
}

Best regards,
Ismael

Hey derdschuh,

Thank you for the inquiry.

Try adding this css code to properly resize the testimonial items on smaller screens:

@media only screen and (max-width: 1366px) {

  /* Add your Mobile Styles here */

  #top .av-minimal-toggle .toggle_content .avia-testimonial {
    width: 50%;
    display: block;
    float: left;
  }
}

@media only screen and (max-width: 768px) {

  /* Add your Mobile Styles here */

  #top .av-minimal-toggle .toggle_content .avia-testimonial {
    width: 100%;
    display: block;
    float: none;
  }
}

Result:

Best regards,
Ismael

Hey RENZCOM,

Thank you for the inquiry.

Try to add this css code to adjust the header height in tablet landscape view:

@media only screen and (max-width: 1366px) {
    .responsive.html_mobile_menu_tablet #top #header_main>.container .main_menu .av-main-nav>li>a, .responsive.html_mobile_menu_tablet #top #wrap_all .av-logo-container {
        height: 90px;
        line-height: 90px;
    }
}

Best regards,
Ismael

Hi,

You need to remove this css code if you want the featured image to resize automatically based on screen size. This rule sets a minimum height of 630px for the image, preventing it from shrinking while resizing the window. It does preserve the aspect ratio using object-fit: cover.

#top.single-post .fullsize .template-blog .big-preview img {
    width: 1200px;
    min-height: 630px;
    object-fit: cover;
}

Best regards,
Ismael

Hey Chris,

The update to 7.1.3 has to be done manually from the version you are running, please refer to my replies in this thread: https://kriesi.at/support/topic/enfold-4-5-theme-update-update-failed-download-failed-a-valid-url-was-not-pro/#post-1021541
You can either update manually via FTP: https://kriesi.at/documentation/enfold/how-to-install-enfold-theme/#theme-update, or upload the theme as if it was new under Appearance->Themes->Add New Theme.
If that doesn’t work then please try to delete the whole theme folder, then replace it with the new version. Make sure that you have backups of the site before starting updating.
Also please read this after you have updated: https://kriesi.at/documentation/enfold/theme-registration/

We can’t say if your site will stay the same or not, it depends on what has been done to it. You can export the theme settings under Enfold->Import/Export though, and make sure that you have a backup of your old site before updating anything.

Best regards,
Rikard