Inbyggda bildgalleriet i Wordpress - Fråga om Responsive

Ä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! :)

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

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