Avisos
Vaciar todo

[Resuelto] hacer responsive módulo de portafolio y blog  

 
Anna
 Anna
Usuario eminente

Estoy adaptando mi web www.carlotapetit.com a modo tablet (y lugo ya veremos con el móvil....). Tengo dos módulos de portafolio con 4 imágenes y uno de blog con tres entradas y no consigo que se vean en una única fila. ¿Cómo lo consigo?

Contenido solo visible a usuarios registrados

Respondido : 04/12/2021 5:27 pm
Argenis
 Argenis
Soporte CMS Webempresa Moderator

Hola Anna,

Con respecto al portafolio, nos compartes la url en especifico para poder verlo, y en relacion al blog, veo dos columnas:

image

Según entiendo quieres que sea una sola columna? puedes seguir si deseas este tutorial por parte de unos de los desarrolladores:

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

Al rededor del minuto 5 explica como organizar estas entradas.

Un saludo 🖐️ 

Respondido : 04/12/2021 9:02 pm
Anna
 Anna
Usuario eminente

@argenis Hice un clon de la página en otro sitio para practicar sin sufrir por las consecuencias por eso he tardado un poco. En mi página al poner el tamaño a tablet salen 3 imagenes en línea y la cuarta en la siguiente línea como en las imágenes que adjunto. Al leer tu respuesta he pensado que también estaría bién (o mejor) dos y dos. Así que me he visto el vídeo, emocionada lo pruebo porque dos lineas de código no son ná...y ¡zasca! y me sale este buñuelo...las cuatro imágenes en línea, pero la cuarta algo discriminada...

porfoli2
porfoli0

 

Respondido : 05/12/2021 7:25 pm
Anna
 Anna
Usuario eminente

Peeeeeerdón! 

https://responsive.jotambepuc.net

Respondido : 05/12/2021 7:26 pm
Karen Rios
 Karen Rios
Soporte CMS Webempresa Moderator

Hola Anna, 

En este caso prueba lo siguiente, lo primero es eliminar el código CSS que tienes en el portafolio cuando elimines este código que añadiste anteriormente en la misma ventana de avanzado añade la siguiente clase a tu portafolio

Screenshot (67)

Una vez añadas esta clase guarda los cambios e ingresa al apartado de Divi -> Opciones del tema -> General -> CSS Personalizado y añade el siguiente código CSS

@media only screen and (max-width: 981px) and (min-width: 767px) {
.wep-col-portfolio .et_pb_grid_item {
width: 47.25%!important;
margin-right: 5.5%!important;
}

.wep-col-portfolio .et_pb_grid_item:nth-child(3n) {
margin-right: 5.5%!important;
}

.wep-col-portfolio .et_pb_grid_item:nth-child(2n) {
margin-right: 0!important;
}

.wep-col-portfolio .et_pb_grid_item.et_pb_portfolio_item:nth-child(4n+1) {
clear: none!important;
}

.wep-col-portfolio .et_pb_grid_item.first_in_row {
clear: unset;
}
.et_pb_column .et_pb_grid_item.et_pb_portfolio_item:nth-child(3n+1) {
clear: unset!important;
}
}

Guarda los cambios y revisa si con ello el portafolio se muestra en dos columnas en la versión de table

Un Saludo 

Respondido : 05/12/2021 10:00 pm
Anna
 Anna
Usuario eminente

¡Ha funcionado gracias! Aunque da algo de rabia pensar que he necesitado tanto código. En la versión móvil el css de column-count funcionó a la perfección.

Respondido : 06/12/2021 6:00 pm
Argenis
 Argenis
Soporte CMS Webempresa Moderator

Hola Anna,

Encantados de poder ayudar, si tienes alguna otra duda recuerda que puedes crear un nuevo tema y con todo gusto lo atenderemos.

Un saludo 🖐️ 🤓 

Respondido : 06/12/2021 6:03 pm