- 12 columns: 8.33%
- 10 columns: 10%
- 8 columns: 12.5%
- 6 columns: 16.66%
- 5 columns: 20%
- 4 columns: standard
- 3 columns: 33.33%
- 2 columns: 50%
- 1 column: 100%
Add this to the custom css » module elements of the gallery item.
The 2vw is the 1vw margin x the number of gutters (= columns -/- 1).
So 5 columns has 4 gutters and with a 1vw margin makes 4vw.
width: calc(33.33% - 2vw) !important;
margin: 1vw !important;
clear: none !important;Code language: HTTP (http)
Add this to the custom css » free-form css of the gallery item.
/** START Change gallery module columns **/
/* Desktop */
@media (min-width: 981px){
selector .et_pb_gallery_item {
width: calc(16.66% - 5vw) !important; /*six columns*/
margin: 1vw !important;
clear: none !important;
}
}
/* Tablet */
@media (max-width: 980px){
selector .et_pb_gallery_item {
width: calc(25% - 3vw) !important; /*four columns*/
margin: 1vw !important;
clear: none !important;
}
}
/* Small Tablet and Large Phone **/
@media (max-width: 767px){
selector .et_pb_gallery_item {
width: calc(33.33% - -2vw) !important; /*three columns*/
margin: 1vw !important;
clear: none !important;
}
}
/* Phone */
@media (max-width: 479px){
selector .et_pb_gallery_item {
width: calc(50% - 1vw) !important; /*two columns*/
margin: 1vw !important;
clear: none !important;
}
}
/** END Change gallery module columns **/Code language: CSS (css)
Or with a class, same as above, but add the class hws-gallery-columns into the gallery module advanced » class.
Add the CSS in the divi theme options and replace selector with .hws-gallery-columns.