Ayuda Ocultar Elemento en PC y solo mostrar en Movil

  • Autor Autor Jhon de la Vega
  • Fecha de inicio Fecha de inicio
Jhon de la Vega

Jhon de la Vega

Dseda
Social Media
Verificado
Verificación en dos pasos activada
Hola amigos, espero puedan ayudarme.

Quiero colocar un elemento en mi Plantilla, pero que solo se muestre en Movil, y no en PC escritorio.

He tratado de buscar codigos, pero ninguno me funciona ¿Alguien podría ayudarme?
 
¨Para esto debes usar bootstrap, aqui te mando el codigo:

<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<div class="mostrar visible-xs" >
Aqui va el tema
</div>

La clase visible-xs te permite mostrar el contenido en pantallas pequeñas pero no las muestras en pantalla grande. Si tienes dudas escribeme :encouragement:
 
Puedes usar CSS.


HTML: 
<div class="mostrarenmobile">// Tu Contenido</div>

Tu CSS:
HTML: 
@media screen and (min-width: 800px) { /* Con esto lo ocultamos en la pc y se deja visible solo en mobile */
	.mostrarenmobile{
		display: none;
	}
}
 
Mira hay un problema también de colocar nuevas condiciones a la web, y eso lo verás reflejado en Web Master Tool, donde aparecerán errores como creación e nuevas url que se leen para movil, algo así, Porque aquí tengo una

af81f17222744a9fafe8b377728c13e4.png


Ejemplo: misitio.com/mi-sitio.html y con condiciones nuevas para moviles y para pc, crean estas...
misitio.com/mi-sitio.html?m=0 ó misitio.com/mi-sitio.html?m=1 y puede verse como páginas duplicadas.
 
Muchas gracias a todos pos su ayuda probare cada uno de sus comentarios se los agradezco
 
Si usas blogger te doy este codigo que te servirá a full
HTML: 
<script>
$(document).ready(function(){
$('#mobil').hide(); 
$('#pcs').hide(); 
function getUrlVars() {
var vars = {};
var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi, function(m,key,value) {
vars[key] = value;
});
return vars;
}
var first = getUrlVars()["m"];
if (first == "1"){ 
$('#mobil').show(); 
}else{
$('#pcs').show(); 
 }
});
</script>
<div id='mobil'></div>
<div id='pcs'></div>
PONES EN EL DIV MOBIL LO QUE VA EN MOBIL Y EN EL PC LO QUE IRIA EN PC 😀 UN SALUDO
 
Última edición:
Nao2311 dijo:
Si usas blogger te doy este codigo que te servirá a full
HTML: 
<script>
$(document).ready(function(){
$('#mobil').hide(); 
$('#pcs').hide(); 
function getUrlVars() {
var vars = {};
var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi, function(m,key,value) {
vars[key] = value;
});
return vars;
}
var first = getUrlVars()["m"];
if (first == "1"){ 
$('#mobil').show(); 
}else{
$('#pcs').show(); 
 }
});
</script>
<div id='mobil'></div>
<div id='pcs'></div>
PONES EN EL DIV MOBIL LO QUE VA EN MOBIL Y EN EL PC LO QUE IRIA EN PC 😀 UN SALUDO
Hacer clic para expandir...

gracias por el script saludes
 
Quiero uno para wordpress quien tiene por favor
 
Hay que estar conectado o registrado para responder aquí.

Temas similares

trabajosweb
[AYUDA] Ocultar elementos del blog para dispositivos móviles.
Respuestas
9
Visitas
1K
MrGoogle
M
Atrás
Arriba