edición html portada y adaptación a la ventana movil  

Página 1 / 2
 
Carmen
 Carmen
Reputable Member

Hola, he quitado el slider de la portada (javascript) y estoy intentando editarla mediante html. He añadido tres imágenes y al pie un enlace a páginas de producto. En el ordenador queda suficientemente bien pero en el movil, no. Necesitaria que me informarais del codigo css que deberia poner para que se visualice bien en el movil.
Estos tres enlaces quisiera convertirlos en etiquetas H3 pero si lo hago mediante el editor que tengo me sale un tamaño muy grande. ¿En que archivo deberia modificar el tamaño de estas etiquetas H3 asociadas al pie de foto? He leido que suelen estar asociadas a Homefeatured. ¿Si lo hago puedo estar modificando h3 que tenga en otras páginas? Disculpad mi desconocimiento de este tema 🙂
Adjunto captura

GRacias

URL del sitio: Contenido solo visible a usuarios registrados

 

 

This topic was modified hace 2 meses por Pepe
Citar
Respondido : 07/04/2018 2:06 pm
Pepe
 Pepe
Soporte CMS Webempresa Admin

Hola Carmen.

¿ Lo que quieres es modificar el tamaño de las letras ?
Creo que no lo estas enfocando bien, lo primero que veo es que esta añadiendo una imagen con las tres imágenes juntas, tendrías que separarlas en tres bloques, es decir tres imágenes y cada una con su enlace.

Creas primero la clases para esas imágenes añadiendo lo siguiente a tu archivo de estilos css:

.img-container {
    float: left;
    width: 33.33%;
    padding: 5px;
}
.clearfix::after {
    content: "";
    clear: both;
    display: table;
}

Añades las imágenes dentro de un div:

 

Para la versión móvil, lo que buscamos es que esas imágenes aparezcan una debajo de la otra en vez de estar las tres en una misma linea, esto lo conseguimos con el siguiente código:

@media only screen and (max-width: 600px) {
.img-container {
float:none;
}
}

Un saludo

This post was modified hace 1 día por antonio

Si nuestra ayuda te sirve déjanos tu testimonio y mejora así el posicionamiento de tu web:
Enviar Testimonio
¿Has probado WpCenter?, es nuestro nuevo manager de WordPress desde el propio cPanel sin necesidad de acceder a tu administración, te permitirá configurar actualizaciones automáticas y mucho más.
Pruébalo accediendo a tu cPanel > Aplicaciones Webempresa > WpCenter
¡Gracias!.

ResponderCitar
Respondido : 07/04/2018 2:57 pm

Cursos Gratuitos WordPress

Carmen
 Carmen
Reputable Member

Fenomenal! muchas gracias por tus comentarios, voy a probarlo enseguida

Saludos

ResponderCitar
Respondido : 07/04/2018 5:43 pm
Carmen
 Carmen
Reputable Member

Ya he aplicado esos cambios y está quedando bien, sin embargo en el movil las imagenes quedan muy pequeñas, a la izquierda. Adjunto captura.

Muchísimas gracias Pepe

 

 

This post was modified hace 2 meses por Pepe
ResponderCitar
Respondido : 07/04/2018 7:25 pm

Gestor de Contraseñas - VPN Conexión Segura - Gestor 2FA (Segundo Factor de Autenticación

Carmen
 Carmen
Reputable Member

Finalmente he quitado el codigo final para el movil del css y sale en una sola linea las tres imagenes como en el ordenador. He preferido esto que una imagen única por línea pues en ese caso se desplazan hacia la izquierda como en la captura.
¿Cabe la posibilidad de convertir el titulo de esos enlaces en etiquetas H3?
No sé si es por estos cambios, pero he visto que la puntuación en la velocidad del movil ha bajado 2 puntos (esperaba mejorar al quitar el slider) sin embargo en la del ordenador, no. También he visto que en el informe se indica que hay 11 recursos javascript y 2 css que se deberian optimizar (ordenador) y 24 y 3 en el caso del móvil. ¿Puede estar relacionado? ¿Por qué esa diferencia? Pensaba que el número de recursos javascript y css eran los mismos en el ordenador y en el movil.
Gracias

ResponderCitar
Respondido : 07/04/2018 11:59 pm
Luis Mendez Alejo
 Luis Mendez Alejo
Miembro Admin

Hola Carmen,

Cuando accedo a tu web desde Firefox en el móvil lo que veo es la versión web de la tienda y no la versión móvil.

 

 

Eso quiere decir que tu tema en uso "Simple Responsive Theme" no es tan responsive como debería.

¿Puedes indicar la url del autor del tema que usas para verficarlo?

Saludos

This post was modified hace 2 meses por Pepe

Si nuestra ayuda te sirve déjanos tu testimonio y mejora así el posicionamiento de tu web:
Enviar Testimonio
¡Gracias!.

ResponderCitar
Respondido : 08/04/2018 2:28 am

wpdoctor-revisa-la-salud-de-tu-wordpress

Carmen
 Carmen
Reputable Member

https://github.com/tpeigne/simpleresponsivetheme

ResponderCitar
Respondido : 08/04/2018 2:45 am
Luis Mendez Alejo
 Luis Mendez Alejo
Miembro Admin

Hola Carmen,

Hay algo que no cuadra. En tu web usas PrestaShop 1.6.1.18 que es la versión estable, pero el tema que me has indicado es para PrestaShop 1.5 "exclusivamente", tal como indica el autor del tema:

No tengo muy claro como te está funcionando bien en PrestaShop 1.6 sin generarte problemas, pero que no se muestre "responsive" puede ser una de las causas.

El tema queda claro en el Git del proyecto que es para PrestaShop 1.5

https://github.com/tpeigne/simpleresponsivetheme/tree/master/themes/simpleresponsivetheme

Sabes que a Google no le gusta posicionar sitios que usen temas "no responsive".

Parece que Google detecta mejor que mi móvil la "versión móvil" de tu tema, pero considera que no es 100% responsive:

- https://testmysite.withgoogle.com/intl/en-gb

¿Te has planteado usar un tema que sea específico para PrestaShop 1.6 y 100% responsive?

Saludos

Si nuestra ayuda te sirve déjanos tu testimonio y mejora así el posicionamiento de tu web:
Enviar Testimonio
¡Gracias!.

ResponderCitar
Respondido : 08/04/2018 3:20 am

optimiza-automaticamente-todas-las-imagenes-de-tu-wordpress

Pepe
 Pepe
Soporte CMS Webempresa Admin

Hola Carmen.

Ok, modifica el código que te pase para la versión móvil por el siguiente:

@media only screen and (max-width: 600px) {
.img-container {
float:none!important;
  width:100%!important;
}
  .img-container a {
    font-size: 20px;
    color:red;
    font-weight: 800;
  }

}

Con este código te mostrara las imágenes una debajo de otra pero ocuparan el 100% del bloque y también aumente el tamaño de las letras del enlace.

 

 

Discúlpame, no lo probé cuando te lo pase antes y no caí en el tema de las imágenes.

Un saludo

This post was modified hace 2 meses por Pepe

Si nuestra ayuda te sirve déjanos tu testimonio y mejora así el posicionamiento de tu web:
Enviar Testimonio
¿Has probado WpCenter?, es nuestro nuevo manager de WordPress desde el propio cPanel sin necesidad de acceder a tu administración, te permitirá configurar actualizaciones automáticas y mucho más.
Pruébalo accediendo a tu cPanel > Aplicaciones Webempresa > WpCenter
¡Gracias!.

ResponderCitar
Respondido : 08/04/2018 1:12 pm
Carmen
 Carmen
Reputable Member

Pepe, muchas gracias, me ha ido muy bien el codigo que me has enviado despues. Estéticamente me gusta pero no entiendo porque la puntuación en velocidad es menor ahora que he quitado el slider de la portada y que estas fotos en su conjunto pesan menos que el slider.

Luis, gracias también por tus orientaciones, sabia que era un theme antiguo ya, pero pensaba que era compatible con 1.6. Pensaba que esto tan básico lo habia tenido en cuenta el desarrollador a quien encargué la web. Si tengo pensado cambiar el theme a 100% responsive pero a medio plazo ya que requiere mucho trabajo la buena puesta a punto de una versión nueva. A corto plazo estoy pensando en instalar un modulo AMP, aunque también me preocupa si dará el resultado esperado o me creará otras complicaciones. ¿Conoces alguno que facilite el tema?

De momento para salir del paso de manera rápida me gustaria resolver los aspectos más fáciles, con vuestra atyuda. Con respecto a la portada, solo me quedaria desplazar el texto de la 1ª columna del footer hacia la derecha, pues queda muy justa, en el límite de la pantalla gráfica.

Os agradezco mucho la ayuda tan efectiva que siempre dais.

Saludos

ResponderCitar
Respondido : 09/04/2018 1:37 am

Cursos Gratuitos WordPress

Luis Mendez Alejo
 Luis Mendez Alejo
Miembro Admin

Hola Carmen,

Debajo de cada imagen de portada (de las 3 que aparecen al principio) y justo después del código html de la imagen deberías poner un <br />> para romper la línea y que el texto "Alfombra Ziegler" etc queden debajo de cada imagen.

Ahora quedan a al derecha y desplaza la imagen y se cortan los textos. (queda feo).

Saludos

Si nuestra ayuda te sirve déjanos tu testimonio y mejora así el posicionamiento de tu web:
Enviar Testimonio
¡Gracias!.

ResponderCitar
Respondido : 09/04/2018 1:59 am
Carmen
 Carmen
Reputable Member

He incluido
y veo que sale bien el texto debajo de cada imagen pero antes también lo veia 🙂 y no sé si es porque lo visualizo desde otro tipo de movil. ¿Por favor podrias comprobar que se visualiza bien?
¿Podrias decirme que código css deberia añadir para desplazar la 1ª columna del footer hacia la derecha? pues queda justo en el límite de la pantalla gráfica. Lo ideal es que quede el mismo margen que en la 2ª columna, lado derecho.

Muchas gracias

ResponderCitar
Respondido : 09/04/2018 12:38 pm

Gestor de Contraseñas - VPN Conexión Segura - Gestor 2FA (Segundo Factor de Autenticación

Pepe
 Pepe
Soporte CMS Webempresa Admin

Hola Carmen.

podrias comprobar que se visualiza bien?
Esto es lo que veo:

 

 

desplazar la 1ª columna del footer hacia la derecha?
Prueba lo siguiente:

@media only screen and (max-width: 600px) {
#footer {
  padding-left: 15px !important;
}
}

Un saludo

This post was modified hace 2 meses por Pepe

Si nuestra ayuda te sirve déjanos tu testimonio y mejora así el posicionamiento de tu web:
Enviar Testimonio
¿Has probado WpCenter?, es nuestro nuevo manager de WordPress desde el propio cPanel sin necesidad de acceder a tu administración, te permitirá configurar actualizaciones automáticas y mucho más.
Pruébalo accediendo a tu cPanel > Aplicaciones Webempresa > WpCenter
¡Gracias!.

ResponderCitar
Respondido : 09/04/2018 1:40 pm
Carmen
 Carmen
Reputable Member

Pepe, éste último código también ha sido muy útil, muchísimas gracias, por fin se visualiza bien en el movil. Si me permites unas cosa más, me doy cuenta que también seria necesario desplazar esa primera columna en el ordenador. Creo que habré modificado algo sin darme cuenta y también veo todo el bloque muy desplazado hacia la izquierda. Lo ideal seria que siguiera la misma sangria que las imágenes superiores.

ResponderCitar
Respondido : 09/04/2018 5:19 pm

wpdoctor-revisa-la-salud-de-tu-wordpress

Jhon Marreros Guzman
 Jhon Marreros Guzman
Soporte CMS Webempresa Moderator

Hola

Podrías probar centrando las imágenes y el texto, agrega el siguiente código CSS:

#editorial_block_center .img-container{
	text-align: center;
}

#editorial_block_center .img-container a{
	display:block;
}

Saludos.

Si nuestra ayuda te sirve déjanos tu testimonio y mejora así el posicionamiento de tu web:
Enviar mi Testimonio
¡Gracias!.

ResponderCitar
Respondido : 09/04/2018 7:09 pm
Página 1 / 2

Por favor Iniciar Sesión o Registro