Centreren thumbnails in een image gallery
Ik heb een Wordpress website heb met daarin een plugin voor een Image Gallery.
Men ziet eerst een kleine thumbnail en nadat daarop geklikt is krijgt je de afbeelding vergroot te zien.
Probleem:
De thumbnails worden niet netjes gecentreerd in de pagina weergegeven. Op mobiele telefoons, tablets en PC's ziet het er elke keer anders uit. Hoe kan ik ervoor zorgen dat de thubmails op elk apparaat netjes gecentreerd worden weergegeven?
Wat heb ik zelf gedaan?
Ik heb de configuratieinstellingen van de plugin nagelopen maar niks kunnen vinden. Ik heb de thumbnails in een div geplaatst en daarna met CSS de eigenschap align: center toegepast.
wie weet iets meer?
http://www.jijdigitaal.nl/test/gallery/
Je kunt drie dingen doen om dit op te lossen:
A. je padding-left vergroten van de parent-div
B. je afbeeldingen iets groter weergeven zodat er precies 6 afbeeldingen in de parent-div passen per regel
C. De margin tussen de afbeeldingen onderling iets vergroten.
Aan jou de keus.
Toevoeging op 28/11/2014 17:35:35:
A:
Code (php)
1
2
3
4
2
3
4
#header, #main, #footer, .footer-area {
padding-left: 45px; /* aangepast */
padding-right: 0px;
}
padding-left: 45px; /* aangepast */
padding-right: 0px;
}
B
Code (php)
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
.ngg-gallery-thumbnail img {
width: 200px; /* toegevoegd */
background-color: #FFFFFF;
border: 1px solid #A9A9A9;
display: block;
margin: 4px 0px 4px 4px;
padding: 4px;
position: relative;
}
width: 200px; /* toegevoegd */
background-color: #FFFFFF;
border: 1px solid #A9A9A9;
display: block;
margin: 4px 0px 4px 4px;
padding: 4px;
position: relative;
}
C:
Code (php)
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
.ngg-gallery-thumbnail img {
background-color: #FFFFFF;
border: 1px solid #A9A9A9;
display: block;
margin: 4px 0 17px 17px; /* aangepast */
padding: 4px;
position: relative;
}
background-color: #FFFFFF;
border: 1px solid #A9A9A9;
display: block;
margin: 4px 0 17px 17px; /* aangepast */
padding: 4px;
position: relative;
}