Canvas Support

Gallery not showing within tabs plus Carousel Query

3 replies · opened Jan 26, 2023

EedsadesignsJan 26, 2023

Thanks for a great theme - I've just renewed my support as there's a couple of things I'd like some assistance on if poss, I'd really appreciate it....

Please see:
https://blockplymouth.co.uk/gym4

  1. On the Tabs (Membership Options,Gallery,Group Exercise Timetable,Make An Enquiry) - When you click on Gallery, nothing happens until you re-size the browser window and then the images all load? Why is this?

  2. Also on the tabs section, when viewing via mobile, I don't want the alternative nav for the tabs section (see screenshot), I'd like to still have the 4 blocks (maybe 2x2) - Also strangely the Gallery Tab heading isn't even showing on mobile??

  3. Further down the page on 'Meet the Team' section - How do I stop the navigation arrows from animating in on hover (I'd actually just like them to reside where they ended up all the time). Plus on desktop, when hovering over an image here the additional text comes up but it doesn't with mobile? It changes to click - where do I correct this?

SSemicolon WebSTAFFJan 28, 2023

Hello,

Thanks for your Patience!

  1. Consider using the following JS Code at the bottom of the Page:
    [ch_pre]<script>
    jQuery( '.tabs' ).on( 'tabsactivate', function( event, ui ) {
    setTimeout(function(){
    $('.grid-container').filter('.has-init-isotope').isotope('layout');
    }, 500);

    });
    </script>[/ch_pre]

  2. Simply remove the .tabs-responsive Class from the .tabs Element. This will prevent the Tabs from turning into an accordion and retain its state. Additionally, there are some HTML Validation errors on the Page which might be causing some unnecessary issues. Please check here: https://validator.w3.org/nu/?doc=https%3A%2F%2Fblockplymouth.co.uk%2Fgym4 and fix the issues related to the Unclosed HTML Tags and Duplicate IDs.

  3. You can consider using the following CSS to fix the issue the position of the buttons regardless of their hover positions:
    [ch_pre type="css"].owl-carousel .owl-nav [class*=owl-] {
    opacity: 1;
    left: -18px;
    }

.owl-carousel .owl-nav .owl-next {
left: auto;
right: -18px;
}[/ch_pre]

The Overlay Content displayed on the Team Member Image is activated on Hover which is automatically changed to Touch on Mobile Devices. So it is required for the user to touch on the Team Member Image for the Overlay Content to display. Currently this is the only solution and it appears to be working fine on Mobile Devices in our tests.

Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

EedsadesignsFeb 21, 2023

Thanks so much for your helpful reply.

With the Meet The Team section previously spoken about on:
https://blockplymouth.co.uk/gym4

How do I change it so it only shows the Overlay Content on click (rather than hover on desktop).

Many Thanks!

SSemicolon WebSTAFFFeb 22, 2023

Hello,

Unfortunately, this functionality is currently not supported and will require customizations in order to make this work on click. The current overlay functionality works with the Hover Animation module which can only work on hover. We will try including a click event listener in the future versions of Canvas to support this functionality.

Thanks for your Patience.

Meanwhile, do let us know if we can help you with anything else or if you find any further issues with Canvas.

Have the same question, or something new?

Sign in to the Canvas dashboard to reply or open your own topic. Canvas owners get direct help from the SemiColonWeb team.

Reply on the dashboard