Avisos
Vaciar todo

Imágenes se ven cortadas al verlas desde dispositivos más pequeños  

Página 1 / 2
 
Roberto
 Roberto
Estimable Member

Buenos días, me gustaría que me ayudarais o me dierais vuestro consejo sobre el problema que tengo con las imagenes de la página de inicio, tanto la imagen que he puesto en el header de la web como las imágenes que están justo debajo del header y el menú de la página de inicio. El problema es que al verlas desde el movil, o tablet o un portatil más pequeño, las imágenes en vez de adaptarse para que se vean enteras pero más pequeñas lo que hacen es cortarse y queda muy feas, os muestro como las veo yo desde mi equipo: 

 

image

 lo de abajo del menú es un carrusel de 4 imagenes : 

image

Cuando la web https://venemoto.es se ve desde un portatil mas pequeño las imágenes se van cortando y no se adaptan al tamaño :

 

image

y si las vemos desde un móvil :

 

image
image

 

¿Me podeis ayudar para que esas imágenes se vean enteras sea cual sea el dispositivo desde el que se usa para ver la web?

 

Muchas gracias.

 

Contenido solo visible a usuarios registrados

Citar
Respondido : 13/02/2023 10:28 am
Pepe
 Pepe
Soporte CMS Webempresa Admin

Hola Roberto.

Veo que es un Background lo que utilizas como imagen.

Prueba añadir lo siguiente en Apariencia -> Personalizar -> CSS Adicional:

div.et_pb_section.et_pb_section_0_tb_header {
background-size: contain;
}

.et_pb_slider .et_pb_slide_0 {
background-size: contain;
}

 

Lo más seguro que tendrás que adaptar las imágenes al espacio de los Banner o hacer que el banner tenga un tamaño inferior.

Ten en cuenta que no es el contenedor el que se tiene que adaptar a las imágenes, son las imágenes las que se tiene que adaptar al contenedor.

 

Un saludo

 

 

 

ResponderCitar
Respondido : 13/02/2023 11:11 am

Roberto
 Roberto
Estimable Member

Hola @pepesoler, la imagen se ha adaptado pero me quedan muchos huecos, lo que hice fue bajar lo del carro de la compra y lo del buscardor abajo del header porque sino el el hueco del buscador tapaba toda la imagen del header en el movil:

image

lo he bajado pero el problema que veo es que se quedan muchos huecos, esta es la vista desde un movil

image

 Desde un equipo portatil también se mete algo de huecos :

 

image

¿Podemos recortar todos esos huecos para que se vea más seguido?

 

Quedo pendiente de tu consejo.

 

Un saludo y gracias de nuevo.

ResponderCitar
Respondido : 13/02/2023 11:43 am
Pepe
 Pepe
Soporte CMS Webempresa Admin

Hola Roberto.

Si te das cuenta las imágenes de los banners tienen unos tamaños distintos.

Imagen2

Imagen 1

Lo primero que tienes que hacer es modificar las imágenes para que todas tengan el mismo tamaño con eso podras adaptar el deslizador de Divi en un tamaño para que no muestre esos márgenes pero como te indico las imágenes tienen que tener el mismo tamaño.

Empieza modificando esas imágenes y cuando tengas lo del slier solucionado vemos lo de la cabecera.

 

Un saludo 

 

ResponderCitar
Respondido : 13/02/2023 12:13 pm

Roberto
 Roberto
Estimable Member

Me parece bien @pepesoler. He modificado el tamaño de las 4 imágenes del banner a 1800x600, ya me dices como adapto el deslizador de Divi en un tamaño para que no muestre esos márgenes y luego faltaria lo de la cabecera.

Si el tamaño hay que cambiarlo a otro, me dices y lo hago, lo que quiero es que quede lo mejor posible.

Ya me dices para continuar.

Muchas Gracias.

ResponderCitar
Respondido : 13/02/2023 12:38 pm
Pepe
 Pepe
Soporte CMS Webempresa Admin

Hola Roberto.

Ok en las opciones de la imagen de fondo selecciona la opción stretch

screenshot mary52.webempresa.eu 2023.02.13 14 00 32

 

Un saludo

ResponderCitar
Respondido : 13/02/2023 1:03 pm

Roberto
 Roberto
Estimable Member

OK @pepesoler, esto del banner ya esta. Nos falta la cabecera, ¿Cómo hacemos para que no salga los huecos a la derecha e izquierda y evitar que en el movil se ve con tantos espacios?

 

Ya me dices.

 

Un saludo.

ResponderCitar
Respondido : 13/02/2023 1:28 pm
Karen Rios
 Karen Rios
Soporte CMS Webempresa Moderator

Hola Roberto, 

En este caos veo que tienes una fila o columna que añade el espacio a esta sección, debe aumenta un poco más el tamaño para que esta cubra el tamaño correcto de la imagen. 

image

Revisa la sección de escritorio para que puedas ver la vista móvil, ya que esta afecta el tamaño con se visualiza la sección. 

Prueba Elimnar el CSS que has añadido anteriormente y revisa como se ajusta de esta forma la sección completa. 

Ten en cuenta que una opción si quieres añadir este tipo de banner es no añadirlo como una imagen de fondo si no con el modulo de imagen de Divi, solo debes ajustar el año y taño de las columnas a un 100 y 0, por ejemplo

Contenido solo visible a usuarios registrados

Adicional a ello ten en cuenta que tu imagen tiene unos bordes en blanco que pueden hacer parecer no está tomando todo el ancho de la sección

image

Verifica esto y nos comentas como va todo

Un Saludo

Esta publicación ha sido modificada el hace 2 años por Karen Rios
ResponderCitar
Respondido : 13/02/2023 1:59 pm

Roberto
 Roberto
Estimable Member

Perdona @karen pero no me ha quedado claro lo que tengo que hacer, he eliminado las columnas que había en la cabecera y se ha quedado sólo la imagen de fondo para la cabecera y he quitado el CSS que añadimos anteriormente pero en el móvil me sigue saliendo huecos en blanco y se ve mal.

 

image

Ya me dices y perdona que no entendí bien donde tengo que tocar para que ya se vea bien!!

Gracias.

ResponderCitar
Respondido : 14/02/2023 10:17 am
Pepe
 Pepe
Soporte CMS Webempresa Admin

Hola Roberto.

Prueba con esto:

@media only screen and (max-width: 600px) {
.et_pb_row_0_tb_header.et_pb_row {
padding-top: 0px!important;
padding-bottom: 60px!important;
}
}

 

Un saludo

 

ResponderCitar
Respondido : 14/02/2023 11:13 am

Roberto
 Roberto
Estimable Member

@pepesoler lo he añadido pero sigue igual, te muestro captura de lo que tengo en el css :

 

image
ResponderCitar
Respondido : 14/02/2023 11:22 am
Pepe
 Pepe
Soporte CMS Webempresa Admin

Hola Roberto.

Tienes este codigo que es el que está provocando que no coja el código anterior:

.et_pb_row_0_tb_header.et_pb_row {
padding-top: 129px!important;
padding-bottom: 129px!important;
}

 

No seria mas logico que en el encabezado tengas el logo y los datos de contacto en vez de una imagen como Background que te puede causar problemas como los que estás teniendo ?

Revisa este video del curso de Divi:

https://www.youtube.com/watch?v=TuaqBhn_j4U

 

Un saludo

ResponderCitar
Respondido : 14/02/2023 12:11 pm

Roberto
 Roberto
Estimable Member

Gracias @pepesoler, he conseguido ponerlo así, se me queda un pequeño hueco en blanco arriba pero si alargo más la foto no me gusta como queda, sólo me falta cambiar el color del fondo del submenú en el móvil, ¿puedes recordarme dónde se cambiaba?

image

Muchas gracias por todo.

 

ResponderCitar
Respondido : 14/02/2023 1:14 pm
Karen Rios
 Karen Rios
Soporte CMS Webempresa Moderator

Hola Roberto, 

En este caso prueba si con el siguiente código se elimina el espacio superior de tu cabecera en móvil 

@media only screen and (max-width: 600px) {
.et_pb_with_border.et_pb_row.et_pb_row_0_tb_header.dsdep-border-color-dark.et_pb_equal_columns {
margin-top: -26px !important;
}
}

Con respecto al color de fondo para el menú puedes modificarlo al editar el menú, luego debes ir al apartado de Diseño → enlaces al menú desplegable y selecciona el color de fondo desees tener

image

Verifica si en esta sección logras modificar lo que necesitas. 

Un Saludo 

ResponderCitar
Respondido : 14/02/2023 1:44 pm

Roberto
 Roberto
Estimable Member

 Gracias @karen, hay creo que es donde lo tengo puesto pero luego al guardar se ve en blanco y las letras no se ven! He ido al encabezado globar en generados de temas y allí he seleccionado el menú, le he puesto vista desde móvil y luego le he dado a Diseño → enlaces al menú desplegable, he puesto fondo negro y letras en blanco pero sigue saliendo blanco el fondo y letras deben ser blancas porque no se ven.

image

 

ResponderCitar
Respondido : 14/02/2023 2:15 pm
Página 1 / 2