Avisos
Vaciar todo

Atlas theme - Diseño de galeria responsive

4 Respuestas
2 Usuarios
0 Reactions
417 Visitas
Jordi
Respuestas: 83
Trusted Member
Topic starter
Translate
English
Spanish
French
German
Italian
Portuguese
Russian
Chinese
Japanese
Korean
Arabic
Hindi
Dutch
Polish
Turkish
Vietnamese
Thai
Swedish
Danish
Finnish
Norwegian
Czech
Hungarian
Romanian
Greek
Hebrew
Indonesian
Malay
Ukrainian
Bulgarian
Croatian
Slovak
Slovenian
Serbian
Lithuanian
Latvian
Estonian
 

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


 
Respondido : 17/02/2018 11:39 am
Pepe
 Pepe
Respuestas: 42239
Illustrious Member Admin
Translate
English
Spanish
French
German
Italian
Portuguese
Russian
Chinese
Japanese
Korean
Arabic
Hindi
Dutch
Polish
Turkish
Vietnamese
Thai
Swedish
Danish
Finnish
Norwegian
Czech
Hungarian
Romanian
Greek
Hebrew
Indonesian
Malay
Ukrainian
Bulgarian
Croatian
Slovak
Slovenian
Serbian
Lithuanian
Latvian
Estonian
 

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


 
Respondido : 17/02/2018 12:34 pm
Jordi
Respuestas: 83
Trusted Member
Topic starter
Translate
English
Spanish
French
German
Italian
Portuguese
Russian
Chinese
Japanese
Korean
Arabic
Hindi
Dutch
Polish
Turkish
Vietnamese
Thai
Swedish
Danish
Finnish
Norwegian
Czech
Hungarian
Romanian
Greek
Hebrew
Indonesian
Malay
Ukrainian
Bulgarian
Croatian
Slovak
Slovenian
Serbian
Lithuanian
Latvian
Estonian
 

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;
}
}


 
Respondido : 17/02/2018 1:16 pm
Jordi
Respuestas: 83
Trusted Member
Topic starter
Translate
English
Spanish
French
German
Italian
Portuguese
Russian
Chinese
Japanese
Korean
Arabic
Hindi
Dutch
Polish
Turkish
Vietnamese
Thai
Swedish
Danish
Finnish
Norwegian
Czech
Hungarian
Romanian
Greek
Hebrew
Indonesian
Malay
Ukrainian
Bulgarian
Croatian
Slovak
Slovenian
Serbian
Lithuanian
Latvian
Estonian
 

Ya esta....era gallery-2

Muchas gracias


 
Respondido : 17/02/2018 1:32 pm