Hi,

Have you tried hiding the testimonial section on mobile view? You can toggle the Element Visibility settings in the Advanced > Responsive panel.

View post on imgur.com

You can also use this css code to adjust the size of the testimonial section on mobile view:

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

  /* Add your Mobile Styles here */
  .responsive #top .av-large-testimonial-slider.avia-testimonial-wrapper .avia-testimonial {
    padding: 0;
    font-size: 0.85em;
  }

  #top .av-large-testimonial-slider .avia-slideshow-arrows {
    position: absolute;
    width: 100%;
    bottom: 50px;
  }

  #top .avia-slideshow-arrows a.next-slide {
    right: -30px;
  }

  #top .avia-slideshow-arrows a.prev-slide {
    right: auto;
    left: -30px;
  }
}

View post on imgur.com

Best regards,
Ismael

Hi,

adjusting the slider’s image size for mobile so it runs full height?

You can replace the Fullwidth Easy Slider with Fullscreen Slider or use both, then adjust the Advanced > Responsive > Element Visibility settings to toggle the display of the sliders. You’ll have one slider for desktop and another for mobile view.

To adjust the position of the caption, go to the Styling > Caption panel, then adjust Caption Positioning settings.

Best regards,
Ismael

Hey fanlokbun,

Thank you for the inquiry.

You can use this css code to hide the logo on mobile view and make the header transparent.

/*
Mobile Styles
================================================== */
/* Note: Add new css to the media query below that you want to only effect the Mobile and Tablet Portrait view */

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

  /* Add your Mobile Styles here */
  .responsive #top #wrap_all .av_header_transparency {
    position: fixed;
    background-color: transparent;
  }

  .responsive #top .av_header_transparency.av_alternate_logo_active .logo a>img,
  .responsive #top .av_header_transparency.av_alternate_logo_active .logo a>svg,
  .responsive #top .logo {
    display: none;
  }
}

View post on imgur.com

Best regards,
Ismael

Hey Diana,

Thank you for the inquiry.

Are you trying to make the document automatically scroll and open the tabs when the links are used? If so, you can try adding this script in the functions.php file:

add_action('wp_footer', function() {
    ?>
    <script>
    document.addEventListener('DOMContentLoaded', function() {
        (function($) {
            function scrollToTab(selector, eventType) {
                $(selector).on(eventType, function(e) {
                    var hash = eventType === 'load' ? window.location.hash : $(this).attr('href').split('#')[1];
                    if (!hash) return;
                    var tab = $('.av-section-tab-title[href="#' + hash + '"]');
                    if (tab.length) {
                        var parent = tab.closest('.av-tab-section-outer-container');
                        var pos = parent.offset();
                        tab.trigger('click');
                        setTimeout(function() {
                            $(window).scrollTop(pos.top - 100);
                        }, 100);
                    }
                });
            }
            scrollToTab('.avia-buttonrow-wrap a', 'click');
            scrollToTab(window, 'load');
        })(jQuery);
    });
    </script>
    <?php
});

Best regards,
Ismael

Hey Guenter,

Thank you for the inquiry.

We can’t find the enfold-font-size-content-font variable anywhere in the theme — only enfold-font-size-theme-content. Where did you see the enfold-font-size-content-font variable?

Best regards,
Ismael

Hey agentur2c,

Thank you for the inquiry.

You can change the layout of the archive or category page by adjusting the Enfold > Blog Layout > Blog Styling and Blog Layout settings. Please check the screenshot below:

View post on imgur.com

Best regards,
Ismael

Hi,

Thank you for the update.

We don’t really see any issues when the grid breaks onto a second line — that’s how the grid is supposed to display on smaller screens. Would you mind providing a screenshot? The clip above doesn’t clearly show the issue you described.

Best regards,
Ismael

Hey GWS,

Thank you for the inquiry.

Did you add the following css code somewhere? The previous css code should not have affected the default search field because it was specific to the search form inside the #chsearchbox container.

#top #searchsubmit, .ajax_load {
    width: 62px;
    height: 100%;
    line-height: 40px;
    position: absolute;
    right: auto;
    top: 0px;
    z-index: 2;
    min-width: 40px;
    left: 8%;
    padding: 0px;
    margin: 0px;
    border-radius: 0px;
    background: url("https://riseandshine.childrensnational.org/wp-content/uploads/2017/07/ch-search-icon.png") center center / contain no-repeat;
    background-position: center center;
}

Best regards,
Ismael

Hey a_edemirci,

Thank you for the inquiry.

Have you tried adjusting the padding of the Color Secetion containing the Blog Posts element?

View post on imgur.com

If this is not what you’re looking, provide the site URL in the private field so we can check.

Best regards,
Ismael

Hi,

Great! Please make sure your html tags are valid and properly closed. Let us know if the issue persists.

Have a nice day.

Best regards,
Ismael

Hey twdf,

Thank you for the inquiry.

Are you referring to this Template button?

View post on imgur.com

Please provide the site URL and login details in the private field so we can check.

Best regards,
Ismael

Hi,

Thank you for the kind words! Glad to know that you find LayerSlider useful in this case. If you have any more questions, feel free to open another thread.

Have a nice day.

Best regards,
Ismael

Hi,

You need to add the code to the functions.php file. It will only affect pages that use the av_textblock shortcode or the Text Block element. As mentioned earlier, you can replace the Blog Posts element with the Product Grid element, but you’ll need to install WooCommerce and create products first.

Best regards,
Ismael

Hi,

Have you tried adjusting the padding value? You can also use calc function to correctly adjust the padding based on the screen width.

— https://www.w3schools.com/cssref/func_calc.php

Best regards,
Ismael

Hey MAJO_Agency,

Thank you for the inquiry.

1.) The scroll-to-top button is hidden by default on mobile view because most mobile devices have built-in ways to navigate to the top. If you like to display it again, add the following css:

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

  /* Add your Mobile Styles here */
  .responsive #scroll-top-link {
    display: block;
  }
}

2.) We may need to inspect the site to better understand the issue. Please provide the site URL and login details in the private field.

Best regards,
Ismael