Hi,
Your table has more content than will show on a mobile screen, try this css to make the table horizontally scroll:

@media only screen and (max-width: 767px) { 
table {
  display: block;
  max-width: -moz-fit-content;
  max-width: fit-content;
  margin: 0 auto;
  overflow-x: auto;
}
}

After applying the css, please clear your browser cache and check.

Best regards,
Mike

Hi!

Thank you for opening another thread.

We checked the site on a browser emulation and the modal popup window seems to be scrollable, but the position of the modal is a bit off. To adjust the position, we can use this css code.

@media only screen and (max-width: 767px) {
	/* Add your Mobile Styles here */
	.mfp-wrap.mfp-gallery.mfp-close-btn-in.mfp-auto-cursor.avia-popup.mfp-zoom-in.mfp-ready {
		top: 0 !important;
	}
}

Regards,
Ismael

Hey 1117111,

Thank you for the inquiry.

To change the direction of a fullscreen slider from right to left to left to right, you’ll need to modify the CSS that is being used to style the slider.

Here is an example of how you can do this using the Enfold theme:

1.) In the WordPress dashboard, go to “Enfold > Theme Options”.

2.) Click on the “General Styling” tab.

3.) Scroll down to the “Quick CSS” field and enter the following code:

#top .av_slideshow_full.av-control-default .avia-slideshow-arrows a {
  left: auto;
  right: 10px;
}

#top .av_slideshow_full.av-control-default .avia-slideshow-arrows a.next-slide {
  left: 10px;
  right: auto;
  transform: rotate(180deg);
}

This code will change the position of the left and right arrows in the slider so that they are displayed on the left and right sides of the slider, respectively.

I hope this helps! Let me know if you have any other questions or if you need further assistance.

Best regards,
Ismael

Hi,

Thanks for that. Please try the following in Quick CSS:

#scroll-top-link {
    right: auto;
    left: 50px;
}

Best regards,
Rikard

Hey seo-systeme,

Thank you for the inquiry.

In the code below, we modified the parallax banner function a bit to include the category title and re-registers the template hooks. Please create a site backup, then add the code below in the functions.php file.

function avia_woocommerce_big_cat_banner_mod()
{
	if(is_product_category())
	{
		global $wp_query, $avia_config;

		if(isset($wp_query->query_vars['taxonomy']))
		{
			$term = get_term_by( 'slug', get_query_var($wp_query->query_vars['taxonomy']), $wp_query->query_vars['taxonomy']);
			if( ! empty( $term->term_id ) )
			{
				$description 	= term_description() ;
				$style		= avia_get_woocommerce_term_meta( $term->term_id, 'av_cat_styling' );
				$attachment_id 	= avia_get_woocommerce_term_meta( $term->term_id, 'thumbnail_id' );

				$overlay 	= avia_get_woocommerce_term_meta( $term->term_id, 'av-banner-overlay' );
				$font 		= avia_get_woocommerce_term_meta( $term->term_id, 'av-banner-font' );
				$opacity 	= avia_get_woocommerce_term_meta( $term->term_id, 'av-banner-overlay-opacity' );

				if(!empty($style))
				{
					remove_action( 'woocommerce_before_shop_loop', 'woocommerce_taxonomy_archive_description', 11 );
					echo avia_woocommerce_parallax_banner_mod($attachment_id, $overlay, $opacity, $description, $font);
					$avia_config['woo-banner'] = true;
				}
			}
		}
	}
}

function avia_woocommerce_shop_banner_mod()
{
	global $avia_config;

	if(is_shop() || (is_product_category() && avia_get_option('shop_banner_global') == 'shop_banner_global') && !isset($avia_config['woo-banner']))
	{
		$options = avia_get_option();

		if( isset( $options['shop_banner'] )  && ( $options['shop_banner'] == 'av-active-shop-banner' ) )
		{
			$bg 		= $options['shop_banner_image'];
			$overlay 	= $options['shop_banner_overlay_color'];
			$opacity 	= $options['shop_banner_overlay_opacity'];
			$description= wpautop( $options['shop_banner_message'] );
			$font 		= $options['shop_banner_message_color'];

			echo avia_woocommerce_parallax_banner_mod( $bg, $overlay, $opacity, $description, $font );
		}
	}
}

function avia_woocommerce_parallax_banner_mod( $bg, $overlay, $opacity, $description, $font )
{
	if( is_numeric( $bg ) )
	{
		$bg = wp_get_attachment_image_src($bg, 'extra_large');
		$bg = ( is_array( $bg ) && $bg[0] != '' ) ? $bg[0] : '';
	}

	if( $font )
	{
		$font = "style='color:{$font};'";
	}

	if( $bg )
	{
		$bg = "background-image: url({$bg});";
	}

	$output  = '';
	$output .= '<div id="av_product_description" class="avia-section main_color avia-section-large avia-no-border-styling avia-full-stretch av-parallax-section av-section-color-overlay-active avia-bg-style-parallax container_wrap fullsize" data-section-bg-repeat="stretch" ' . $font . '>';
	$output .=		'<div class="av-parallax avia-full-stretch" data-avia-parallax-ratio="0.3">';
	$output .=			'<div class="av-parallax-inner av-parallax-woo" style="' . $bg . ' main_color background-attachment: scroll; background-position: 50% 50%; background-repeat: no-repeat;">';
	$output .=			'</div>';
	$output .=		'</div>';

	$output .=		'<div class="av-section-color-overlay-wrap">';

	if( ! empty( $overlay ) )
	{
		$output .=		'<div class="av-section-color-overlay" style="opacity: '.$opacity.'; background-color: ' . $overlay . '; "></div>';
	}

	$output .=			'<div class="container">';
	$output .=				'<main class="template-page content av-content-full alpha units">';

	if( $description )
	{
		$title = get_the_archive_title();
		$output .=				"<h1>{$title}</h1>";
		$output .=				"<p>{$description}</p>";
	}

	$output .=				'</main>';
	$output .=			'</div>';
	$output .=		'</div>';
	$output .= '</div>';

	return $output;
}

add_action('after_setup_theme', function() {
    remove_action( 'ava_after_main_container', 'avia_woocommerce_shop_banner', 11 );
    remove_action( 'ava_after_main_container', 'avia_woocommerce_big_cat_banner', 11 );
    add_action( 'ava_after_main_container', 'avia_woocommerce_shop_banner_mod', 11 );
    add_action( 'ava_after_main_container', 'avia_woocommerce_big_cat_banner_mod', 11 );
}, 999);

Best regards,
Ismael

Hi,

But unfortunatley that´s not a solution because this value is way to much for the smartphone view.

You can add css media queries and adjust the minimum height value on different screen sizes. Again, the jump is not visible or noticeable when there are images in the slide because the document automatically scrolls to the active slider. Do you still see the jump when the slider images are present and after the document scrolls to the active slider?

Best regards,
Ismael

Hey dvalansi,

Thank you for the inquiry.

enfold is auto scrolling to the top to display the image

This seems to be the default behavior of the gallery plugin. You may need to ask the plugin authors if it is possible to prevent scrolling when navigating through the gallery. Have you tried the plugin using any of the default themes (twenty-*)?

Best regards,
Ismael

Hi,

Thanks for that. It looks like the home page is scrolling down slightly automatically for some reason. Your CSS is being served from a location which is not generated by the theme, and you are not running any plugins. What is causing the styling to be served from the example location in private?

Best regards,
Rikard

Hey Tia,

Thank you for the inquiry.

We updated the jQuery script a bit. Please try to replace the script tag content with the following code.

jQuery(document).on('load', function(){
    jQuery('.avia-image-container.team-popup a.avia_image').addClass('team-popup-link');
    jQuery('.team-popup-link').addClass('no-scroll');
    jQuery('.team-popup-link').magnificPopup({
        type:'inline',
        midClick: true,
            fixedContentPos: true,
            overflowY: 'hidden'
    });
});

And according to a discussion, you can use this css code to completely prevent scrolling when the lightbox is open.

.mfp-zoom-out-cur {
     width: 100%;
     position: fixed;
     overflow: auto;
}

.mfp-wrap {
     top: 0 !important;
}

Best regards,
Ismael

Hey Michael,

Thank you for the inquiry.

The following script should force the document to automatically scroll to the tab section on page load when a hash or an anchor that points to a tab exists. Please add it in the functions.php file.

// custom script
// scroll to active tab section
function ava_custom_script_tab_section_scroll() {
    ?>
    <script type="text/javascript">
    (function($) {
        function av_trigger_scroll_to_tab(s, e,) {
            $(s).on(e, function(event) {
                var load = e == 'load';
                    loc = load ? window.location.hash : $(this).attr('href'), 
                    hash = load ? loc : loc.substring(loc.indexOf('#')),
                    tab = $('.av-section-tab-title[href='+ hash +']'),
                    parent = tab.parents('.av-tab-section-outer-container'),
                    pos = parent.offset();
    
                tab.trigger('click');
                
                if(hash) {
                    setTimeout( function() {
                        $(window).animate({scrollTop: pos.top - 100});
                    }, 300 );
                }
            });
        }
        
        $(document).ready(function() {
            var tabs = $('.av-tab-section-container');

            if(tabs.length == 0) return;

            av_trigger_scroll_to_tab( '.menu-item a', 'click' );
            av_trigger_scroll_to_tab( window, 'load' );
        });
    })(jQuery);
    </script>
    <?php
    }
    add_action( 'wp_footer', 'ava_custom_script_tab_section_scroll', 9999 );

Best regards,
Ismael

Hey virtualbis,
Thanks for your question, have you set up a media print styling?
Enfold only includes basic print styles in \enfold\css\base.css
this is what is there:

/* Print Styles
================================================== */
@media print{
.page-break{display:block;page-break-before:always}
p,a,strong{color:#000!important}
a{text-decoration:underline}
.entry-content a:after{content:" [" attr(href) "] "}
.related_posts a:after{content:attr(title)}
.container{width:100%}
#top{overflow-x:hidden}
.boxed#top{width:100%}
.container{width:100%;margin:0 auto}
.units,.unit{margin:0}
.container .one.unit,.container .one.units,.container .two.units,.container .three.units,.container .four.units,.container .five.units,.container .six.units,.container .seven.units,.container .eight.units,.container .nine.units,.container .ten.units,.container .eleven.units,.container .twelve.units,#top .flex_column{margin:0;margin-bottom:20px;width:100%}
#top.boxed .stretch_full{width:100%}
#top .offset-by-one,#top .offset-by-two,#top .offset-by-three,#top .offset-by-four,#top .offset-by-five,#top .offset-by-six,#top .offset-by-seven,#top .offset-by-eight,#top .offset-by-nine,#top .offset-by-ten,#top .offset-by-eleven{padding-left:0}
.avia-section-large .content,.avia-section-large .sidebar{padding-top:2%;padding-bottom:2%}
#top .flex_column.av_one_half{width:48%}
#top .flex_column.av_one_half.first{padding-right:2%}
.fixed_header #header,.html_header_top.html_header_sticky #header{position:relative;top:0}
.fixed_header #main{padding-top:0}
#header_main{border-bottom:0}
nav,#footer,#scroll-top-link,#av-cookie-consent-badge,.image-overlay,#top #main .sidebar,#commentform,.comment_container .miniheading,.comment_container .minitext,#top .avia-post-nav{display:none}
.avia-shadow{box-shadow:inset 0 0 0 rgba(0,0,0,0)}
.grid-entry .inner-entry{margin-right:0;box-shadow:0 0 0 0 rgba(0,0,0,0);box-shadow:0 0 0 0 rgba(0,0,0,0)}
.content{border:0}
.boxed .container{margin:0}
.avia-layerslider,.avia-fullwidth-slider{display:none}
.avia_transform .avia-icon-list .iconlist_icon{opacity:1;-moz-transform:scale(1);-webkit-transform:scale(1);transform:scale(1)}
#top .tab_titles{display:none}
#top .tabcontainer .tab.fullsize-tab{display:block;border-bottom:none}
#top .tab_content{display:block;visibility:visible;z-index:3;position:relative;overflow:auto;border-style:solid;border-width:1px;border-radius:2px;left:0;width:auto;background-color:#fcfcfc;color:#666}
#top .tab_inner_content{left:0}
#top .toggle_wrap{visibility:visible;display:block;position:static}
.grid-sort-container{width:60%;margin:0 auto}
#top .isotope-item{position:initial!important;top:0!important;left:0!important;-webkit-transform:translate3d(0,0,0)!important}
.avia-progress-bar{margin:5px 0;border:1px solid #555!important;border-radius:3px!important}
.avia-progress-bar .progress{box-shadow:inset 0 0 0 0 rgba(0,0,0,0)!important;border:0!important}
.avia-progress-bar div.progress .bar{border:0 solid;border-right:1px solid #555!important;border-radius:0}
.avia-testimonial-image{margin:0;width:100%;float:none;text-align:center;margin-bottom:15px;height:auto}
.avia-grid-testimonials .avia-testimonial-meta{margin-left:0}
body div .avia-testimonial{display:block;float:left}
.avia_transform .avia-testimonial .avia-testimonial-image{opacity:1;-webkit-transform:scale(1);-moz-transform:scale(1);transform:scale(1)}
.avia_transform .avia-gallery-thumb img{opacity:1}
}

You can add more to your child theme stylesheet by wrapping it in the print media query:

@media print{
/* your print style */
}

Best regards,
Mike

Hi,
For that page try this css:

#top.page-id-38 .flex_column.avia-builder-el-2 {
	 overflow: auto;
}

but on that page the color section that the table is in is hidden on mobile.
If you have multiple tables on multiple pages then I recommend add a custom class to the column that the table is in, if you use the custom class “scroll-table” then you could use this css instead:

#top .scroll-table {
	 overflow: auto;
}

After applying the css, please clear your browser cache and check.

Best regards,
Mike

Hi,

Thank you for your patience.

On Firefox, the scroll position is correct on initial load and when you do a hard refresh, which means that the script only fires correctly when you actually refresh the page. Firefox doesn’t seem to automatically refresh the page when you try to access it again by pressing the ENTER or RETURN key in the URL field. You have to do a hard refresh manually. On Chrome, this always works because the browser always refreshes the page automatically when you try to access the page again using the browser URL field. Scrolling also works correctly when you try to access the section using the anchor links at the very bottom of the page.

We modified the filter in the functions.php file a bit to adjust the offset on firefox browser but again this will only work on Firefox if the page is actually refreshed.

function avf_header_setting_filter_mod($header) {
	$offset = strpos($_SERVER['HTTP_USER_AGENT'], "Firefox") === false ? 50 : 75;

	if( ! wp_is_mobile() ) {
		$header['header_scroll_offset'] = $header['header_scroll_offset'] + $offset;
	}
	return $header;
}
add_filter('avf_header_setting_filter', 'avf_header_setting_filter_mod', 9999, 1);

Best regards,
Ismael