Ajuda Ocultar Elemento no PC e só mostrar no Celular

Jhon de la Vega · 15/04/2017

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?

natsu88 · 15/04/2017

¨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:

robikhan · 15/04/2017

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;
	}
}

Souhiro · 15/04/2017

Leete este articulo:
compartidísimo: Personalizar la Plantilla Móvil de Blogger. Lo que Necesitas Saber
La parte que deseas esta en: "Excluyendo elementos en la versión móvil"

slashmayax · 15/04/2017

GitHub - cbschuld/Browser.php: A PHP Class to detect a user's Browser

Daniel Muñoz · 15/04/2017

Con Medias Querys es la mejor forma, CSS media queries - CSS | MDN

Johan Sibulo · 15/04/2017

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

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.

Jhon de la Vega · 16/04/2017

Muchas gracias a todos pos su ayuda probare cada uno de sus comentarios se los agradezco

Nao2311 · 16/04/2017

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

Norlan30 · 19/04/2017

Nao2311 disse:
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

gracias por el script saludes

Nao2311 · 19/04/2017

Norlan30 disse:
gracias por el script saludes

De nada estamos para apoyar ;D saludos 😀

Jusosard · 09/10/2023

Quiero uno para wordpress quien tiene por favor

Ajuda Ocultar Elemento no PC e só mostrar no Celular

Jhon de la Vega

natsu88

robikhan

Souhiro

slashmayax

Daniel Muñoz

Johan Sibulo

Jhon de la Vega

Nao2311

Norlan30

Nao2311

Jusosard

Tópicos similares