Slides do not appear in tablet and mobile view of Blocksy theme

Hi @franzxk!

The problem I see on your website is, that the same slider is used twice. We have a limitation, that you can only use one slider once on the website, because we have to use HTML ID-s to identify our sliders, which have to be unique for our CSS and JS codes. So what I suggest is, that you should duplicate your slider; use one in desktop view, use the other on mobile view and it should be fine:

	<div data-device="desktop">
	...
	[1st Slider Code in between]
	...
	</div>
	<div data-device="mobile">
	...
	[2nd Slider Code in between]
	...
	</div>

If you would have an issue after this too, let me know!

Hi @nextendweb_gabor,

First of all, thanks a lot for your rapid response!

Well, as I mentioned, it is out-of-my-control, the “duplication” of the slider happens due to the Blocksy themes’ way of enabling people to create different header compositions for desktop and mobile views.

Although Smart Slider has a slider duplication feature, your suggestion is not feasible for the non-expert WordPress admin. Background is, that I’m preparing a base WordPress installation as a sort of “template” for other (autonomous) community groups in our big community, to help them to start with their own community group website. This base installation will already contain the slider with a basic set of slides.

Now, if one of those (less experienced) WP admins modifies one of the sliders, he/she would need the instructions on how to

• remove the mobile duplicate from the mobile header configuration,
• “kill” the mobile duplicate slider,
• re-create the mobile duplicate slider by duplicating the modified desktop slider version, and
• finally re-configure the mobile header correctly (this might include some more configuration steps in the themes’ configuratioin!)

Overall, this is too complicate and error-prone for the average WordPress admin in the community groups out there (I’m talking about approx. a hundred groups, even more in the long-term!) – and thus not a feasible workaround or process for us. Just imagine all the sites where the desktop and mobile versions are different, just because the admin didn’t realize what he/she has to do…

Why don’t you use unique HTML classes instead of id’s for your JS code? This way, having the same slider twice on the same page (but only one is visible at some point in time) wouldn’t be a problem, would it?

Please consider this – Thanks!

Best regards
Franz Kohl

We are using IDs, because themes and page builders are creating default CSS codes to cover every part of their content, which are quite strong, and with classes we couldn’t create strong enough CSS codes to not have our codes overwritten by them.

Simply duplicating a content is rather a bug in Blocksy’s code. For once, you are having twice the amount of content on your website than what you need, because it could be handled by a simple display:none; CSS code to hide the container element on the view, where you don’t want to see it. And for second, using HTML IDs is one of the most basic things of website development, so a theme shouldn’t enforce it on developers not to use them.

From our end there are two things you can do:
1. Use iframe shortcode publishing:
https://smartslider.helpscoutdocs.com/article/1720-publishing-on-wordpress#iframe
This way your slider will load inside an iframe, which will make it completely separate from the rest of your site. This way you can have the same slider any number of times on your page.

2. In the Pro version you could use the “Hide on” feature:
https://smartslider.helpscoutdocs.com/article/1774-slider-settings-size
which could also hide the slider on the selected views.

Hi @nextendweb_gabor,

Thanks for providing these two alternatives!

The way the Blocksy theme allows different header configs for desktop and tablet/mobile always causes those two (partially) duplicate HTML code paths – so I cannot prevent this. I didn’t try alternative #1 because I decided to use another workaround in the meantime (see below).

I did not check for alternative #2, because we do not have the Pro version, and buying it just for this one test (with the risk that it might not work with the blocksy specific way of handling the two views) might be senseless.

My workaround is, that I do not use the Blocksy header configuration for adding the slider, but implemented calling the slider shortcode within header.php (in the blocksy child-theme, of course) at the appropriate position. This way, the slider code appears only once in the pages HTML code, and everything works as expected.

Nevertheless, many thanks for your rapid and comprehensive support, I really appreciated it!

Best regards
Franz Kohl