It often happens that we are asked whether or not there is a way to hide a Nosto's recommendation element only when it hits mobile devices: the answer is "yes" and with a pinch of code you will be able to do it yourself.
Hide a slot
If you want to show your Nosto's recommendation slot only on desktop/tablet devices, all you will have to do is to use a bit of CSS and media queries, something like this:
<style type="text/css">
@media (max-width: 501px){
#$divId{
display: none;
}
}
</style>
where $divId is a Nosto proprietary variable which, once the slot (and its template) will be "injected" in the page, will be rendered with the ID name of the slot (e.g. #frontpage-nosto-1)
Where to place this snippet?
At the top of your template - unless in your CSS code you have been playing already with the "display" property of the slot.
N.B. this doesn't prevent the images within the slot to be loaded onto your cache. If your intent is to hide the slot on mobile for speeding up the loading time, you should consider to use a lazy load method.
Show a slot
In case you want to show a recommendation slot only when it hits the desktop screen, the code will look like this:
<style type="text/css">
#$divId{
display: none;
}
@media (max-width: 501px){
#$divId{
display: block;
}
}
</style>
Where to place this snippet?
At the top of your template - unless in your CSS code you have been playing already with the "display" property of the slot.