Inbyggda bildgalleriet i Wordpress - Fråga om Responsive

2 svar · 842 visningar · startad av Vonne 31 okt. 2013

VonneMedlem sedan okt. 20136 inlägg

Frågan31 okt. 2013 18:37#1

Är det någon som vet hur man enkelt gör det inbyggda bildgalleriet i WP så att det fungerar responsive? Laddade ner några plugins för responsive bildgalleri och testade men inget som funkar riktigt bra tycker jag. Så jag vill hellre koda om det befintliga så att det ser bra ut responsive. Tänker mig 1 bild per rad för Smartphone Tack på förhand! På vanlig skärm ligger det mellan 4-5 bilder bredvid varandra i de olika bildgallerierna.

Tack på förhand! :)

Nate.AMedlem sedan mars 2006296 inlägg

1 nov. 2013 08:43#2

Hej Vonne

Det beror väl lite på vilket tema du har. Men det här kanske kan funka.
https://gist.github.com/jeffsebring/2271757

.gallery {
   margin: 0 auto;
}
 
.gallery .gallery-item  {
   margin: 0;
   float: left;
   text-align: center;
   width: 33%;
}
 
.gallery a img {
   border: none;
}
 
.gallery-columns-4 .gallery-item {
   width: 25%;
}
 
.gallery-columns-4 .gallery-item img {
   width: 100%;
   height: auto;
}

 
@media only screen and (max-width: 480px) {

   .gallery-columns-3 .gallery-item, 
   .gallery-columns-4 .gallery-item,
   .gallery-columns-2 .gallery-item {
      width: 100%;
      float:none;
   }
 
   .gallery-item img {
      width: 100%;
      height: auto;
   }
 
}

VonneMedlem sedan okt. 20136 inlägg

1 nov. 2013 20:00#3

Tack för hjälpen! :) Men jag vet inte om jag kan lösa problemet ändå...vet inte exakt vart jag ska gå in och ändra :-)
Jag använder ett tema som heter Hayden... och jag använder sedan det inbyggda bildgalleriet i WP. Har lagt bilderna med 4 bilder på rad som standard. Vill att dom visas med 1 st per rad för Smartphone. Behöver jag in i php koden också? :)

CSS koden ser ut såhär:

#gallery-1 img {
border: 2px solid #CFCFCF;
}
.gallery-item img {
width: 90%;
}
.gallery img {
border: medium none !important;
max-width: 100%;
}
a img {
border: medium none;
}
img {
margin: 0;
}
img, object, embed {
max-width: 100%;
vertical-align: middle;
}

/Vonne