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

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

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

Saludos

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

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

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

https://github.com/tpeigne/simpleresponsivetheme

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

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

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

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

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

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

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.

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.