Rendere contenuto visibile solo su mobile

[chalet4sorelle]

salve,ho visto che è possibile mettere un contenuto visibile solo su schermo desktop.questa cosa mi è molto utile,ma mi sarebbe utile anche l'opposto,ovvero visualizzare un contenuto solo su mobile e non su desktop.è possibile?
grazie per il supporto

[karl94]

Potresti indicare un esempio per cui ritieni utile avere una funzionalità simile?

[chalet4sorelle]

ho uno slideshow che non ho reso visibile su mobile per motivi di dimensioni dell'immagine.ora vorrei creare un secondo slideshow uguale al primo ma con dimensioni diverse per il mobile in modo da renderlo visibile solo su mobile.im questo modo avrei uno slideshow visibile per ogni versione e ottimizzato per la stessa.el primo caso si può fare spuntando l'opzione nell'html,nel secondo caso non sono riuscito a farlo.spero di essere stato chiaro...

Io non la vedo questa slideshow di cui parli. Comunque se stai usando il tag viewport dovresti poter nascondere qualsiasi div raggiunta una certa larghezza orizzontale cosí:
@media screen and (max-width: 400px) {
#divslideshow {display: none;}
}

Lo devi aggiungere alla fine del .css che hai importato nella pagina della slideshow.

[chalet4sorelle]

niente...si vede anche nel desktop...

questo è il css

#slideshow {width: 400px; padding: 0px; margin: 10px auto; text-align: center} #slideshow input {display: none}
#mask {width: 400px; height: 100%; overflow:hidden}
#slides {background: #f7f7f7; padding: 10px; border: 2px solid #ededed; border-radius: 10px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .4), 0 0 0 1px rgba(255, 255, 255, .9), 0 0 10px 0px rgba(0, 0, 0, .1)}

.slide_content {position: relative; width: 500%; -webkit-transition: all 800ms cubic-bezier(0.670, 0.000, 0.170, 1.000); -moz-transition: all 800ms cubic-bezier(0.670, 0.000, 0.170, 1.000); -ms-transition: all 800ms cubic-bezier(0.670, 0.000, 0.170, 1.000); -o-transition: all 800ms cubic-bezier(0.670, 0.000, 0.170, 1.000); transition: all 800ms cubic-bezier(0.670, 0.000, 0.170, 1.000)}

#pan1:checked ~ #slides .slide_content {margin-left: 0}
#pan2:checked ~ #slides .slide_content {margin-left: -100%}
#pan3:checked ~ #slides .slide_content {margin-left: -200%}
#pan4:checked ~ #slides .slide_content {margin-left: -300%}

.pannello {width: 20%; float: left; font-family: arial; font-size: 12px; color: #646464; text-shadow: 0 1px 1px rgba(255, 255, 255, .7)}

#active {margin-top: 5px}
#active label {display: inline-block; width: 21px; height: 21px; border-radius: 1em; background: #f7f7f7; border: 2px solid #ededed; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .4), 0 0 0 1px rgba(255, 255, 255, .7), 0 0 4px rgba(0, 0, 0, .1); margin: 5px; cursor: pointer}
#active label:hover {background: #fff}

#pan1:checked ~ #active label:nth-child(1),
#pan2:checked ~ #active label:nth-child(2),
#pan3:checked ~ #active label:nth-child(3),
#pan4:checked ~ #active label:nth-child(4) {background: blu; box-shadow: inset 0 0 0 2px #f7f7f7, 0 0 0 1px rgba(255, 255, 255, .7), 0 0 4px rgba(0, 0, 0, .1)}

@media screen and (max-width: 420px) {
#divslideshow {display: none;}
}

questo è l'html

<p style="padding:10px"><link rel="stylesheet" type="text/css" href="slideshowmobile.css"></p><div id="slideshow">

<!-- Radio -->
<input checked="checked" name="pan" id="pan1" type="radio">
<input name="pan" id="pan2" type="radio">
<input name="pan" id="pan3" type="radio">
<input name="pan" id="pan4" type="radio">
<div id="slides">
<div id="mask">
<div class="slide_content">

<div class="pannello" id="p1"> <!-- Pannello 1 -->
<div style="font-weight: bold; font-size: 20px; text-align: center">Chalet 4 sorelle</div><div style="text-align: justify; padding: 0 10px">Testo
<div style="background: url(http://chalet4sorelle.altervista.org/Foto/chalet-d.jpg) no-repeat center ;background-size: 100%; height: 130px; margin: 5px 0;border: 2px solid #e0e0e0;border-radius: 10px;box-shadow: 0 0 0 1px rgba(255, 255, 255, .4)"></div></div>
</div>

<div class="pannello" id="p2"> <!-- Pannello 2 -->
<div style="font-weight: bold; font-size: 20px; text-align: center">Bar</div><div style="text-align: justify; padding: 0 10px">Testo
<div style="background: url(http://chalet4sorelle.altervista.org/Foto/bar.jpg) no-repeat center ;background-size: 100%; height: 130px; margin: 5px 0;border: 2px solid #e0e0e0;border-radius: 10px;box-shadow: 0 0 0 1px rgba(255, 255, 255, .4)"></div></div>
</div>

<div class="pannello" id="p1"> <!-- Pannello 3 -->
<div style="font-weight: bold; font-size: 20px; text-align: center">Ristorante</div><div style="text-align: justify; padding: 0 10px">Testo
<div style="background: url(http://chalet4sorelle.altervista.org/Foto/tavolini.jpg) no-repeat center ;background-size: 100%; height: 130px; margin: 5px 0;border: 2px solid #e0e0e0;border-radius: 10px;box-shadow: 0 0 0 1px rgba(255, 255, 255, .4)"></div></div>
</div>

<div class="pannello" id="p2"> <!-- Pannello 4 -->
<div style="font-weight: bold; font-size: 20px; text-align: center">Spiaggia</div><div style="text-align: justify; padding: 0 10px">Testo
<div style="background: url(http://chalet4sorelle.altervista.org...ombrelloni.jpg) no-repeat center ;background-size: 100%; height: 130px; margin: 5px 0;border: 2px solid #e0e0e0;border-radius: 10px;box-shadow: 0 0 0 1px rgba(255, 255, 255, .4)"></div></div>
</div>
</div>
</div>
</div>
</div>

<div id="active"><center>
<label for="pan1"></label>
<label for="pan2"></label>
<label for="pan3"></label>
<label for="pan4"></label>
</center></div>


<script type="text/javascript">
//SLIDESHOW A SCORRIMENTO AUTOMATICO
//by bored - http://ffmagazine.forumfree.it/?t=65226584
var slideJRadio = document.getElementById("slideshow").querySelector All('input[type="radio"]');
var eSlide = 1;
var slideJTime;
function setSlideTime(){
slideJTime = window.setInterval(function(){
if(eSlide === slideJRadio.length){
eSlide = 0;
}
slideJRadio[eSlide].checked = true;
eSlide++;
}, 4000);
}
setSlideTime();
document.getElementById("slideshow").onmouseover = function(){
window.clearInterval(slideJTime);
}
document.getElementById("slideshow").onmouseout = setSlideTime;
for(var i = 0; i < slideJRadio.length; i++){
slideJRadio[i].onclick=function(){
eSlide = this.id.match(/[0-9]+/) - 1;
}
}
</script><p></p>

Per nascondere il div con id slideshow al di sotto di 400px:
@media screen and (max-width: 400px) {
#slideshow {display: none;}
/*qui puoi aggiungere anche altre regole css per gli altri div*/
}

oppure se devi rendere visibile un div su mobile, devi impostarlo come display:none; nel css principale e poi aggiungere:
@media screen and (max-width: 400px) {
#divdamostrare {display: block;}
/*qui puoi aggiungere anche altre regole css per gli altri div*/
}

[saitfainder]

Si sta parlando di Alterpages, quindi mi chiedo: perché non usi lo slideshow immagini di Alterpages? È responsive, quindi ti basta usare quello e va bene sia per desktop che per mobile. Lo trovi su Aggiungi > Multimedia > Slideshow immagini.

[chalet4sorelle]

niente,non va...non ho proprio idee...forse sbaglio io nell'impostarlo...

[chalet4sorelle]

non uso quello perchè non parte in automatico e non ho la possibilità di inserire del testo per ogni slide

dov'è la slideshow?

[saitfainder]

non uso quello perchè non parte in automatico e non ho la possibilità di inserire del testo per ogni slide

A parte il fatto che le didascalie le puoi inserire da qualche giorno c'è anche lo "slideshow news" che scorre da solo e puoi inserire testi e link.

[chalet4sorelle]

@metalevel: lo slideshow ora dovrebbe essere visibile, www.chalet4sorelle.it

ho appena provato ad inserire lo slideshow di alterpages, ho la possibilità di decidere se metterlo chiaro o scuro, ballini o icone per andare avanti e indietro e se adattare o riempire l'immagine, del testo e dello scorrimento automatico non vedo nessun pulsante per inserirli.

edit: @saitfainder: con lo slide news ottengo il risultato voluto,grazie per l'aiuto!!!

Scusa, ma a questo punto non credo di avere inquadrato bene il tuo problema. La slideshow funziona bene sia su pc che su smartphone.

[chalet4sorelle]

l'ho sostituito con quello consigliato da saitfainder per questo ora lo vedi funzionante