Tabs overlapping on mobile + Global Block overflowing tab panel

[one_eyed_man]

Hi there. I set up a Tabs element with four tabs and want to insert a Global Block of Post Tiles inside each tab.

I’m currently facing two problems:

1. The tabs overlap and cover each other’s labels when the screen size drops below 979px
2. When I insert the Global Block shortcode in the tab content, it hangs off the edge on the right side

Both issues are visible in this screenshot:

I’ve tried changing the margins, padding, and width/max-width on each of the layers to no avail. Any ideas?

[tristup]

Hi @one_eyed_man,

Thanks for reaching out.
Sometimes only a screenshot does not help us to recognize the issue you are having. We need to examine the page to get the cause of the problem. If the login is required to check your website, please provide credentials for your site in a secure note to examine it further, including:

– WordPress Site URL & Login URL
– WordPress Admin username/password
– Specific page where you have added this.

To create a secure note, click the key icon underneath any of your posts.

Thanks

[one_eyed_man]

No worries. Added my credentials to my first post.

[ruenel]

Hello @one_eyed_man,

Actually the Tabs did not overlapped. The Tab menu item texts were truncated because there isn’t enough space to display the texts. You will need to collapse the Tab menu items when the screen gets smaller instead just like this:

To be able to do that, you need to do the following:
1.) Visit this old thread, Tabs element not responsive, and copy the inline element CSS to your Tab element.
2.) Change the 480 pixels to 768 so that it the Tab menu items will collapse on the iPad.

3.) You need to change the maximum width of the Individual Tabs to 100%.

Kindly let us know how it goes.

[one_eyed_man]

Excellent. That solves the Individual Tab problem.

Now I just need to figure out why the content inside the Panel is overflowing the element and cutting off on mobile:

This only happens after I paste my global block [cs_gb name=“video-tiles-editing”] into the tab content. I tried changing every width setting I could find in my global block, but no luck. What do you think?

[ruenel]

Hello @one_eyed_man,

Please edit all the Global Blocks and set the width in the Row element settings to 100%.

Best Regards.

[one_eyed_man]

Cool, that fixes the overflow. The tiles are too small now though when the screen size is below 550px:

I’d like the single tiles to fill the tab panel with just a small margin on each side.

I tried adding this code to the element CSS for the “Posts”, “Post”, and “Article” layers:

@media(max-width: 550px){
  width: 100% !important;
  min-width: 100% !important;
  max-width: 100% !important;
  height: 100% !important;
  min-height: 100% !important;
  max-height: 100% !important;
}

But none of them did the trick.

[ruenel]

Hello @one_eyed_man,

Please edit your Global Blocks again and set a width and maximum width for your Posts Row element.

Best Regards.

[one_eyed_man]

I set a width and max-width for the Posts row and it had no effect. As you can see, the size of the tiles are unconstrained by the width of the Posts row:

I think it may not matter though, because while the tiles appear too small when I size down a desktop browser window, they appear normal when I view on my actual phone:

However, it looks like the overflow problem is not completely fixed after all. It looks fine when the first/default tab is open, but when I open any other tab on mobile, the overflow problem reappears. I tried multiple browsers and incognito windows and the result was the same:

Each tab uses a different Global Block that I made, but as far as I can tell, all the size settings are exactly the same for each Global Block. The only difference between them is the Taxonomies of the Looper Provider on the Posts row.

If all the size settings are the same, why do my Global Blocks overflow the 2nd, 3rd and 4th tab, but not the first tab?

[christian]

Hey @one_eyed_man,

I see the issue, even resizing the desktop browser. What’s happening is most probably due to lazy loading. When you load the page, the Tab element’s Javascript calculates the size of the tab panels taking into account the content within them.

Because images inside the 2nd, 3rd and 4th tab aren’t loaded yet possibly due to image optimization (I see you’re using an image optimization plugin), it messes up the sizing calculation of the Tab element.

During my test, I saw a possible quick fix and it’s fixed on my end and when you’re logged in. I’ve set the Panels Paddings to 0.

As you can see in the screenshot below, there is no more Padding in the source code and there’s no overflowing.

But when you log out or view the site in incognito, the paddings are still there that means I’m still seeing the old or the cached version of the page. Please clear all caches includiing the web host or server cache. Reach out to your web host if you’re not sure how to clear the server’s cache.

As you can see in the screencast below, setting the Panel’s side paddings fixes the issue. But, this is not a sure solution yet.

If the issue persists, please active your caching plugin then clear all caches again inlcuding the server’s cache then deactivate ALL 3rd party plugins so we’re sure no plugin is affecting the Tab element.

Thanks.

[one_eyed_man]

Top-notch support. Thank you for the clear explanation of what’s happening @christian.

I’m getting the same result as you at the moment - when I’m logged in on desktop, the issue appears fixed:

But when I view the frontend on mobile when I’m not logged in, the issue reappears:

Before I did either of the above, I first flushed my Dynamic Cache and Memcached via my Siteground host tools.

I just re-enabled W3 Total Cache (I set it up according to your help article here), purged all caches, disabled all plugins, and flushed my Dynamic Cache/Memcached again for good measure.

I then visited my site in an incognito browser on my phone. Sadly, the issue persists. (I can’t take a screenshot because of Android’s new mandatory “security policy” unfortunately, but I assure you it’s there.)

I am potentially able to live with this if there’s no other solution. However, I have another more pressing concern that relates to what you said about lazy loading/Javascript issues on the tabs.

On mobile, when I use my dropdown to navigate to Videos > Motion Graphics (or 2D Animation, or DP & Cam Drone/Op), the page does not open the correct tab. It always opens the first tab (Editing). Additionally, when I tap to open tab 2, 3 or 4 manually, the site does not respond for 5-6 seconds. It appears that the tabs will not open until their contents have loaded fully. Since their contents are a bit weighty, it means that my navbar is somewhat useless on mobile, because only Videos > Editing actually opens the correct tab. (The menu options work as intended on desktop after only a ~0.5 second delay, probably because I have a fast wired internet connection on my computer.)

Do you have any recommendation on how to fix this loading issue so my tabs (and thus my navbar menu) functions properly on mobile? I read that X theme/Cornerstone has native lazy loading for its elements, so I disabled lazy loading in my caching (W3 Total Cache) and image optimization (Optimole) plugins, but I’m willing to experiment with those if you think it would be useful.

[christian]

Hey @one_eyed_man,

The issue when viewing the incognito is that you’re still seeing the old cached version. I understand you cleared the cache but apparently, the cached version is what we’re still seeing.

he updated version of the page does not have a padding. In the screenshots below, notice that there’s no padding in the Logged In version of the page but viewing in Incognito, there’s still padding.

Regarding the loading issue, regretfully, there’s no solution but to hide the Tab element on mobile using the Hide During Breakpoints feature then display your content regularly.

Because your content is heavy, it’s not recommended to use Javascript powered elements like Tabs and Accordions. It’s best to display heavy contents statically. There are CSS only Tabs online that might be the solution to your loading problem. But, that would be beyond the scope of our theme support to discuss. We can only do that in our One premium support.

Thanks.

[one_eyed_man]

Interesting. Do you know any other way I could clear my cache? I searched Siteground’s documentation and the only guidance that comes up for cache clearing is what I already did.

Regarding the loading problem - it seems the Tabs element might not be my best option on this page. What I would like to achieve is to have four buttons, and when a user clicks on one it shows posts from that category, without refreshing the whole page or navigating to a new page. Would this be possible with Essential Grid?

[ruenel]

Hey @one_eyed_man,

Please do check these articles:

• https://www.siteground.com/kb/clear-site-cache/
• https://www.siteground.com/tutorials/getting-started/the-supercacher/

Yes, the Essential Grid maybe able to help you. Please check out this out:

• https://www.essential-grid.com/manual/give-visitors-the-ability-to-filter-and-sort-grids/

Best Regards.

[one_eyed_man]

As I said, I already read those Siteground articles and tried what they suggested. It did not fix the problem.

Ok, I’ll check out Essential Grid.

[ruenel]

Great! Please let us know if the Essential Grid plugin fits the needed functionality for your site.

Thanks.