Atlas theme - Diseño de galeria responsive  

 
Jordi
 Jordi
Usuario experto

Buenos días,
Tengo el Atlas theme de worpress instalado y con una galeria de marcas creadas en la siguente url: http://creativaonline.cat/provaweb/?page_id=11

El problema es que en modo responsive me gustaria que salieran cada imagen en una sola columna como adjunto en la capyura de pantalla...y no en 4 columnas como sale ahora mismo....

Alguna ayuda?

Muchas gracias

URL del sitio: Contenido solo visible a usuarios registrados

Citar
Respondido : 17/02/2018 11:39 am
Pepe
 Pepe
Soporte CMS Webempresa Admin

Hola Jordi.

Edita el archivo atlas_wp-custom.css que encontraras en wp-content -> themes -> atlas_wp -> css -> atlas_wp-custom.css y añade lo siguiente:

@media (max-width: 780px) {
#gallery-1 .gallery-item {
  float:none!important;
  width:100%!important;
  }
}

Un saludo

ResponderCitar
Respondido : 17/02/2018 12:34 pm

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

Jordi
 Jordi
Usuario experto

Ya lo he puesto y no funciona:

/**
* @version $Id: grid-responsive.css 2375 2012-08-14 22:41:53Z kevin $
* @author RocketTheme http://www.rockettheme.com
* @copyright Copyright (C) 2007 - 2014 RocketTheme, LLC
* @license http://www.rockettheme.com/legal/license.php RocketTheme Proprietary Use License
* Descripción : Sobreescritura de los estilos de 1200px para que sea por defecto 960px;
*
*/

#rt-transition .rt-container {width: 960px;margin: 0 auto;position: relative;}
#rt-transition .rt-grid-1 {width: 80px;}
#rt-transition .rt-grid-2 {width: 160px;}
#rt-transition .rt-grid-3 {width: 240px;}
#rt-transition .rt-grid-4 {width: 320px;}
#rt-transition .rt-grid-5 {width: 400px;}
#rt-transition .rt-grid-6 {width: 480px;}
#rt-transition .rt-grid-7 {width: 560px;}
#rt-transition .rt-grid-8 {width: 640px;}
#rt-transition .rt-grid-9 {width: 720px;}
#rt-transition .rt-grid-10 {width: 800px;}
#rt-transition .rt-grid-11 {width: 880px;}
#rt-transition .rt-grid-12 {width: 960px;}

@media only screen and (min-width: 768px) and (max-width: 959px) {
#rt-transition .rt-container {width: 768px;}
#rt-transition .rt-grid-1 {width: 64px;}
#rt-transition .rt-grid-2 {width: 128px;}
#rt-transition .rt-grid-3 {width: 192px;}
#rt-transition .rt-grid-4 {width: 256px;}
#rt-transition .rt-grid-5 {width: 320px;}
#rt-transition .rt-grid-6 {width: 384px;}
#rt-transition .rt-grid-7 {width: 448px;}
#rt-transition .rt-grid-8 {width: 512px;}
#rt-transition .rt-grid-9 {width: 576px;}
#rt-transition .rt-grid-10 {width: 640px;}
#rt-transition .rt-grid-11 {width: 704px;}
#rt-transition .rt-grid-12 {width: 768px;}
#gallery-1 .gallery-item {
float:none!important;
width:100%!important;
}

}

@media only screen and (min-width: 481px) and (max-width: 767px) {
body {-webkit-tap-highlight-color: transparent;}
#rt-transition .rt-container {width: 480px;}
#rt-transition .rt-container [class*="rt-grid"] {display: block;float: none;position: relative;width: 100%;}
#rt-transition .rt-container [class*="rt-push"], [class*="rt-pull"] {left: auto;}
#rt-transition .rt-container [class*="rt-prefix"] {padding-left: 0;}
#gallery-1 .gallery-item {
float:none!important;
width:100%!important;
}
}

@media only screen and (max-width: 480px) {
body {-webkit-tap-highlight-color: transparent;}
#rt-transition .rt-container {width: 95%;}
#rt-transition .rt-container [class*="rt-grid"] {display: block;float: none;position: relative;width: 100%;}
#rt-transition .rt-container [class*="rt-push"], [class*="rt-pull"] {left: auto;}
#rt-transition .rt-container [class*="rt-prefix"] {padding-left: 0;}
#gallery-1 .gallery-item {
float:none!important;
width:100%!important;
}
}

ResponderCitar
Respondido : 17/02/2018 1:16 pm
Jordi
 Jordi
Usuario experto

Ya esta....era gallery-2

Muchas gracias

ResponderCitar
Respondido : 17/02/2018 1:32 pm

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