Problema con web (versión móvil)

SkalS #1 Jun '17

Buenos días chicos,

Llevo varios días rompiéndome la cabeza con mi web www.makebcn.com, y es que el problema que tengo es el siguiente:

En la versión PC se aprecia todo el diseño bien, pero al pasar a móvil, el logotipo del header queda flotando en toda la pagina y el tanto este, como el logo del footer y los iconos de la pagina principal, se descuadran y sobresalen de la resolución del teléfono.

He estado rompiendome la cabeza por codigos HTML y CSS con "soluciones" de YouTube, y no encuentro la manera de poder redimensionar los iconos, ni de anclar el logo del header para que se quede arriba.

Trabajo con Dreamweaver desde una plantilla, mis conocimientos son bastante básicos.

Si alguien me puede dar un cable, os lo agradeceré de corazón.

¡Un saludo!

arthas_23 #2 Jun '17

Puedes poner captura de como queda?

Te voy comentando en función. Explica un poco lo del header y el footer, pero así rapido, te recomendaría buscar info sobre HTML5, en el cual se añaden etiquetas que podrían ayudarte con lo dicho (las imagenes pinta más de ser por CSS)

banerplayer #3 Jun '17

Lo que ocurre es que en pc muestras la imagen de la cabecera correctamente, pero desde movil está cogiendola desde un div llamado skel-panels (lo que supongo que desde el css tienes un @media que oculta la imagen de la cabecera y muestra la de skel-panels. Tocaria indagar el css del skel-panels para posicionarlo donde debe.

Peeeeero, yo te recomiendo que huyas de Dreamweaver, y aprendas Bootstrap (facil, sencillo e intuitivo) donde trabajaras con clases predefinidas preparadas para el responsive.

1

Kr4n3oK #4 Jun '17

Como te dicen, en móvil el logo está dentro del div con id titlebar que tiene este css

elemento {
    backface-visibility: hidden;
    transition: -webkit-transform 0.25s ease-in-out 0s;
    z-index: 10000;
    position: fixed;
    width: 100%;
    height: 44px;
    top: 0px;
    left: 0px;
}

Como observarás tiene un fixed para mantener el header arriba, pero al estar la imagen del logo, pues también la afecta.

Solución, saca la imagen de ahí y metela en otro sitio y posiciónala independientemente.

EDIT: El id en PC es skel-panels-pageWrapper y en el móvil es skel-panels-fixedWrapper y titlebar posteriormente, este último tiene el fixed.

1 respuesta

SkalS #5 Jun '17

Vale, ahora me pondré a ello a ver si lo soluciono.

¿El problema a la redimension del logo sabéis como solucionarlo?

Traber #6 Jun '17

Esto en el CSS:

img{
    width: auto;
    height: auto;
    max-width: 100%;
}

Resultado:

1 1 respuesta

SkalS #7 Jun '17

Había perdido las esperanzas en esta comunidad, pero veo que siguen habiendo foros que valen la pena.

¡Sois unos cracks!

#6 ¿en cualquier apartado del CSS sirve? ¿Lo implanto en el general o solo en el style.mobile?

EDIT: Vale, en el apartado *UI, solucionado

#4 ¿lo tengo que editar desde el CSS de mobile, el generico o html?, porque Dreamweaver no me permite editar directamente la versión de movil, sólo puedo editar el CSS de mobile sin que afecte a los demás.

1 1 respuesta

Kr4n3oK #8 Jun '17

#7 Uhm...la verdad que estuve mirando a ver si por casualidad en el CSS había media query para el tema de la versión móvil y me parece que no lo hay. Por lo tanto, tiene que haber un css que está mostrando o un bloque u otro dependiendo de si estamos en movil o PC. A partir de ahí, sacar la imagen de ese bloque es la prioridad ya que entiendo que ese bloque debe ser fixed para que la barra negra superior se quede siempre visible y en la parte superior. Entonces:

Buscamos el bloque div que contiene la imagen para versión móvil ( #skel-panels-fixedWrapper )
Sacamos la imagen a otro bloque
Añadimos el CSS necesario para ajustar dicha imagen de forma correcta en versión móvil

Espero haberme explicado, no puedo darte muchas mas nociones porque no veo el código xDD

1 respuesta

SkalS #9 Jun '17

#8 el CSS de la versión móvil:

spoiler

*/

/******************************************************************************/
/ Basic /
/******************************************************************************/

body,input,textarea,select
{
	line-height: 1.75em;
	font-size: 10.5pt;
	letter-spacing: 0;
}

body
{
	padding-top: 44px;
}

h2, h3, h4, h5, h6
{
	line-height: 1em;
	font-size: 1.5em;
}

section,
article
{
	clear: both;
	margin: 2em 0 2em 0 !important;
}

section > :first-child,
article > :first-child
{
	margin-top: 0 !important;
}

section:first-child,
article:first-child
{
	margin-top: 0 !important;
}

.container
{
	padding: 0em 1em;
}

hr
{
	margin: 3em 0 0 0;
	padding: 3em 0 0 0;
}

header
{
	margin-bottom: 1.6em;
}

	header h2
	{
		font-size: 2em;
	}

	header .byline
	{
		font-size: 1.2em;
	}

.button
{
	display: block;
	width: 100%;
	text-align: center;
}

/******************************************************************************/
/ UI /
/******************************************************************************/

img{
width: auto;
height: auto;
max-width: 100%;
}

#titleBar
{
	background: #161616;
}

	#titleBar .title a
	{
		display: block;
		color: #fff;
		text-align: center;
		line-height: 44px;
		font-weight: 300;
		text-decoration: none;
	}
	
	#titleBar .tag
	{
		display: none;
	}

	#titleBar .toggle
	{
		position: absolute;
		left: 0;
		top: 0;
		width: 80px;
		height: 60px;
	}

		#titleBar .toggle:after
		{
			content: '';
			display: block;
			width: 20px;
			height: 12px;
			position: absolute;
			left: 10px;
			top: 15px;
			background: url('images/toggle.svg') 0px 0px no-repeat;
			opacity: 0.5;
		}

		#titleBar .toggle:active:after
		{
			opacity: 0.75;
		}

#navPanel
{
	background: #1f1f1f;
}

	#navPanel .link
	{
		display: block;
		color: #888;
		text-decoration: none;
		height: 44px;
		line-height: 44px;
		border-top: solid 1px;
		border-color: rgba(255,255,255,.05);
		padding: 0 1em 0 1em;
		letter-spacing: 1px;
	}
	
		#navPanel .link:first-child
		{
			border-top: 0;
		}
		
		#navPanel .link.depth-0
		{
			color: #fff;
		}

		#navPanel .indent-1 { display: inline-block; width: 1em; }
		#navPanel .indent-2 { display: inline-block; width: 2em; }
		#navPanel .indent-3 { display: inline-block; width: 3em; }
		#navPanel .indent-4 { display: inline-block; width: 4em; }
		#navPanel .indent-5 { display: inline-block; width: 5em; }
		#navPanel .depth-0 { color: #fff; }

/******************************************************************************/
/ Header /
/******************************************************************************/

#header
{
	height: 10em;
	padding: 0;
	background-position: center center;
	background-attachment: scroll;
}

/******************************************************************************/
/ Logo /
/******************************************************************************/

#logo
{
	display: none;
}

#nav
{
	display: none;
}

/******************************************************************************/
/ Main /
/******************************************************************************/

#main
{
	padding: 4em 0em 2em 0em;
}

.homepage #content header h2
{
	padding: 0.70em 0em;
	font-size: 1.4em;
}

#sidebar h2
{
	font-size: 1.8em;
}

/******************************************************************************/
/ Footer /
/******************************************************************************/

#footer
{
	padding: 4em 0em 2em 0em;
}

/******************************************************************************/
/ Featured /
/******************************************************************************/

#featured
{
	padding: 4em 0em 3em 0em;
}

#featured h3
{
	padding: 1.5em 0em;
	font-size: 1.4em;
}

/******************************************************************************/
/ Welcome /
/******************************************************************************/

#welcome
{
	padding: 4em 0em 3em 0em;
}

/******************************************************************************/
/ Tweet /
/******************************************************************************/

#tweet
{
	padding: 3em 0em 1em 0em;
	background-position: center center;
	background-attachment: scroll;
}

#tweet blockquote
{
	margin: 0;
	padding: 1em 1em;
	font-size: 1.2em;
}		[/spoiler]

1 respuesta

Kr4n3oK #10 Jun '17

Si me das acceso a la web o lo que sea puedo intentar solucionarlo yo si no lo consigues.

1 respuesta

Kr4n3oK #11 Jun '17

#9 El tema está en lo siguiente. En style.css están los estilos generales y luego, por lo que veo finalmente, un fichero javascript está cambiando el fichero css según pc o movil. Yo lo que haría es lo que te he comentado. Sacar el logo del del div de móvil y lo posicionaria independientemente.
Actualmente está dentro de un div fixed, por lo que el logo siempre va a estar ahí y no se va a desplazar con el flujo normal del resto de bloques.

1 respuesta

SkalS #12 Jun '17

#11 si quieres te envío la web por WeTransfer y le pegas un vistazo, porque mis conocimientos ya no abarcan más.

1 respuesta

Kr4n3oK #13 Jun '17

#12 Si no te importa, me lo envías y yo lo echo vistazo y a ver si te la puedo dejar bien

1 1 respuesta

SkalS #14 Jun '17

#13 dejame tu correo por privado.

Traber #15 Jun '17

#10 ¿sabes que puedes ver el CSS de la web (y de cualquiera) con el inspector web del navegador?:

F12 (Chrome)
Click derecho - Inspeccionar elemento (Opera, Firefox)

2 respuestas

SkalS #16 Jun '17

#15 ¿tienes una ligera idea de como solucionar la posición y el anclaje de los logos en la parte superior?

1 respuesta

NickNack #17 Jun '17 :psyduck:

no quiero desviar ni lo digo por trollear ni nada, es una opinión sincera. El logo es feo de narices, pero feo feo. La M esta bien, el resto de la composición....

1 respuesta

Traber #18 Jun '17

#16 ahora estoy en el móvil, pero cuando pase por casa le echo un ojo xD. Pero vamos, es coger el selector del logo, meter un position: absolute o position: relative, y ponerlo donde quieras, lo que si he visto antes es que la imagen del logo la tienes metida en un H1, a lo mejor te conviene sacarlo fuera.

1 respuesta

SkalS #19 Jun '17

#17 imagino que irá a gustos, si tienes alguna sugerencia, ¡estaré encantado de escucharla!

#18 perfecto, muchas gracias crack

1 respuesta

Kr4n3oK #20 Jun '17

#15 No estaba en mi lugar de trabajo, gracias de todos modos.

NickNack #21 Jun '17 :psyduck:

#19 No tengo ninguna, no soy diseñador. El único consejo que te puedo dar es que busques a un "profesional" y le des otra vuelta al logo, puedes mantenerlo como está pero quitale esos brillos, cámbiale el color, alguna forma etc..

Respecto a tu pregunta original (nótese que no he mirado el codigo, solo las respuestas y visto la página) suena a que tienes las posiciones jodidas. El contenedor del menu deberia estar fixed, pero el resto de cosas deberian estar posicionadas sin fixed dentro de estas, si no relativamente a ellas o absolutamente a ellas, depende como quieras solucinar el tema.

Yo optaria por: Contenedor menú fijado y resto de elementos internos relativos flotantes. El cambio de CSS lo haría con media queries y nunca con JS.

1 respuesta

SkalS #22 Jun '17

#21 lo gracioso es que somos profesionales en diseño, años de experiencia y nuestros estudios nos abalan.

Por norma general el logo ha gustado, y de hecho hemos jugado con los brillos y los bordes porque a la hora de imprimirlo encima de las camisetas, al ser en blanco y negro, desaparecía el logo sobre negros o blancos.

Pero como te he dicho antes, sugerencias de cara a un futuro, son bienvenidas

1 respuesta

Traber #23 Jun '17

#22 Mira a ver si con este CSS se te queda bien:

div#skel-panels-pageWrapper > div{
	z-index: 10001;
}
div#skel-panels-pageWrapper > div#header{
	z-index: 1;
}
#skel-panels-fixedWrapper span.title img{
	z-index: 1;
}
#titleBar .toggle{
	z-index: 10001;
}

1 respuesta

SkalS #24 Jun '17

#23 desaparece el logo, pero como consecuencia, también desaparece la barra, y esta si que me interesaría que se quedara arriba.

¿No hay alguna manera de que el logo quede encajado dentro de la imagen del fondo y que la barra se mantenga?

Ayer me dí cuenta que en la versión en horizontal de móvil, el logo me sigue haciendo lo mismo que me hacia al principio en la versión móvil en vertical.

Imagino que el archivo será el style-1000px.css, ¿no?

Problema con web (versión móvil)

Usuarios habituales

Tags