1

Hola he puesto un widget para los cookies y funciona bien, pero en servidor y probando en dispositivo móvil, se sale de la pantalla y por cual, me la hace más grande, aunque el contenido se mantenga igual. Osea, el contenido se mantiene igual en la pantalla, pero para ver el widget entero hay que hacer scroll hacia la izquierda, no es que haga mas grande el contenido de la página, pues lo que aparece de la derecha al hacer scroll, está sin contenido. Espero que sea de los estilos del widget, y para ello muestro solo este código a ver si ven el error que estoy cometiendo. EDITO He añadido una pluma de codepen, donde se muestra mas codigo por si pueden detectar el error. La cosa es en el ejemplo se ve bien, es en dispositivo móvil donde lo estropea. No se otra forma de mostrar que no funciona. Les dejo capturas de como seve y otra captura màs en la que se ve que hay que hacer scroll para ver la barra, arrastrando todo el contenido del body. Espero esto ayude. Gracias.

		if (sessionStorage.getItem('kool2')== null ){
			document.getElementById('aceptacion').style.display="block";
			}
			else {
			document.getElementById('aceptacion').style.display="none";
			}
		
			function PonerCookie(){
			sessionStorage.setItem('kool2',1);
			$('#aceptacion').fadeOut('slow');
		}
			//]]>
       
.cookie_wrap {
	width:100%;
	bottom:10px !important;
	left:0.3%;
	position:fixed;
	text-align:center;
	z-index: 999;
	margin:auto;
	opacity: 0.7;
	
    }


.cookie_notice {
	border: 2px solid #000; 
	display:inline-block;margin: auto;
	padding:10px;
	border-radius: 5px;
	font-size: 12px;
	text-align:center;
	font-family:verdana;
	box-shadow: 0px 0px 25px #000;
	background: #0FCB2C; 
	background-color: #0FCB2C;/*rgba(255,255,255,0.80); */
	color: #000;
	}
		
#cookie_button {
	background: #39C;
	color: #fff;
	font: bold 12px arial;
	padding:4px 10px;
	border-radius: 7px; 
	box-shadow: 0px 0px 6px #000;
	border: 1px solid #2E2E2E;
	}

.cookie_wrap a{
	color: #6C3C03;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>

        
</head>
<body>

	<div class='cookie_wrap' id='aceptacion'>
			<div class='cookie_notice'>
				<b>En este sitio usamos Cookies... si sigues navegando entendemos que aceptas nuestra política. </b>
				<button id='cookie_button' onclick='PonerCookie();' type='button'>OK</button>
				<a href='cookies.html'  target='_blank'>
					<b>Más información</b>
				</a>
			</div>
		</div>
    <p>Aqui pongo un poco de texto</p>
</body>
</html>

1 respuesta 1

1

En la clase .cookie_notice cambia por esto a ver si te sirve de esa manera.

display: block;
max-width: 50%;
margin: 0 auto;
6
  • Gracias @Isaac Fraire , osea que solo debo eliminar de mi codigo: display:inline-block;margin: auto; y añadir lo que tu me diste ?? el 6 mar. 2018 a las 20:02
  • He añadido tu código y eliminado la línea que comente antes y no funciona, corre el widget más hacia la derecha se ha hecho menos ancho y algo mas alto, pero como digo, lo lleva más a la derecha, peor aún. y no la deja fija que debía quedarse. No se si ponerlo en linea.... el 6 mar. 2018 a las 20:10
  • 1
    Solo reemplaza las lineas y con eso debe bastar Miguel. el 6 mar. 2018 a las 20:29
  • Pues no funciona... Añadir los estilos en línea a ver, y tampoco. Gracias. el 6 mar. 2018 a las 20:39
  • 1
    Un poco mas de detalles como navegador usado y tal vez un screen identificando el issue ayudarian mas. el 6 mar. 2018 a las 20:45

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.