Docs

[markozg]

Dear X team,
I looked at your knowledge base but I couldn’t find a solution for my problem;
I would like to have one slider on desktop and the other one on mobile phone. I tried with Cornerstone but it isn’t so successful because I would need to make 2 or 3 sliders more (tablet, horizontal mobile phone etc.).
Please give me a solution.
Thank you in advance!
Best regards,
Marko

[Rad]

Hi there,

Thanks for writing in.

Should the slider exactly different for each device, or should it be the same but just different arrangements? Unfortunately, rev. the slider doesn’t have available options for device type visibility. It only recognizes one device, it’s mobile visibility.

You have two option

1. You may try utilizing Section or Row’s HIDE BASED ON SCREEN WIDTH option, it will hide the content within it. That option is available when inspecting section and rows.

2. Using javascript and utilize the slider API. Like detect screen width through javascript, then destroy slider instance through API. This is done through customization and it’s static codes.

Thanks!

[markozg]

Dear Rad,

thank you for the prompt reply.

1. When I tried HIDE BASED ON SCREEN WIDTH with Cornerstone, it worked for the mobile version and desktop, but not for other devices. Does it mean that I would have to make more sliders according to the devices (mobile horizontally, tablet etc.). If yes, could you please let me know where could I find their dimensions?

2. I think my case would be closed with this idea but I’m not sure how to do this. If you have an example, I would really be grateful.

Sorry for bothering and thanks in advance.

[Christopher]

Hi there,

Please hide section/row on medium and small devices, see the attachment. Please clear cache your browser and check again

Thanks.

[markozg]

I tried but I don’t want the mobile slider to appear on desktop version.
What are the dimensions of medium and small devices – I will prepare new sliders if that is only thing I could do?

Thanks in advance.

[Christian]

Medium size: 768px – 979px
Small: 481px – 767px
Extra Small: 480px & Smaller

You can see the size when you view through screen size viewer (see attachment)

Thanks.

[Author]

Posts