Individual background images for each tab (tab element)

Hi,

@Guenni07: Yes, I can reproduce the issue but I’m not sure why it’s not working. It does work when you set the background-attachment to scroll.

@enricobaungart: You have to set the background-attachment” to “scroll” on mobile view. Please add the following css code.

@media only screen and (max-width: 767px) {
   .av-layout-tab {
       background-attachment: scroll !important;
       background-position: center center !important;
   }
}

Best regards,
Ismael

Hi,

Thank you for the update. I can’t reproduce the issue on my end but try to decrease the padding between the tab title.

@media only screen and (max-width: 989px) {
    #top .av-section-tab-title {
       padding: 10px 13px 0px 13px;
       display: inline-block;
       text-decoration: none;
   }
}

Please remove browser cache or hard refresh before testing the page.

Best regards,
Ismael

Hi,

Thank you for the update.

Are you using Safari? Please try this script in the functions.php file.

// custom script
function add_custom_script(){
?>
<script>
(function($){
	function g() {
       var tab = $('.av-tab-section-tab-title-container')
           w   = tab.width() + 50;
       tab.css('width', w + 'px')
    }

    $(window).on('resize', function() {
        g()
    })
})(jQuery);
</script>
<?php
}
add_action('wp_footer', 'add_custom_script');

Remove browser cache or hard refresh before checking the page.

Best regards,
Ismael

Hi,

@enricobaumgart: I think it’s better if the background attachment settings is set to scroll. The “fixed” settings create a lot of issues on mobile view.

Best regards,
Ismael

Hi,

But even the bg image is fixed, the above mentioned issue occurs.

Did you remove the previous modifications after setting the attachment to “scroll”? Please set it to “scroll”, not “fixed”.

Best regards,
Ismael

Hi,

This is how I see the site.

// https://imgur.com/a/QIhNn

Please make sure that you’re not looking on a cached version of the site. What is the actual model of your mobile device?

Best regards,
Ismael

Hi,

One workaround is to replace the tab section with another element on mobile view. You could use the Tabs or Accordion element instead to make the mobile view much more simple.

Best regards,
Ismael

Hi,

The problem is that we can’t reproduce the issue as you can see in the provided screenshot. Yes, the tab section element is quite new and is subject to improvement.

// https://imgur.com/a/QIhNn

Best regards,
Ismael

Hi,

but even on your screenshot is something not correct, as I mentioned in this post:

The arrow is actually centered but it looks like that in the screenshot because I’m switching between the landscape and portrait view. The arrow position will not update automatically if you’re switching between orientations in an emulation.

// https://imgur.com/a/QNonC

I’m not really sure how I can continue with the tab section. Seems that I’ve to remove it completely and think about something else.

There are no issues with the element on desktop view so you can disable it on mobile view and replace it with another element instead. You can try the Tabs or Accordion element.

Best regards,
Ismael